Markdownで図表を綺麗に書く方法

対象読者と実行環境

  • 対象読者：Markdown初級〜中級者、図表（特にフローチャートや関係図）を綺麗に描きたい人
  • 想定環境：
    • Markdown対応エディタ（Typora、Visual Studio Code + Mermaid Preview 拡張など）
    • GitHubやObsidian、DocsifyなどのMermaid対応ビューア

1. Mermaidとは何か？

Mermaidは、Markdown内でフローチャート、シーケンス図、ガントチャート、クラス図などを簡潔な記法で描画できるツールです。

flowchart TD
  A[開始] --> B{条件分岐}
  B -- はい --> C[処理1]
  B -- いいえ --> D[処理2]
  C --> E[終了]
  D --> E

対応ビューアでは自動で図が生成されます。

2. Mermaidの基本構文

2.1 フローチャート

flowchart LR
  A[入力] --> B[処理] --> C[出力]

2.2 シーケンス図

sequenceDiagram
  participant ユーザー
  participant サーバー
  ユーザー->>サーバー: リクエスト
  サーバー-->>ユーザー: レスポンス

2.3 ガントチャート

gantt
  dateFormat  YYYY-MM-DD
  title プロジェクトスケジュール
  section 開発
  設計        :a1, 2024-05-01, 5d
  実装        :after a1, 10d
  テスト      :2024-05-20, 5d

3. Mermaid記法を綺麗に整えるコツ

3.1 ノードのラベルを簡潔にする

  • 長すぎると読みにくくなる

3.2 ノード配置を意識する

  • flowchart TD（縦）、LR（横）などレイアウト方向を選ぶことで見やすくなる

3.3 必要ならサブグラフで整理

flowchart TD
  subgraph フローA
    A1 --> A2
  end
  subgraph フローB
    B1 --> B2
  end
  A2 --> B1

4. Mermaidに対応したエディタとツール

ツール/エディタ Mermaid対応 備考
VSCode + Mermaid拡張 ○ リアルタイムプレビュー可能
Obsidian ○ 標準でMermaid対応
Docsify + plugin ○ Webサイトでも描画可能
Typora △（一部） バージョンや設定により異なる
GitHub ○ Mermaid記法の直接埋め込みに対応

5. Mermaidの制限と注意点

  • 大規模な図は視認性が下がるため分割推奨
  • Markdownビューアごとに描画の差異がある
  • 古いビューアはMermaid未対応のこともある

まとめ

  • Mermaidを使えば、Markdownでも綺麗な図表が書ける
  • フローチャート、シーケンス図、ガントチャートなどが簡単に描ける
  • VSCodeやObsidianなどの環境で効率よく可視化

Markdownでの文書管理に図解を加えると、情報の伝達力が大きく向上します。Mermaidを活用して、読みやすく美しい技術資料を書きましょう。