Kroki - 30以上のダイアグラムツールを統一APIで使える図表生成サービス

はじめに

ダイアグラムツール、皆さん何を使っていますか？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内で画像として埋め込むときに便利。

![diagram](https://kroki.io/plantuml/svg/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000)

この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();
}