Notion や GitHub の Markdown でも対応されている Mermaid について、紹介します。
Mermaid は UML を描画するためのツールで、同じようなツールとして、PlantUML があります。ゴリゴリ書くなら PlantUML の方が機能も豊富でリッチなことができるのですが、こちらは実行環境として Java が必要であるため、少々構築が面倒だったりします。そのため お手軽にちょっとした UML を書くだけ であれば、 Mermaid の方が良かったりします。
ちなみに 2022年2月時点 の Qiita では PlantUML は対応されていますが、Mermaid は未対応のようです。
→対応されたようです。
https://qiita.com/release-notes#2022-03-28
簡単に２つの違いになります。
| Mermaid | PlantUML | |
|---|---|---|
| 実行環境 | Javascript | Java + Graphviz |
| 対応するダイアグラム | Flowchart / Sequence diagram / Gantt diagram / Class diagram / Git graph / Entity Relationship Diagram / User Journey Diagram | Sequence diagram / Usecase diagram / Class diagram / Object diagram / Activity diagram (here is the legacy syntax) / Component diagram / Deployment diagram / State diagram / Timing diagram / JSON data / YAML data / Network diagram (nwdiag) / Wireframe graphical interface (salt) / Archimate diagram / Specification and Description Language (SDL) / Ditaa diagram / Gantt diagram / MindMap diagram / Work Breakdown Structure diagram (WBS) / Mathematic with AsciiMath or JLaTeXMath notation / Entity Relationship diagram (IE/ER) |
| 公式サイト | https://mermaid-js.github.io/mermaid/ | https://plantuml.com/ |
| オンラインエディタ | こちら>> | こちら>> |
フローチャート
個人的に見やすい書き方で書いてみます。構成は大きく以下になります。
- 宣言（まずはノードを並べる）
- リレーション（並べてたノードを矢印で繋げる）
- スタイル（ノードに色を付けたり線を太くしたり）
graph TD %% トップダウン（上から下に描画する）
%% 宣言
A[クリスマス]
B[買い物に行く]
C{プレゼントの選択肢}
D[ノートパソコン]
E[iPhone]
F[車]
%% リレーション
A --> B
B --> C
C --> D
C --> E
C --> F
%% スタイル
style C fill:#f9f,stroke:#333,stroke-width:4px
感想
フローチャート と シーケンス図 をサクッと書きたいときだけかな。Mermaid の使い所としては。現時点では。
Mermaid の チートシート も参考までに。