1. Mermaid とは？
Mermaid とは、テキスト（コード）で図を記述できる DSL（ドメイン特化言語）です。
フローチャート、シーケンス図、システム構成図などを、コードのように書いて生成できます。
👉 一言で言うと：
「図をコードとして管理できる仕組み」
Mermaid を使うメリット
- テキストなので Git で管理しやすい
- 修正・再利用が簡単
- AI で自動生成しやすい
- 図の構造が明確になる
2. Mermaid の基本構文（例）
フローチャートの例
構文の説明
-
flowchart TD-
flowchart：フローチャート -
TD：上から下（Top → Down）
-
-
-->：矢印 -
[]：通常の処理ノード -
{}：条件分岐ノード
3. なぜ draw.io に取り込むのか？
Mermaid は非常に便利ですが、以下のような制約があります。
| Mermaid | draw.io |
|---|---|
| コード編集のみ | ドラッグ操作可能 |
| デザイン調整が限定的 | デザイン自由度が高い |
| 非エンジニアにはやや難しい | 誰でも編集可能 |
👉 そのため、以下の使い分けが最適です。
Mermaid で素早く作成 → draw.io で仕上げる
4. Mermaid を draw.io に導入する方法
draw.io（diagrams.net）は Mermaid を標準サポートしています。
手順
- 以下のサイトを開く
👉 https://app.diagrams.net/ - メニューから
Insert → Advanced → Mermaid を選択 - Mermaid のコードを貼り付ける
- Insert をクリック
==> Mermaid が draw.io の図形として自動変換されます。
なお、draw.io への取り込み方法によって、
後からどこまで編集できるかが大きく変わる点には注意が必要です。
5. 導入後の注意点（重要）
画像としてのインポートと diagram としてのインポートの違うことは紹介させます。
5.1 画像（Image）として取り込む場合
例：
- それを draw.io に貼り付ける
特徴： - 図全体が 1つの画像オブジェクト
- ノード・矢印単位では編集不可
- draw.io 側ではレイアウト調整不可
ただし重要： - Mermaid コードを修正 → 再生成すれば、図全体は更新可能
つまり： - コードが Single Source of Truth
- draw.io は閲覧・配置のみ
5.2 diagram（図形要素）として取り込む場合
（Insert → Advanced → Mermaid）
特徴：
- ノード・矢印が 個別の図形オブジェクト
- 色・位置・サイズなどを自由に編集可能
- 非エンジニアでも扱いやすい
注意点： - Mermaid コードとの対応は失われる
- 後からコード修正しても反映不可
- diagram → Mermaid の逆変換は不可
見た目は同じでも、内部構造はまったく別物である。
6. Mermaid と draw.io の使い分け指針
Mermaid が向いている場面
- 技術設計の初期段階
- システム構成のラフ
- Git 管理したい設計資料
- AI に図を生成させたい場合
draw.io が向いている場面
- レビュー・共有用の最終資料
- 非エンジニアとの協業
- プレゼン・提出用資料
7. まとめ
Mermaid は「設計言語」、draw.io は「表現ツール」と考えると理解しやすい。
Mermaid は 「速く・再利用しやすく・構造重視」
draw.io は 「見やすく・調整しやすく・共有向き」
両者を組み合わせることで、
スピードと品質を両立した図作成が可能になります。