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

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

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

mermaidの話

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

あとは、```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を使ってER図がうまく反映できない＠GitLab

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

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

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

日々愛用、online editor!

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

ついでに、URL形式の画像⁵も生成される。

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

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

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

おまけ

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

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

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

1. Diagrams and flowcharts ↩

2. 逆に言えば、PlantUMLとKrokiは、管理者の設定が必要。（例: PlantUMLの設定) ↩

3. 厳密にいえば、旧弊社。その昔（2022年6月まで）この世には新和コンピューターサービスという会社があったとさ。 ↩

4. https://gitlab.com/gitlab-org/gitlab/-/issues/36082 ↩

5. URIと呼ばれるものでしたっけ、こういうの（勉強不足） 違いましたね、dataURLです(2022/9/15追記) ↩