mermaidを使ってMarkdownで図を書く

mermaidとは

mermaid(Github)
mermaidはフローチャートやシーケンス図、ガントチャートなどのUMLが描けるJSライブラリです。
Markdownでドキュメント作成する際にmermaidを使用すると、ExcelやVisioなど修正が煩わしいアプリを遠ざけることができます。
大変捗りますので記法をご紹介します。

環境

VScodeを使っている方は[Markdown Preview Mermaid Support]プラグインを導入すればプレビューで表示できるようになります。
筆者は気軽に書き始められるのでオンラインエディタの「HackMD」を使うことが多いです。その他、mermaid.jsを読み込めばHTMLでも描画可能です。

フローチャート

記述例

graph LR;
   A-.->B;
   A-->C;
   B-.->D;
   C-->D;

シーケンス図

 記述例

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!

ガントチャート

記述例

gantt
title Adding GANTT diagram to mermaid
dateFormat  YYYY-MM-DD
section A section
Completed task            :done,    des1, 2019-12-10,2019-12-11
Active task               :active,  des2, 2019-12-11, 14d
Future task               :         des3, after des2, 1d

上記の記法を知ってから、
個人メモ・アジェンダ・議事録とほぼすべてのドキュメントで
Markdownを使うようになりました。

テキストなので会議中に会話しながら修正できるし、
なんならバージョン管理も容易です。

小規模なチームでの情報共有や意識合わせにいかがでしょうか。