はじめに
フロー図やシーケンス図を書くとき、皆さんはどんなツールを使っていますか？
私は draw.io（diagrams.net） を愛用してきました。
- ブラウザだけで使える
- 操作が直感的
- 図としての表現力が高い
一方で最近、
- AIに設計を読ませたい
- Git管理できる形で図を書きたい
- レビュー時に差分が見たい
と思うことが増え、Markdownで書ける図表に興味を持ち始めました。
そこで学び始めたのが Mermaid です。
この記事では、Mermaid学習初心者の私が基本中の基本として覚えておきたいことを、以下の流れでまとめます。
-
レイアウトの方向
-
箱の形
- 線の種類
-
見た目の調整
-
Mermaid → draw.io への書き出し
Mermaidとは？
Mermaidは、テキスト（Markdown）から図を生成する記法・ツールです。
graph TD
A --> B
このように、コードとして図を書けるのが最大の特徴です。
Mermaidのメリットをまとめると以下の通りです。
- Gitで管理しやすい
- 差分が見える
- AIが構造を理解しやすい
- Markdown対応ツール（VScode, GitHub, Notion など）でそのまま表示できる
1. レイアウトの方向
Mermaid では、冒頭でレイアウト方向を指定して意図した方向の図を作成できます。
フロー図は上から下へ、シーケンス図は左から右へ、といった具合に指定します。
graph TD
A --> B
graph LR
A --> B
指定できる方向
| 記法 | 方向 |
|
TD（Top → Down）
|
上から下に流れる（フロー図で最も一般的） |
| BT（Bottom → Top） | 下から上に流れる |
| LR（Left → Right） | 左から右に流れる（データフローや依存関係の可視化に良い） |
| RL（Right → Left） | 右から左に流れる |
TD (Top-Down)
LR(Left-Right)
2. 箱の形（ノードの基本）
Mermaidでは「箱（ノード）」は記号で形を指定します。
graph TD
A[四角]
B(角丸)
C((円))
D{ひし形}
E[\平行四辺形\]
F[/台形\]
| 記法 | 形 |
|
[ ]
|
四角 |
| ( ) | 角丸 |
| (( )) | 丸 |
| { } | ひし形（条件分岐） |
| [/ /] | 平行四辺形 |
| [/ \] | 台形 |
3. 線の種類
次に重要なのが「線」です。基本の矢印は「-->」で表現します。
graph TD
A --> B
C --- D
E -.-> F
G ==> H
I ~~~ J
| 記法 | 形 |
|
-->
|
通常の矢印 |
| --- | 直線 |
| -.- | 点線矢印 |
| ==> | 太線→ |
| ~~~ | 線無し（位置揃え） |
ラベル付きの線を表現する場合は「|〇〇|」を使用します。
graph TD
A -->|成功| B
A -->|失敗| C
4. 見た目の調整
classDef を使うと見た目を整えられます。
例えば、APIは青系、DBは緑系と変えておくと読みやすくなります。
graph LR
A[API]
B[ Sample ]
C[(DB)]
B --> A
A --> B
B --> C
C --> B
classDef api fill:#E3F2FD,stroke:#2196F3,stroke-width:2px
classDef db fill:#E8F5E9,stroke:#4CAF50,stroke-width:2px
class A api
class B dbclassB
class B db
5. Mermaid → draw.io への書き出し
説明や提出用に図を整えたい時に「draw.ioで微調整したい」というケースもあります。
そんな時はdraw.ioにインポートできます。
手順はこちらです。
-
Mermaidコードをコピー
-
draw.ioを開く
- ［配置］＞［挿入］＞［Mermaid...］を選択する
- 1でコピーしたコードを張り付ける
-
［挿入］を押す
Mermaidの構造情報は失われるので、Mermaidに逆戻りはできません。
レイアウトの微調整や注釈追加は draw.io 側で自由に可能です。
おわりに
Mermaidは一見とっつきにくそうですが、
- 図の方向（TD / LR）
- 箱（ノード）
- 線（エッジ）
このあたりを押さえるだけで、十分に使えます。
設計はMermaid、説明や資料はdraw.io という使い分けもおすすめです！
