Help us understand the problem. What is going on with this article?

ERD(Entity Relationship Diagram)を記述するための erd-go と周辺ツールを作りました

More than 1 year has passed since last update.

ERD(Entity Relationship Diagram) って何?

  • 日本語訳だと 実体関連図(wikipedia)
  • エンティティ同士の1対多や多対多などの関連性を俯瞰することができます

どういうもの?

とりあえずデモをご覧くださいませ。
erd-go + graphviz-dot.js + vscode プラグインの ERD Preview の組み合わせで実現しています

vscode-erd-demo.gif

書き方

# Entities are declared in '[' ... ']'. All attributes after the entity header
# up until the end of the file (or the next entity declaration) correspond
# to this entity.
[Person]
*name
height
weight
+birth_location_id

[Location]
*id
city
state
country

# Each relationship must be between exactly two entities, which need not
# be distinct. Each entity in the relationship has exactly one of four
# possible cardinalities:
#
# Cardinality    Syntax
# 0 or 1         0
# exactly 1      1
# 0 or more      *
# 1 or more      +
Person *--1 Location
  • [] の中に名前を記載するとテーブル名と認識します
  • テーブル名の後にカラム名を記載します
  • テーブル名同士を 1--* (1対多) や *--* (多対多) と記載することで、テーブル同士を関連付けることができます

作った動機

大きく分けて2つあります

  1. WEB システム設計時のモデル設計を楽にしたい
    • 大体 WEB システムを実装する時にはモデルの関連設計をすると思います
      • Twitter っぽいものを作る場合には、「User が複数の Tweet を持っていて、Tweet は返信機能があるから Reply というテーブルがあって ...」 といったようなお話
    • また、既存のモデルから ER図を起こすツールというのは存在しています ( rails-erd etc)
    • ですが、実装を始める前の設計段階のツールはあるにしてもコレジャナイ感はありました
    • そこで「初期設計時にラフに1対多や多対多を設計するにはどうしたもんかな? :thinking:」と悩んだ結果作ることにしました
  2. BurntSushi さんが作った erd というツールを改善したい
    • お手軽さを重視したい
      • インストールは不要にして、シングルバイナリで使いたい
    • erd コマンド自体を OS 問わずにマルチプラットフォームで使いたい
      • Windows/Mac/Linux で使いたかったためです
      • Windows/Mac は執筆するために利用
      • また、Jenkins で定期的に図を生成したいので Linux にも対応した方がいいと考えたためです
    • 1対他の表現をもう少し分かりやすくしたい
      • 単なるスタイル調整ですが、重視したいと思った次第です

各種ツールで使っている技術

erd-go

ここでは入力された構文を Graphviz の dot 言語に変換する役割を担うため、PEG(Parsing Expression Grammar) 自体の学習も兼ねて pointlander/peg を利用しました

graphviz-dot.js

erd-go で吐き出した DOT 言語を SVG に変換するためのツールです。graphviz の dot コマンド相当です

  • JavaScript
  • Emscripten
    • Graphviz ライブラリを JS に変換するために Emscripten を利用しています
    • コマンドラインオプションの処理は別途 dot.js として実装しています
  • zeit/pkg
    • Node.js 実行環境と JS を実行ファイルにパッケージするためのツールです
    • upx に対応していないため、バイナリサイズがデカイのが難点

ERD Preview (Visual Studio Code 拡張)

  • JavaScript
  • こちらは素直に erd コマンドと dot コマンドをハンドリングするだけです
  • VScode の拡張機能チュートリアル を参考にしつつ実装しました
  • インストール後、settings.json に以下の設定が必要です

    // erd と dot コマンドへのパス。Windows の場合はC:\\Users ... というような形
    "erd-preview.erdPath": "...",
    "erd-preview.dotPath": "...",
    

最後に

  • まだまだ改善点が目立ちますが、とりあえずラフな設計ができるようになって幸せになりました :sparkles:
  • 自作ツールを使ってモデル設計をした後に rails-erd で現状のコードで図を記述するという使い方をしています
  • この記事によって他の方にも使っていただけると幸いです
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした