【AI時代の図形】汎用ダイアグラム6選 — Mermaid・D2・PlantUML・Graphviz・Nomnoml・Pikchr徹底比較

当サイトを閲覧いただきありがとうございます。本記事はAI時代にコード管理できる図形シリーズの第1回として、汎用ダイアグラム6種を比較解説します。シリーズ全体の一覧は完全ガイドをご覧ください。

フローチャートやシーケンス図、ER図など、開発中に「ちょっと図を描きたい」という場面は多いと思います。こうした図をPowerPointやdraw.ioで手描きする代わりに、テキスト（コード）で書いて自動生成するのが今の主流です。テキストなのでAIに生成を依頼でき、変更箇所も一目で分かり、Gitでバージョン管理もできます。

なぜ今このアプローチが重要かというと、AIコーディングアシスタント（GitHub Copilot、Cursor、Claude Code等）が普及したことで、図のコードを自然言語から自動生成するワークフローが現実的になったからです。PowerPointで30分かけていた図が、AIへの一言で10秒で出てくる。しかもテキストだから差分レビューもでき、設計変更に追従させるのも楽です。今後AIツールがさらに進化すれば、ドキュメント更新と同時に図が自動で最新化されるような運用も当たり前になっていくでしょう。

正直ツールが多すぎてどれを使えばいいか迷うと思いますが、まずはこの6つを押さえておけば大半のケースはカバーできます。

6種比較表

Mermaid — GitHub標準搭載、AI生成にも向いている

Mermaidは2014年にKnut Sveidqvistによって開発が始まった、JavaScript製のダイアグラム描画ライブラリです。最大の特徴は、GitHubのMarkdownで ```mermaid と書くだけで図が描画される点です。Notion、Obsidian、Docusaurus、Astroなど主要なドキュメントツールでも広くサポートされています。

サンプル：フローチャート

flowchart TD
    A[ユーザーがログイン] --> B{認証成功?}
    B -->|Yes| C[ダッシュボード表示]
    B -->|No| D[エラーメッセージ表示]
    D --> A
    C --> E[データ取得]
    E --> F[画面描画完了]

flowchart TD は上から下へ流れるフローチャートを意味します。--> で矢印を引き、{} で条件分岐のひし形、[] で四角形のノードを定義します。

サンプル：シーケンス図

sequenceDiagram
    participant U as ユーザー
    participant F as フロントエンド
    participant A as APIサーバー
    participant D as データベース

    U->>F: ログインボタン押下
    F->>A: POST /api/login
    A->>D: SELECT * FROM users
    D-->>A: ユーザー情報
    A-->>F: JWT トークン
    F-->>U: ダッシュボード表示

サンプル：ER図

erDiagram
    USERS ||--o{ POSTS : "has many"
    USERS ||--o{ COMMENTS : "has many"
    POSTS ||--o{ COMMENTS : "has many"
    POSTS }o--|| CATEGORIES : "belongs to"

    USERS {
        int id PK
        string name
        string email
        datetime created_at
    }

メリット・デメリット

対応ツールの広さが大きな強みです。GitHub、GitLab、Notion、Obsidian、Confluence、VS Codeなど主要ツールがネイティブサポートしていて、構文も直感的です。対応する図の種類もフローチャート、シーケンス図、ER図、クラス図、ガントチャート、マインドマップなど10種類以上あります。

その代わり、レイアウトの細かい制御は苦手です。ノードの配置を自分で決めることはできず、自動レイアウトに委ねるしかありません。ノード数が20〜30を超えてくると図がごちゃついてきて、コード自体の可読性も落ちてきます。

AIとの相性

AIとの相性で言えば、Mermaidが間違いなくトップクラスです。GitHubのREADMEに大量に使われているおかげで学習データが豊富なのでしょう、「ユーザー登録のフローチャートを描いて」と雑に投げるだけでそのまま動くコードが返ってきます。

私がこのシリーズの記事を書く際にもMermaidのサンプルコードはAIに下書きさせましたが、構文エラーが出たのは1回もありませんでした。AIに図を描かせたいなら、まずMermaidを試すのが一番確実です。

D2 — 見た目がきれいなモダン系

D2はTerrastruct社が2022年にリリースした比較的新しいダイアグラム記述言語です。図の種類ごとに書き方を変える必要がなく、1つの統一された書き方でフローチャートもシーケンス図も描けるのが最大の特徴です。何も設定しなくても見た目がきれいに出力され、レイアウトエンジンも3種類（dagre、ELK、TALA（有料））から選べます。

サンプル：ネストされたアーキテクチャ図

aws: AWS Cloud {
  vpc: VPC {
    public: Public Subnet {
      alb: ALB {
        shape: rectangle
      }
    }
    private: Private Subnet {
      ecs: ECS Service {
        shape: rectangle
      }
      rds: RDS {
        shape: cylinder
      }
    }
  }
}

aws.vpc.public.alb -> aws.vpc.private.ecs: HTTP
aws.vpc.private.ecs -> aws.vpc.private.rds: SQL

{} でネストするだけで論理的なグルーピングが表現でき、AWSアーキテクチャ図のような階層構造に特に向いています。

サンプル：シーケンス図

shape: sequence_diagram

user: ユーザー
browser: ブラウザ
server: サーバー
db: DB

user -> browser: ログインフォーム入力
browser -> server: POST /login
server -> db: ユーザー検索
db -> server: ユーザー情報
server -> browser: セッション発行
browser -> user: ダッシュボード表示

shape: sequence_diagram を指定するだけで、同じ接続構文がシーケンス図として描画されます。

メリット・デメリット

書き方が統一されているのが一番の魅力で、図の種類ごとに異なる記法を覚える必要がありません。何も設定しなくても見た目がきれいに出力されるのは、Mermaidのデフォルトに不満がある人にとって大きなポイントでしょう。

一方、GitHubのMarkdownで直接レンダリングされないのが実用上の最大の壁です。図を画像に変換する仕組みを別途用意する必要があるので、導入のハードルはMermaidよりだいぶ高くなります。対応ツールやプラグインもまだ少なく、高品質レイアウトエンジンのTALAは有料です。

AIとの相性

構文に一貫性があるため、AIにとっても生成しやすい形式です。ただし2022年リリースと新しいぶん、Mermaidに比べると学習データは少ないようで、プロンプトで「D2で」と明示しないとMermaid構文で返ってくることがあります。D2を指定さえすれば、フローチャートやアーキテクチャ図は問題なく生成できます。

PlantUML — UMLの王道

PlantUMLは2009年に登場したJava製のUML描画ツールです。UMLのほぼ全ての図をテキストから生成でき、歴史が長いだけあって企業での採用実績が豊富です。Confluence、JIRA、GitLabなど企業向けツールとの連携も揃っています。

サンプル：シーケンス図（条件分岐付き）

@startuml
actor ユーザー
participant "APIサーバー" as API
database "データベース" as DB

ユーザー -> API : POST /api/auth/login
activate API

API -> DB : SELECT user WHERE email = ?
activate DB
DB --> API : ユーザー情報
deactivate DB

alt 認証成功
    API --> ユーザー : 200 OK + JWT
else 認証失敗
    API --> ユーザー : 401 Unauthorized
end

deactivate API
@enduml

activate / deactivate でライフラインの表現ができ、alt / else で条件分岐も自然に記述できます。この表現力はMermaidを上回ります。

サンプル：クラス図

@startuml
abstract class Animal {
  - name: String
  - age: int
  + getName(): String
  + makeSound(): void {abstract}
}

class Dog {
  + makeSound(): void
  + fetch(): void
}

class Cat {
  + makeSound(): void
  + purr(): void
}

interface Trainable {
  + train(command: String): void
}

Animal <|-- Dog
Animal <|-- Cat
Trainable <|.. Dog
@enduml

メリット・デメリット

正直に言うと、Javaランタイムが必要なのと構文がやや冗長なのは最初にちょっと抵抗を感じるかもしれません。@startuml / @enduml のブロック宣言はMermaidと比べると明らかに面倒ですし、デフォルトのビジュアルも少し古臭い。

それでもPlantUMLが根強く使われ続けている理由は、UMLの網羅性にあります。シーケンス図・クラス図・ユースケース図・アクティビティ図・コンポーネント図など、UML仕様のほぼ全てをカバーしていて、Confluence・JIRA・GitLabなど企業ツールとの連携も一通り揃っている。UML準拠のドキュメントが求められる現場では、結局PlantUMLに落ち着くことが多いです。

AIとの相性

歴史が長く学習データが大量にあるため、特にシーケンス図とクラス図の生成精度は高いです。ただし構文がMermaidより冗長なぶん生成コードが長くなるので、activate / deactivate の対応が崩れたり @enduml が抜けたりといった小さなミスはたまに見かけます。そのまま動くこともあれば、1〜2箇所手直しが要ることもある、という感じです。

Graphviz（DOT言語） — 自動レイアウトの元祖

Graphvizは1991年にAT&Tベル研究所で開発されたグラフ可視化ソフトウェアです。自動レイアウトアルゴリズムの元祖で、後発のMermaidやD2のレイアウトエンジンもGraphvizの研究をベースにしています。dot、neato、fdp、circo、twopi、sfdpの6種類のレイアウトエンジンを持ち、数十万ノード規模のグラフでも描画できます。

サンプル：依存関係グラフ

digraph dependencies {
    rankdir=LR;
    node [shape=component];

    app [label="App"];
    auth [label="Auth Module"];
    user [label="User Module"];
    db [label="Database"];
    cache [label="Cache"];
    logger [label="Logger"];
    config [label="Config"];

    app -> auth;
    app -> user;
    auth -> db;
    auth -> cache;
    user -> db;
    auth -> logger;
    user -> logger;
    db -> config;
    cache -> config;
}

サンプル：クラスタ（サブグラフ）

digraph architecture {
    compound=true;

    subgraph cluster_frontend {
        label="フロントエンド";
        style=filled;
        color="#e3f2fd";
        react [label="React"];
        redux [label="Redux"];
        react -> redux;
    }

    subgraph cluster_backend {
        label="バックエンド";
        style=filled;
        color="#e8f5e9";
        api [label="REST API"];
        service [label="Service Layer"];
        api -> service;
    }

    subgraph cluster_data {
        label="データ層";
        style=filled;
        color="#fff3e0";
        postgres [label="PostgreSQL", shape=cylinder];
        redis [label="Redis", shape=cylinder];
    }

    react -> api [lhead=cluster_backend];
    service -> postgres;
    service -> redis;
}

メリット・デメリット

描けるのはノードとエッジで構成されるグラフだけで、シーケンス図やガントチャートには非対応です。構文もMermaidやD2より低レベルで記述は冗長になります。

ただ、グラフの描画に関しては30年以上の蓄積は伊達じゃありません。数万ノード規模でも破綻しにくい自動レイアウトは後発のツールでもなかなか追いつけない品質ですし、dot・neato・fdp・circoなどレイアウトエンジンを使い分けられるのも強みです。プログラムからの自動生成との相性も良く、CIパイプラインに組み込んで依存関係グラフを自動更新するような使い方には最適です。

AIとの相性

30年以上の歴史があるので学習データは豊富です。「モジュールの依存関係をGraphvizで描いて」のような依頼では、digraph の基本構文はまず間違えません。ただ、subgraph cluster_ のプレフィックスルールや compound=true の設定など、Graphviz固有のお作法は抜けがちです。シンプルな有向グラフなら一発、クラスタ入りの図は手直しが1〜2箇所、といった体感です。

Nomnoml — 最小構文の軽量ツール

NomnomlはJavaScript製の軽量UMLダイアグラム描画ライブラリです。公式サイトでブラウザからすぐに使えるエディタが提供されています。構文は [ノード名] と -> だけで図が描ける、極めてミニマルな設計です。

サンプル

[User|
  +id: int
  +name: string
  +email: string
  |
  +login()
  +logout()
]

[Post|
  +id: int
  +title: string
  |
  +publish()
]

[User] 1 - * [Post]

メリット・デメリット

「手早くクラス図を1枚描きたい」ときに便利です。6ツールの中で構文が最もシンプルで、nomnoml.comを開いて角括弧で書くだけ。5分で使い始められます。

ただ、Nomnomlだけで全てをカバーするのは無理です。クラス図とフローチャート系が中心で、シーケンス図やER図には対応していません。メインツールというよりは、Mermaidと併用して「簡単なクラス図だけNomnomlで」という使い分けが現実的だと思います。

AIとの相性

構文がシンプルなぶんAIにとっては生成しやすい形式ですが、学習データに含まれるNomnomlコードの量が少ないため、プロンプトで「Nomnomlで」と明示しないとMermaidやPlantUMLの構文で返ってくることが多いです。指定すれば基本的なクラス図は問題なく生成できます。

Pikchr — 座標指定型ダイアグラム言語

PikchrはSQLiteの開発者D. Richard Hipp氏が開発した、座標ベースの正確なレイアウト制御が特徴のダイアグラム言語です。C言語で実装された単一ファイルのエンジンで、外部依存がゼロです。FossilのWikiやドキュメントで使われています。

サンプル

box "入力" fit
arrow
box "処理" fit
arrow
diamond "判定" fit
arrow right 200% "Yes" above
box "出力" fit

move to last diamond.s
arrow down 70% "No" ljust
box "エラー処理" fit

メリット・デメリット

6ツールの中では最も尖った存在です。座標指定やPIC言語由来の構文は学習コストが高く、MermaidやD2のような手軽さはありません。利用者コミュニティも小さいため情報収集にも苦労します。

しかしレイアウトを1ピクセル単位で制御できるのはPikchrだけです。外部依存ゼロでCのソースファイル1つから動くのも特徴的で、FossilのようにVCSのWikiに直接組み込まれている実績もあります。万人向けではないですが、座標制御が必須の場面では有力な選択肢です。

AIとの相性

学習データが少なく、座標指定が必要なのでAIには難しいツールです。試してみると、box と arrow の基本要素は出力されるものの、move to last diamond.s のような相対座標参照がおかしくなりがちで、出力されたコードのレイアウトが崩れることが多いです。Pikchrを使う場面ではAIは補助程度に留めて、手動で調整する前提の方がいいと思います。

AIに図を生成させるときの実践テクニック

ここまで各ツールのAI相性を紹介しましたが、実際にAIに図を生成させるときに知っておくと精度が上がるポイントをまとめます。

プロンプトのコツ

AIに図を依頼するとき、出力ツール名を明示するだけで精度が大きく変わります。

❌ 「ユーザー登録フローの図を描いて」（曖昧 → 何で出すかAIが迷う）

✅ 「ユーザー登録フローをMermaidのフローチャートで描いて。入力バリデーションとメール確認のステップを含めて」

さらに精度を上げるなら：

• 図の種類を指定する：「シーケンス図で」「ER図で」等
• 含めるべき要素を列挙する：「API Gateway、Lambda、DynamoDBを含めて」
• 既存コードを渡す：「このコードのクラス構造をMermaidのクラス図で」とソースコードを添付

GitHub Actionsでの自動レンダリング

図をコード管理する最大のメリットの一つがCI/CDで自動レンダリングできる点です。GitHub Actionsの例：

# .github/workflows/render-diagrams.yml
name: Render Diagrams
on:
  push:
    paths: ['docs/**/*.mmd']
jobs:
  render:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm install -g @mermaid-js/mermaid-cli
      - run: |
          for f in docs/**/*.mmd; do
            mmdc -i "$f" -o "${f%.mmd}.svg"
          done
      - uses: stefanzweifel/git-auto-commit-action@v5
        with:
          commit_message: "docs: auto-render diagrams"

.mmd ファイル（Mermaidのソース）を更新してpushするだけで、SVG画像が自動生成されてコミットされます。複数ツールを使っている場合は、前述のKrokiをDockerで動かしてAPIで一括レンダリングする方法が楽です。

Mermaid Live Editorを活用する

Mermaidにはブラウザ上でリアルタイムプレビューしながら編集できるLive Editor（mermaid.live）があります。AIに生成させたコードをここに貼り付けて微調整 → 確定したらリポジトリにコミット、というワークフローが効率的です。URLにコードがエンコードされるので、チームメンバーへの共有も簡単です。

AIが生成した図の確認ポイント

AIの出力は大体正しいですが、以下は手動チェック推奨です：

• 矢印の方向：依存関係やデータフローの向きが意図と逆になっていないか
• ノードの漏れ：要件で挙げた要素が全て図に含まれているか
• 構文エラー：そのままレンダリングして確認するのが一番早い

選定ガイド

導入方法

Mermaid

GitHubのMarkdownでは追加設定なしで ```mermaid コードブロックが図に変換されます。ローカルでの利用にはVS Code拡張「Markdown Preview Mermaid Support」が便利です。CLIで画像出力する場合：

npm install -g @mermaid-js/mermaid-cli
mmdc -i input.mmd -o output.svg

D2

# macOS
brew install d2

# Windows
scoop install d2

# 実行
d2 input.d2 output.svg

なお、有料レイアウトエンジンTALAを使う場合は別途ライセンスが必要です。

PlantUML

Java実行環境が必要です。

# macOS
brew install plantuml

# 実行
plantuml input.puml

オンラインサーバー（plantuml.com/plantuml）でブラウザから試すこともできます。

Graphviz

# macOS
brew install graphviz

# Windows
choco install graphviz

# 実行
dot -Tsvg input.dot -o output.svg

Nomnoml

nomnoml.comにアクセスするだけでブラウザ上で利用できます。プログラムから使う場合：

npm install nomnoml

Pikchr

Cのソースファイル1つ（pikchr.c）をコンパイルして使います。pikchr.org/home からソースを取得し、gcc -o pikchr pikchr.c でビルドできます。Fossil SCMには標準で組み込まれています。

この記事に関連する記事

まとめ

本記事ではAI時代のコード管理図形として、汎用ダイアグラム6種を比較解説しました。如何だったでしょうか。

個人的には、迷ったらまずMermaidを試すのが良いと考えています。GitHubのREADMEにそのまま埋め込めて、AIにも生成させやすく、学習コストも低い。正直これだけで大半の場面は事足ります。Mermaidでは表現しきれない階層構造の図が欲しくなったときにD2、UML準拠が求められるならPlantUML、大規模グラフならGraphvizといった形で使い分ければ十分です。

次回はベクター・直接描画（SVG、CSS Art、Canvas/p5.js）について解説します。

シリーズ目次 → 『AI時代の図形』完全ガイド

各ツールの詳細は公式サイトも参考にしてください：Mermaid / D2 / PlantUML / Graphviz / Nomnoml / Pikchr

それでは次の記事も閲覧いただけると幸いです。