はじめに
最近開発チームで連携するようの資料をいざ書こうとしたときに、Mermaidをちょこちょこ調べながら書きました。そのとき調べたら「ワンランク上のMermaidの書き方」をまとめます。
Mermaidとは
Mermaidは代表的なUMLの一つです。
基本の書き方はMermaid公式を参照していただくとして、描けるグラフの種類は以下のようなものがあります。
- フローチャート図
- シーケンス図
- クラス図
- 状態遷移図
- ER図
- カスタマージャーニーマップ
- ガントチャート
- 円グラフ
- 要求図（要件図）
- Gitグラフ
また、公式で最新バージョンの書き方に対応したライブエディターが提供されているので、以下のように図と併せて生成リンクもセットで書いておくと誰でも簡単に続きから編集できます。
ワンランク上の書き方
この記事では最近扱ったフローチャートとガントチャートで、こんな書き方あるのかと思ったものを列挙していきます。
1.コメントアウト
%%でコメントアウトが出来ます。これは全ての種類で共通する書き方です。
graph LR;
A-->B;
A-->C;
B-->D;
%% C-->D; ←これ
2.括弧を使う
フローチャートでステップの名前を設定するには、いくつか方法があります。
-
ステップ1やC、Dのように最初に定義して、その後も同じ名前を使う -
B[ステップ2]のように内部定義名と表示名を[]を用いてセットで定義し、その後内部定義名を使う
ここで、括弧を表示名に用いたい場合はD["ステップ3(D)"]のようにダブルクォーテーションで括ります。
graph LR;
C[ステップ3]
ステップ1-->B[ステップ2];
ステップ1-->C;
B-->D["ステップ4(D)"];
C-->D;
3.リンクを張る
clickを使うとステップにリンクを張ることができます。これは使っていて意外と便利です。
graph LR;
A[Youtube]
click A "https://youtube.com"
A-->B;
A-->C;
B-->D;
C-->D;
4.色を付ける
グラフの装飾は２種類紹介します。
フローチャート
フローチャートでは以下のような書き方で、ステップの色、文字色、線の太さetc...を指定したクラスを作り、それを割り当てることができます。
graph LR;
classDef red fill:#ed2633,stroke:#000,stroke-width:2px,color:#fff
A:::red
A-->B;
A-->C;
B-->D;
C-->D;
ガントチャート
ガントチャートでは、crit(多分criticalの意)を付けることでステップを真っ赤にして強調することができます。
まとめ
初期の導入コストは少しあるものの、簡単な資料をつくるときはいわゆるパ○ポでデザインや図形の大きさ、配置を揃えたりするくらいならUMLのほうが早くデザインを統一して作図したり修正もしやすくなります。
正直エンジニアに限らず全人類まとめ資料とか作るのにUMLを活用したほうがいいと思います。（偏った思想）
GitグラフもどんどんMermaidで描きたい…