はじめに

こんにちは。
システム設計やフローの整理において、フローチャートや状態遷移など、ダイアグラムを描く機会がありますよね。
みなさん、これらを書く時ってDraw.io やFigmaで、ちまちまアレコレ書いてませんか？
矢印や全体のレイアウトなど、簡単な図を書きたいのに、細かい調整が必要で面倒で苦労した記憶があります。

今回は、ダイアログを『自分で頑張って書く』のではなく、Mermaidと生成系AIを用いて、楽に書いてみましょう。

Mermaidとは？

いくつかMarkdownでダイアグラムを書く方法はあるのですが、今回はMermaid を紹介します。

正確には、JSをベースにしたライブラリなのですが、ここではMarkdown記法の一つとさせてください。

類似のサービスで、PlantUML もいい感じにダイアグラムを書けるのですが、
Mermaidは、QiitaやGitHubのサービスなどでもレンダリング可能なため、こちらを紹介したいと思いました。

例えば、About Mermaidで紹介されている下記のダイアグラムを書いてみましょう。

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop HealthCheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

下記のようにレンダリングされます。

シーケンス図に限らず、Mermaidはダイアグラム全般を手広くカバーしています。
先述のMermaidの公式を参考にしてもいいですし、Qiita公式の記事もあります。

生成系AIを活用する

生成系AIは、イメージやテキストベースの説明は得意だと思うのですが、ダイアグラムの描画はまだ弱く、直接ビジネスに活用することは難しいと思っています。※ 自論です
一方で、Mermaid記法のテキストを経由することで、綺麗にダイアグラムを作成できます。

ためしにChatGPT 4oで、OAuthのシーケンス図を出力して見ましょう。
まずは画像で出力してみます。

プレゼンなどでのイメージ図としては有用ですが、ドキュメントに用いるには大味な感じがしますね。

次に、Mermaid記法で出力してみました。

これを描画すると、、、

めちゃくちゃいい感じです。
もし気になる部分が書き変える程度で済みそうですし、ドキュメント作業にも活用できるレベルだと思います。

Mermaid Live Editor

手軽にMermaidを使うには、「Mermaid Live Editor」がオススメです。
URLでのシェアや、PNG等への出力、サンプルがあり、充実しています。

VScodeで使うには

私は、一般的なMarkdownプラグインである下記を活用しています。

こちらもいい感じに描画できます！

最後に

私自身、過去にdraw.ioなどで頑張ってダイアグラムを書いていたのですが、細かいレイアウトの調整や、テキスト追加時の余白の調整などでかなり苦労しました。
細かく書くことは悪ではないのですが、少しの追記でレイアウトがズレまくるなど、ドキュメンテーションの本質ではないものに時間が割かれるのも考え物です。

同僚のYさんと PlantUMLについて話していて、諸々模索した結果、Mermaidめっちゃいいじゃんになり、布教したくなってこの記事に至ります。

これからみなさんがダイアグラムを書かなければいけない時に、Mermaidが選択肢に入ると幸いです！
よい Mermaid ライフを！