【AI時代の図形】完全ガイド — コード管理できる図形26種 用途別おすすめ早見表

当サイトを閲覧いただきありがとうございます。本記事ではAI時代にコード管理できる図形全26種を横断的に比較し、用途別のおすすめをまとめます。

26種類もあると「で、結局どれを使えばいいの？」となると思いますが、この記事を見ればどのツールを選べばよいか分かります。各カテゴリの表の下に詳細記事へのリンクを用意しているので、気になるカテゴリがあればそちらも参照してください。

「図をコードで管理する」とは？

PowerPointやdraw.ioで図を作ると、保存されるのはPNGやJPEGなどのバイナリファイル（人間が読めないデータ形式）です。バイナリファイルには厄介な問題があります：

• 中身が読めない — ファイルを開いても0と1の羅列で、どこに何が書いてあるか分からない
• 変更箇所が分からない — Gitで差分を見ても「何かが変わった」としか分からず、「矢印を1本追加した」のか「全体を作り直した」のか区別できない
• AIが生成できない — AIはテキストを出力するツールなので、バイナリ画像を直接生成することはできない
• 元のツールがないと編集できない — PowerPointで作った図はPowerPointがないと修正できない

一方、本記事で紹介するツールは図をテキスト（コード）で定義します。たとえばMermaidなら、以下のようなテキストを書くだけでフローチャートが自動生成されます：

flowchart TD
  A[開始] --> B{条件}
  B -->|Yes| C[処理A]
  B -->|No| D[処理B]

テキストなのでAIに「この図を描いて」と頼める、Gitで「どの矢印が追加されたか」まで差分が見える、テキストエディタさえあれば誰でも編集できるのが大きなメリットです。

AIコーディングアシスタントが当たり前になった今、コード管理できる図形の活躍の幅は今後さらに広がっていくと確信しています。ドキュメントの更新に連動して図が自動更新される、PRのレビューで図の差分も確認できる、設計の議論をAIに投げるとそのまま仕様書用の図が返ってくる — こうしたワークフローが既に実現可能で、ツールとAIの進化によって今後さらに自然になっていくでしょう。

全26種早見表

以下は8カテゴリ・全26種を一覧にした早見表です。各カテゴリの表で気になるものがあれば、表の下にあるリンクからサンプルコード付きの詳細記事に飛べます。

汎用ダイアグラム（6種）

フローチャート、シーケンス図、ER図など、開発中によく使う図を描くための定番です。

サンプルコード・メリット・デメリットの詳細はこちら：

【AI時代の図形】汎用ダイアグラム6選 — Mermaid・D2・PlantUML・Graphviz・Nomnoml・Pikchr徹底比較senkohome.com/ai-diagram-general/

ベクター・直接描画（3種）

座標やスタイルを自分で指定して図形を描く手法です。表現力は高いですが記述量が多いため、汎用系の補完として使うのが現実的です。

サンプルコード・メリット・デメリットの詳細はこちら：

【AI時代の図形】ベクター・直接描画3選 — SVG・CSS Art・Canvas/p5.js徹底比較senkohome.com/ai-diagram-vector/

テキストアート系（3種）

+ - | などの文字だけで図を描くアプローチです。専用ソフト不要で始められ、AIとの相性も良好です。

サンプルコード・メリット・デメリットの詳細はこちら：

【AI時代の図形】テキストアート系3選 — ASCII Art・Ditaa・Svgbob徹底比較senkohome.com/ai-diagram-textart/

設計系（3種）

特定の設計領域に特化した専用型です。汎用系とは比べものにならない表現力と生産性が出せます。

サンプルコード・メリット・デメリットの詳細はこちら：

【AI時代の図形】設計系3選 — Structurizr・DBML・Diagrams(Python)徹底比較senkohome.com/ai-diagram-domain-design/

ハードウェア・構文系（3種）

かなりニッチな内容です。デジタル回路のタイミング図やプロトコル仕様書に関わらない方は読み飛ばしてOKです。

サンプルコード・メリット・デメリットの詳細はこちら：

【AI時代の図形】ハードウェア・構文系3選 — WaveDrom・Railroad Diagram・Bytefield徹底比較senkohome.com/ai-diagram-domain-hardware/

グラフ・チャート（4種）

棒グラフ、折れ線グラフ、円グラフなど、データを可視化するための定番です。

サンプルコード・メリット・デメリットの詳細はこちら：

【AI時代の図形】グラフ・チャート4選 — Vega-Lite・Chart.js・Recharts・Observable Plot徹底比較senkohome.com/ai-diagram-dataviz/

マインドマップ・ホワイトボード（2種）

思考整理やラフスケッチ向きです。テキストから自動生成するMarkmapと、マウスで直感的に描くExcalidrawの2種です。

サンプルコード・メリット・デメリットの詳細はこちら：

【AI時代の図形】マインドマップ・ホワイトボード2選 — Markmap・Excalidraw徹底比較senkohome.com/ai-diagram-whiteboard/

数学・学術（2種）

学術論文や教科書で使われる図形・数式です。

サンプルコード・メリット・デメリットの詳細はこちら：

【AI時代の図形】数学・学術系2選 — TikZ・KaTeX/MathJax徹底比較senkohome.com/ai-diagram-academic/

用途別おすすめ

表を見ても迷う場合は、以下を参考にしてください。

どこで表示するか

描きたい図の種類から選ぶ

Kroki — 複数ツールをまとめて使えるサービス

ここまで紹介した個別ツールを1つのサービスからまとめて利用したい場合に便利なのがKrokiです。

Krokiは20以上のダイアグラムツールを1つのAPI経由で利用できるレンダリングサービスです。Mermaid、PlantUML、Graphviz、D2、Svgbob、WaveDromなど、本記事で紹介したツールの多くに対応しています。

使い方はシンプルで、URLのパスにツール名を指定してコードを送信するだけです。

# Mermaidでフローチャートを生成
curl -X POST https://kroki.io/mermaid/svg \
  -d 'flowchart TD
    A[Start] --> B{Check}
    B -->|Yes| C[Process]
    B -->|No| D[End]'

# PlantUMLでシーケンス図を生成
curl -X POST https://kroki.io/plantuml/svg \
  -d '@startuml
Alice -> Bob: Hello
Bob --> Alice: Hi
@enduml'

ツールのインストールが一切不要で、HTTP APIを叩くだけで図が得られます。docker run -d -p 8000:8000 yuzutech/kroki でセルフホスティングもできるので、社内環境に閉じて運用することも可能です。

外部サービスに依存するため、公式サーバーがダウンすると図の生成ができなくなる点には注意が必要です（セルフホスティングで回避可能）。

まとめ

本記事ではAI時代にコード管理できる図形全26種を、8カテゴリに分けて紹介しました。如何だったでしょうか。

正直、26種全部を覚える必要はありません。私自身も普段使っているのはせいぜい4〜5種類で、それ以外は必要になったときに引っ張り出すくらいです。大事なのは「こういうツールがある」ということを頭の片隅に入れておくことで、いざという時に「たしかあのツールが使えたはず」と思い出せれば十分です。

まずはMermaidから始めて、必要に応じてDBML、Diagrams(Python)、Vega-Lite等の専用ツールを取り入れていく、というステップで問題ありません。複数ツールを使い分けるなら、KrokiでAPIを統一するのも手です。

本記事が、図形の選定の参考になれば幸いです。

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