Mermaid vs PlantUML vs Graphviz
3 つのテキストから図を生成するツール、それぞれ役割が異なります。Mermaid は簡潔でブラウザ上でレンダリングされ、PlantUML は UML を最も深くカバーし、Graphviz は大規模なグラフをレイアウトします。実際にどう違うのかを見ていきます。
⚠️ 開示:私たちは無料の Mermaid エディタを開発しています。以下の基準(記法、図の種類、レンダリング方式、GitHub 対応)は客観的なものです。いずれも各プロジェクトの公式ドキュメントで確認してください。
| ツール | 記法のスタイル | 図の種類 | レンダリング方式 | GitHub ネイティブ | 向いている用途 |
|---|---|---|---|---|---|
| Mermaid | 簡潔で Markdown ライク | フローチャート、シーケンス、ER、クラス、状態、ガント、マインドマップ、円グラフなど | JavaScript — ブラウザ上でレンダリング | はい — Markdown でネイティブ対応 | README・wiki・ノートでの docs-as-code |
| PlantUML | 冗長な DSL(@startuml … @enduml) | 最も完全な UML セットに加え、UML 以外の図も多数 | Java — PlantUML サーバーまたはローカルの jar | いいえ — 事前にレンダリングした画像が必要 | 深く網羅的な UML モデリング |
| Graphviz (DOT) | グラフ記述言語(digraph { … }) | 汎用的なノードとエッジのグラフ、ツリー、依存関係マップ | Graphviz エンジン(dot);ブラウザ向けには WASM 移植版 | いいえ — 事前にレンダリングした画像が必要 | 大規模な自動レイアウトのグラフと階層構造 |
「GitHub ネイティブ」とは、画像をアップロードせずに Markdown 内のソースから図がレンダリングされることを意味します。PlantUML と Graphviz は、GitHub 上で表示するには事前にレンダリングした SVG/PNG が必要です。
それぞれをいつ選ぶか
Mermaid を選ぶ場合 は、図がコードを文書化し、リポジトリ内に置くべきとき — README のアーキテクチャ図、設計ドキュメントのシーケンス図、wiki のスキーマなど。GitHub や GitLab 上でネイティブにレンダリングされるためレビュアーがインラインで確認でき、記法も軽量なのでノートを打ちながらの流れで書けます。
PlantUML を選ぶ場合 は、厳密で完全な UML が必要なとき — 詳細なクラス階層、コンポーネント図やデプロイメント図、あるいは記法を正確に制御したい場合。GitHub でのネイティブレンダリングと簡潔さを引き換えに深さを得ることになり、画像を生成するには PlantUML サーバー(または jar)を動かします。
Graphviz を選ぶ場合 は、「図」が実際には手作業でレイアウトしたくない大規模なグラフであるとき — 依存関係グラフ、コールグラフ、大きな状態機械など。DOT 言語と自動レイアウトエンジンにより、手描きでは扱いきれない数百のノードを処理できます。
いますぐ図を作りたくてここにたどり着いたなら、最速の道は Mermaid です。
関連項目: Mermaidエディタ · UML図 / クラス図 · 例 · Mermaidを埋め込む
よくある質問
Mermaid と PlantUML はどちらが優れていますか?
どちらか一方が一概に優れているわけではなく、狙う用途が異なります。Mermaid は簡潔で、GitHub や GitLab 上の Markdown でネイティブにレンダリングされるため、コードのそばに置くドキュメントに最適です。PlantUML ははるかに完全な UML 機能セットと細かな制御を備えていますが、Java サーバーを介してレンダリングされ、GitHub 上ではネイティブに描画されません。手軽な docs-as-code には Mermaid を、網羅的な UML には PlantUML を選びましょう。
Mermaid は PlantUML にできることをすべてできますか?
いいえ。PlantUML はより多くの UML 図の種類をカバーし、より深いスタイリングとレイアウトの制御を提供します。Mermaid は多くのチームが日常的に必要とする図 — フローチャート、シーケンス、ER、クラス、状態、ガント — をはるかに少ない記法でカバーします。詳細なコンポーネント図やデプロイメント図といった高度な UML が必要なら、PlantUML のほうが先まで対応できます。
Graphviz は Mermaid と同じものですか?
いいえ。Graphviz は DOT 言語を使い、大規模なノードとエッジのグラフ — 依存関係ツリー、コールグラフ、状態機械 — の自動レイアウトに優れています。Mermaid はより高水準で図の種類を認識し(シーケンス図とは何かを理解しています)、ブラウザ上や GitHub 上でレンダリングされます。大規模な生成グラフには Graphviz のレイアウトエンジンが圧倒的ですが、読みやすいドキュメント図には Mermaid のほうが速く書けます。
GitHub は PlantUML や Graphviz をレンダリングしますか?
GitHub は ```mermaid フェンスブロック内の Mermaid をネイティブにレンダリングしますが、PlantUML や Graphviz はレンダリングしません。それらの場合は、各レンダラーで画像(SVG または PNG)を生成し、その画像を Markdown にコミットまたはリンクします。
PlantUML を Mermaid に自動変換できますか?
信頼できるワンクリックの変換ツールはありません — 記法も機能セットも異なるため、きれいに変換するには通常、図を手作業で書き直すことになります。幸い、よく使う種類(シーケンス、クラス、状態)は近い形で対応するので、日常的な図であれば手作業の書き直しもすぐに済みます。