チェンジビジョン藤元です。
今回は、僕が作成したVSCodeとChrome拡張「Mermaid Graphical Editor」が新たにER図に対応したので、mermaid で ER図を描くオススメポイントと「Mermaid Graphical Editor」での簡単な描き方をお伝えします。
(※ Mermaidの記法に関する記事ではありません)
「Mermaid Graphical Editor」で ER図 を気軽に描こう！
ポイント①「 気軽にサッと描ける」
mermaid の ER図 はシンプルな書式であるため、mermaid コードのままでも 気軽に編集できます。
また、「Mermaid Graphical Editor」を使用することで、修正したい箇所をダイレクトに修正することができるので、より気軽に ER図 を書くことができると思います。
ポイント②「 GithubのREADME.mdやIssueで共有しよう！」
Githubでは正式に mermaid がサポートされているため、 mermaid コードブロックは図として描画されて表示されます。ER図 のようなデータ定義は設計検討の際に重宝しますので、README.md や Issueの概要に ポンッ とおいてあるだけで助かる場面があると思います。
また、ER図 を 変更する際も（画像として貼り付けている場合と異なり）図の元データを探す必要がなくそのまま修正なり複製なりしながら議論できるのはとてもメリットがあると感じています。
「Mermaid Graphical Editor」でER図を楽しく描く！
手順０：ER図を描き始める準備
まずはインストール。
（VSCode版の場合)
- Markdownファイル(.md)にMermaidコードブロックを作成します（①）
- 作成したコードブロック上部に「MermaidEditor」と表示されるので、これをクリックします（②）
- エディタビューより「ER」をクリックします（③）
（Chrome版の場合 )
- 拡張機能を呼び出します（①）
- エディタビューより「ER」をクリックします（②）
手順１：エンティティを作成する
- メインメニューより「エンティティ」ボタンをクリックします（①）
- 必要に応じて関連の種類を選択します（②）
- エンティティを追加したい場所をクリックします（③）
作成後、続けてエンティティ名編集モードになるので、入力後、Enterキーで決定します
※ER図では改行が使用不可なので注意
また、作成したエンティティは選択状態すると以下のような関連する操作を行うことができます。
- エンティティ名の変更（①）
- フィールドの追加／変更／削除（②）
※フィールドの削除はフィールド全体の編集（フィールドの一番右のアイコン）で全体を空欄にします - エンティティの削除（③）
※クラス図の場合と異なり、エンティティ選択モードでの関連作成は未対応となっています
手順２：関連を追加する
- メインメニューより「関連」ボタンをクリックします（①）
- 作成したい関連の種類を選択します（②）
- 関連の元となるエンティティをクリックします（③）
- 関連の先となるエンティティをクリックします（④）
また、関連については、以下の操作を行えます。
- ラベルの変更（①）
- 関連の削除（②）
- 関連の種類の変更（③）
手順３：フィールド、関連のラベルを編集する
- メインメニューより「テキスト編集」ボタンをクリックします（①）
- 編集したいエンティティ、および関連のエディットポイントをクリックします（②）
編集モードになるので、入力後、Enterキーで決定します
※ER図では改行が使用不可なので注意
※フィールドの削除はフィールド全体の編集（フィールドの一番右のアイコン）で全体を空欄にします
手順４：削除する
- メインメニューより「削除」ボタンをクリックします（①）
- 削除したいエンティティ、および関連のエディットポイントをクリックします（②）
手順５：関連の種類を変更する
- メインメニューより「関連」ボタンをクリックします（①）
- 「置き換えモード」ボタンをクリックします（②）
- 種類の変更を反映する関連のエディットポイントをクリックします（③）
その他の操作（編集終了、ビューの縮小表示、イメージコピー）はフローチャートと同じです。
- 編集終了する場合はエディタビューを閉じます（①）
- 右下のスライドバーでエディタビューの縮尺を変更できます（②）
- 「図のコピー」ボタン（③）をクリックするとPNGイメージがクリップボードにコピーされるので、任意の場所にペーストして使用してください
※macの場合は動作しないので注意（Safariでの方法をよくわかっていない…）
”より快適にER図”を作成したいなら [モデリングツール] が便利
手軽に”サッ”とER図を書きたい場合はMermaidは非常に便利だと思うのですが、より快適にER図を作成したい場合は、モデリングツールを使用した方が楽しく作業できます。
弊社製品の astah* professional ではUMLだけではなくER図も手軽に素早く作成することができますので、ご活用いただければ幸いです。無償で20日間評価できます。
astah in 5 min 