ERD(Entity Relationship Diagram)を記述するための erd-go と周辺ツールを作りました
ERD(Entity Relationship Diagram) って何?
- 日本語訳だと 実体関連図(wikipedia)
- エンティティ同士の1対多や多対多などの関連性を俯瞰することができます
どういうもの?
とりあえずデモをご覧くださいませ。
erd-go + graphviz-dot.js + vscode プラグインの ERD Preview の組み合わせで実現しています
書き方
# 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対多) や *--*
(多対多) と記載することで、テーブル同士を関連付けることができます
作った動機
# 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つあります
- WEB システム設計時のモデル設計を楽にしたい
- 大体 WEB システムを実装する時にはモデルの関連設計をすると思います
- Twitter っぽいものを作る場合には、「User が複数の Tweet を持っていて、Tweet は返信機能があるから Reply というテーブルがあって ...」 といったようなお話
- また、既存のモデルから ER図を起こすツールというのは存在しています ( rails-erd etc)
- ですが、実装を始める前の設計段階のツールはあるにしてもコレジャナイ感はありました
- そこで「初期設計時にラフに1対多や多対多を設計するにはどうしたもんかな? 」と悩んだ結果作ることにしました
- 大体 WEB システムを実装する時にはモデルの関連設計をすると思います
- BurntSushi さんが作った erd というツールを改善したい
- お手軽さを重視したい
- インストールは不要にして、シングルバイナリで使いたい
- erd コマンド自体を OS 問わずにマルチプラットフォームで使いたい
- Windows/Mac/Linux で使いたかったためです
- Windows/Mac は執筆するために利用
- また、Jenkins で定期的に図を生成したいので Linux にも対応した方がいいと考えたためです
- 1対他の表現をもう少し分かりやすくしたい
- 単なるスタイル調整ですが、重視したいと思った次第です
- お手軽さを重視したい
各種ツールで使っている技術
erd-go
- GO言語
- pointlander/peg
ここでは入力された構文を 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": "...",
最後に
- まだまだ改善点が目立ちますが、とりあえずラフな設計ができるようになって幸せになりました
- 自作ツールを使ってモデル設計をした後に rails-erd で現状のコードで図を記述するという使い方をしています
- この記事によって他の方にも使っていただけると幸いです
Author And Source
この問題について(ERD(Entity Relationship Diagram)を記述するための erd-go と周辺ツールを作りました), 我々は、より多くの情報をここで見つけました https://qiita.com/kaishuu0123/items/9f52fa3ab1ea31132993著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .