ER図をマウスを使わないで書きたいし、その内容をGitLabで管理もしたい

# はじめに

ものぐさなもので、巷にあるマウス操作で図を作るようなツールは、面倒だと感じてしまう（miloとか、そういうの）。加えて社内ではGitLabを使っているので、gitでその内容を管理できれば尚よろしい。
ということでいろいろ調べたのを、まとめてみる。

> (2022/9/13追記) 
どうやらこの、GitLabでmermaidが反映しないというのは、mermaidのバージョンが古めであることが原因である可能性が高そう。mermaid 12.5.0以上であれば、ER図もうまく反映できる可能性が高いが、まだ試せてない。

## この記事で分かること
- markdown系の記法で、ER図などのダイアグラムを描けるオンラインツールについて

## この記事で分からないこと
- mermaidなどの具体的な記法

# いろいろあるER図を描く方法

さて、少し調べてみると、ER図はなにもマウスでぽちぽち作るものだけでないと知る。下の記事によると、例えば以下のようなツールがあるらしい。
- Draw.io
- PlantUML
- Mermaid

https://qiita.com/ryamate/items/3779418172c4f5a83212

## GitLabで公式にサポートしているのは、mermaid, PlantUML, Kroki

MermaidとPlantUML、加えてKrokiというツールであれば、GitLabでもサポートしてる。[^1]特に、Mermaidは、管理者の設定も不要で使えるらしい[^2]ので、さっそくmermaidを試してみることにした！

https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts

# mermaidの話

まずはローカル環境でmermaidを使ってみる。例えば、vsCodeでは、プラグインをいれてあげる必要がある。

https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid

あとは、` ```mermaid `と` ``` `で囲ってあげると、こんな感じでER図ができる。QiitaやNotionでも使えるそうで、手軽な感じがよい。

```mermaid
erDiagram     
CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        string name
        string custNumber
        string sector
    }
    ORDER ||--|{ LINE-ITEM : contains
    ORDER {
        int orderNumber
        string deliveryAddress
    }
    LINE-ITEM {
        string productCode
        int quantity
        float pricePerUnit
    }
```

上記の図は、以下のコード（をコメントアウトしたもの）から自動で生成されている。結構シンプルなシンタックスで、分かりやすい。

```
// ```mermaid
erDiagram     
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        string name
        string custNumber
        string sector
    }
    ORDER ||--|{ LINE-ITEM : contains
    ORDER {
        int orderNumber
        string deliveryAddress
    }
    LINE-ITEM {
        string productCode
        int quantity
        float pricePerUnit
    }
// ```
```

# mermaidを使ってER図がうまく反映できない＠GitLab

ところがどっこい、なぜだか弊社サーバー上[^3]で動いているGitLab上でだけ、エラーが表示されて何も映らないのだ。ER図、それにクラス図もたまにダメ。vsCodeでは、あんなに美しく簡単に描画されたのに、GitLabだけダメ。

ひと通り調べてみたけれども、mermaidのバージョンの問題らしく[^4]、諦めて他の方法を探すことにした。（管理側でアップデートをする等で解決する可能性もあるが、今回はこの状態でどうにかする！アップデートできない！という人のための記事、ということにしておく）

いでよmarkdownとかでER図がかけるやつ、なんか他の方法！で、それっぽくGitLabでも管理できそうなやつ！

# 日々愛用、online editor!

ということで、最終的に行き着いたのは、online editorを使うことでした。以下のURLから飛ぶと、上記のCUSTOMER, ORDER, LINE-ITEMのER図が見られる。

https://mermaid-js.github.io/mermaid-live-editor/edit#pako:eNp1kc9uwjAMxl8l8pm-QG8T9IA0YOLPrRcvMSxamxTHmVS1vPvStROwaj4ksfNZP-dLB9obghyIVxYvjLUaonTDujwdjrtNsVd9n2W-U7v9KiW5airUFP5oujEfIghbd1EOa5oVdQyyjfU78ewqkBY_lW_jNhIHfN-p1_W2yNbHYpNG0N4JWhceZQ8TWCfKsyH-B2Wosl_E7YsxTCE8Me-Y-ZMa9iZqWSbPnmHXiE6stPfqufIoqcFqeiM-OSsTBRZQE9doTbL9B1GCfFDyCvJ0NMifJZRu0MXGoFBhbPIF8jNWgRaAUfyhdRpy4Ui_oun3JtXtG3n_kgI

ついでに、URL形式の画像[^5]も生成される。
![Screenshot 2022-09-12 093638.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782225/47cf15a2-cf2a-cfee-1370-bb4bc9462013.gif)

で、コピーされたリンクを張り付けると、以下のように表示される。

[![](https://mermaid.ink/img/pako:eNp1kc9uwjAMxl8l8pm-QG8T9IA0YOLPrRcvMSxamxTHmVS1vPvStROwaj4ksfNZP-dLB9obghyIVxYvjLUaonTDujwdjrtNsVd9n2W-U7v9KiW5airUFP5oujEfIghbd1EOa5oVdQyyjfU78ewqkBY_lW_jNhIHfN-p1_W2yNbHYpNG0N4JWhceZQ8TWCfKsyH-B2Wosl_E7YsxTCE8Me-Y-ZMa9iZqWSbPnmHXiE6stPfqufIoqcFqeiM-OSsTBRZQE9doTbL9B1GCfFDyCvJ0NMifJZRu0MXGoFBhbPIF8jNWgRaAUfyhdRpy4Ui_oun3JtXtG3n_kgI)](https://mermaid-js.github.io/mermaid-live-editor/edit#pako:eNp1kc9uwjAMxl8l8pm-QG8T9IA0YOLPrRcvMSxamxTHmVS1vPvStROwaj4ksfNZP-dLB9obghyIVxYvjLUaonTDujwdjrtNsVd9n2W-U7v9KiW5airUFP5oujEfIghbd1EOa5oVdQyyjfU78ewqkBY_lW_jNhIHfN-p1_W2yNbHYpNG0N4JWhceZQ8TWCfKsyH-B2Wosl_E7YsxTCE8Me-Y-ZMa9iZqWSbPnmHXiE6stPfqufIoqcFqeiM-OSsTBRZQE9doTbL9B1GCfFDyCvJ0NMifJZRu0MXGoFBhbPIF8jNWgRaAUfyhdRpy4Ui_oun3JtXtG3n_kgI)

このオンラインエディターで吐き出される画像データを張り付けておくことで、一旦それらしい形になったのではと思っている。コードに関しては、リンク先のオンラインエディタ上で見られるし。

但し、少しでも情報が更新されたら、都度URLを張り直す手間はあるのでご注意を。前後にあるコードブロックを表す表記（` ```mermaid `）をコメントアウトしておけば、GitLab上の`.md`ファイルでも問題はない（が、管理がめんどくさくなるのでこの辺りは考える余地あり...)

# おまけ

mermaidの表記法は、ここら辺がざっくり分かってよい。

https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram

詳細はこの辺りを見てみるといいかも。でも、ER図はextension扱いなのか、このドキュメント内に説明がない...ので、以下は代わりのクラス図の説明。いろいろできることがあるのだと分かる。

https://github.com/mermaidjs/mermaidjs.github.io/blob/master/classDiagram.md

ということで、ER図の他にもいろいろ描ける、そう、mermaidとならね。フローチャートに、シークエンスダイアグラム、なんならガントチャートだって守備範囲！

https://techceed-inc.com/engineer_blog/3286/

[^1]: [Diagrams and flowcharts](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts)
[^2]: 逆に言えば、PlantUMLとKrokiは、管理者の設定が必要。（例: [PlantUMLの設定](https://docs.gitlab.com/ee/administration/integration/plantuml.html))
[^3]: 厳密にいえば、旧弊社。その昔（2022年6月まで）この世には新和コンピューターサービスという会社があったとさ。
[^4]: https://gitlab.com/gitlab-org/gitlab/-/issues/36082
[^5]: ~~URIと呼ばれるものでしたっけ、こういうの（勉強不足）~~ 違いましたね、dataURLです(2022/9/15追記)