はじめに
ダイアグラムツール、皆さん何を使っていますか?PlantUMLでシーケンス図を描いて、MermaidでER図を作って、GraphVizでネットワーク図を...と、用途によってツールを使い分けている人も多いんじゃないでしょうか。
正直なところ、これって結構面倒なんですよね。それぞれ環境構築が必要だし、記法も微妙に違う。「あのツールのあの機能使いたいな」と思っても、また別の環境を整えないといけない。
そんな悩みを解決してくれるのがKrokiです。GitHubで約3,900スターを獲得しているこのサービス、30以上のダイアグラムツールを統一されたAPIで提供してくれます。つまり、1つのエンドポイントさえ叩けば、PlantUMLでもMermaidでもGraphVizでも、好きなツールで図が生成できるという話です。
特徴・メリット
30以上のダイアグラムツールに対応
Krokiが対応しているツール、かなり豊富です。
- PlantUML:シーケンス図、クラス図の定番
- Mermaid:GitHub対応で人気
- GraphViz:ネットワーク図や依存関係図
- D2:最近注目のモダンな記法
- BPMN:ビジネスプロセス図
- C4:ソフトウェアアーキテクチャ図
- Excalidraw:手書き風のダイアグラム
- Ditaa:アスキーアートを図に変換
- ERD:ER図専用
- WaveDrom:タイミング図
- Vega/Vega-Lite:データ可視化
他にもBlockDiag、Bytefield、DBML、Nomnoml、Pikchr、SvgBob、Symbolator、UMLet、WireVizなど、まだまだあります。これだけあれば、「このツールじゃないとできない」という状況はほぼないですね。
統一されたAPI
これが最大のメリット。どのダイアグラムツールを使っても、APIの叩き方は同じです。
POST /ツール名/出力形式
例えばPlantUMLでSVGを生成したいなら/plantuml/svg、MermaidでPNGなら/mermaid/png。覚えることが少なくて済みます。
複数の出力形式に対応
生成できる形式も充実しています。
- SVG:スケーラブル、Web向け
- PNG:一般的な画像形式
- JPEG:写真向け
- PDF:ドキュメント埋め込み
- Base64:データURLとして利用
ツールによって対応状況は異なりますが、大体のユースケースはカバーできます。
無料のホスティングサービス
kroki.ioで無料のサービスが提供されています。ちょっと試したいだけなら、環境構築なしで使えるのはありがたいですね。本番利用する場合は、セルフホスティングも可能です。
Dockerで簡単にセルフホスティング
自前でホスティングしたい場合、Dockerコマンド一発で立ち上がります。これ、意外と重要で、社内ドキュメントに機密情報を含む図を入れたいとき、外部サービスを使いたくないケースってありますよね。
インストール方法
無料サービスを使う(環境構築不要)
一番手軽なのは、kroki.ioのサービスをそのまま使う方法。環境構築なしで、すぐに試せます。
curl -X POST https://kroki.io/plantuml/svg \
-H "Content-Type: text/plain" \
-d "Bob -> Alice : hello"
Dockerでセルフホスティング
本格的に使うなら、Dockerでローカルに立てるのがおすすめ。
docker run -d -p 8000:8000 yuzutech/kroki
これだけでhttp://localhost:8000でKrokiが使えるようになります。
docker-composeで全機能を有効化
すべてのダイアグラムツールを使いたい場合は、docker-composeがおすすめ。一部のツールは別コンテナで動くので、フル機能を使うには複数コンテナの起動が必要です。
version: "3"
services:
kroki:
image: yuzutech/kroki
ports:
- "8000:8000"
depends_on:
- mermaid
- bpmn
- excalidraw
environment:
- KROKI_MERMAID_HOST=mermaid
- KROKI_BPMN_HOST=bpmn
- KROKI_EXCALIDRAW_HOST=excalidraw
mermaid:
image: yuzutech/kroki-mermaid
expose:
- "8002"
bpmn:
image: yuzutech/kroki-bpmn
expose:
- "8003"
excalidraw:
image: yuzutech/kroki-excalidraw
expose:
- "8004"
基本的な使い方
POSTリクエスト(推奨)
最もシンプルなのは、プレーンテキストをPOSTする方法。
curl -X POST http://localhost:8000/plantuml/svg \
-H "Content-Type: text/plain" \
-d "@startuml
Bob -> Alice : hello
Alice -> Bob : hi
@enduml"
JSON形式でリクエスト
構造化したい場合は、JSON形式も使えます。
curl -X POST http://localhost:8000/ \
-H "Content-Type: application/json" \
-d '{
"diagram_source": "Bob -> Alice : hello",
"diagram_type": "plantuml",
"output_format": "svg"
}'
GETリクエスト(URLエンコード)
図の内容をURLに含めることもできます。Markdown内で画像として埋め込むときに便利。

このURLのパスに含まれている文字列は、図のソースをDeflate圧縮してBase64エンコードしたものです。公式サイトにエンコードツールがあるので、それを使うと楽です。
各ダイアグラムツールの例
PlantUML(シーケンス図)
curl -X POST http://localhost:8000/plantuml/svg \
-H "Content-Type: text/plain" \
-d "@startuml
actor User
participant Frontend
participant Backend
database Database
User -> Frontend: リクエスト
Frontend -> Backend: API呼び出し
Backend -> Database: クエリ
Database --> Backend: 結果
Backend --> Frontend: レスポンス
Frontend --> User: 表示
@enduml"
Mermaid(フローチャート)
curl -X POST http://localhost:8000/mermaid/svg \
-H "Content-Type: text/plain" \
-d "flowchart TD
A[開始] --> B{条件}
B -->|Yes| C[処理A]
B -->|No| D[処理B]
C --> E[終了]
D --> E"
GraphViz(依存関係図)
curl -X POST http://localhost:8000/graphviz/svg \
-H "Content-Type: text/plain" \
-d "digraph G {
rankdir=LR
node [shape=box]
Frontend -> Backend
Backend -> Database
Backend -> Cache
Backend -> MessageQueue
}"
D2(モダンな記法)
curl -X POST http://localhost:8000/d2/svg \
-H "Content-Type: text/plain" \
-d "direction: right
user -> frontend: request
frontend -> backend: api call
backend -> database: query"
実践的なユースケース
ドキュメント生成パイプライン
CI/CDでドキュメントを自動生成する際、Krokiを組み込むと便利です。ソースコードと一緒に図の定義も管理して、ビルド時に画像を生成する。図の更新漏れがなくなりますね。
# ドキュメントビルドスクリプトの例
for file in docs/diagrams/*.puml; do
name=$(basename "$file" .puml)
curl -X POST http://localhost:8000/plantuml/svg \
-H "Content-Type: text/plain" \
-d "$(cat $file)" > "docs/images/${name}.svg"
done
複数ツールの使い分け
用途によってツールを使い分けられるのがKrokiの強み。
- システム構成図:GraphViz(自動レイアウトが賢い)
- シーケンス図:PlantUML(記法が充実)
- ER図:DBML(データベース特化)
- フローチャート:Mermaid(シンプル)
- アーキテクチャ図:C4(レイヤー表現が得意)
同じAPIで全部使えるので、学習コストを最小限に抑えつつ、最適なツールを選べます。
Webアプリへの組み込み
APIベースなので、Webアプリに組み込むのも簡単。ユーザーが入力したダイアグラム定義をリアルタイムでプレビューする、みたいな機能が実装しやすいです。
async function generateDiagram(source, type = 'plantuml', format = 'svg') {
const response = await fetch(`http://localhost:8000/${type}/${format}`, {
method: 'POST',
headers: { 'Content-Type': 'text/plain' },
body: source
});
return response.text();
}
社内ドキュメント基盤
セルフホスティングできるので、機密性の高い社内ドキュメントでも安心して使えます。Confluenceやesa、Notionの代替として自社Wikiを運用している場合、Krokiを組み込むとダイアグラム機能が追加できますね。
まとめ
Krokiは、複数のダイアグラムツールを統一APIで提供してくれるサービスです。
向いている人
- 複数のダイアグラムツールを使い分けたい
- 環境構築の手間を減らしたい
- CI/CDでドキュメント生成を自動化したい
- セルフホスティングで機密情報を扱いたい
- APIベースで図を生成したい
向いていないかもしれない人
- 1つのツールしか使わない(直接そのツールを使う方が効率的)
- GUIでポチポチ図を作りたい
- オフライン環境でしか作業できない
個人的には、複数のダイアグラムツールを使っている人なら、Krokiに統一するメリットは大きいと思います。特にCI/CDでドキュメント生成を自動化している場合、API一本で済むのは楽ですね。
無料サービスがあるので、まずはkroki.ioで試してみてください。気に入ったらDockerでセルフホスティングすれば、本番環境でも安心して使えます。
公式サイト: https://kroki.io
