AI を DiagramZu につなぐ

Claude・Cursor などの MCP クライアントを接続すれば、エージェントから直接、図を操作できます——コンセプト、3 ステップのクイックスタート、そしてツールと REST の完全リファレンス。

DiagramZu は初めて?まずは 5 つのコンセプトから →

このページの内容

クイックスタート

AIにDiagramZuを使わせるための3ステップ。

STEP 01

新規登録

スペースを作成し、チームメイトを招待。

STEP 02

API トークンを作成

/app/settings/tokens を開いてトークンを生成。コピーは即座に — 二度と表示されません。

STEP 03

AI ツールに追加

下のスニペットを Claude / Cursor / ChatGPT の設定に貼り付け。

MCP セットアップ

DiagramZu は HTTP トランスポート経由で14個のツールを公開します。図表・フォルダ・バージョン履歴・デッキ・コメントにまたがる読み取り・書き込み・解析のプリミティブ。一度インストールすれば、エージェントがそのまま使えます。

ワンクリック接続 — Claude

Claude の設定 → コネクター → カスタムコネクターを追加を開き、https://mcp.diagramzu.ai/mcp を貼り付けて、DiagramZu アカウントで認可します。API トークンのコピーは不要です。

Cursor、ChatGPT、スクリプト、その他の MCP クライアントをお使いですか？下の API トークン設定をご利用ください — どこでも動作します。

インストール

サインインすると、下のスニペットにトークンが自動で入ります。

Claude Code

ターミナルで以下を実行し、dz_live_xxx をあなたの API トークンに置き換えてください。

Bash

claude mcp add --scope user --transport http diagramzu https://mcp.diagramzu.ai/mcp \
  --header "Authorization: Bearer dz_live_xxx"

Claude Desktop

Claude の設定ファイル(macOS:~/Library/Application Support/Claude/claude_desktop_config.json、Windows:%APPDATA%\Claude\claude_desktop_config.json)を編集し、アプリを再起動してください。

JSON

{
  "mcpServers": {
    "diagramzu": {
      "type": "http",
      "url": "https://mcp.diagramzu.ai/mcp",
      "headers": {
        "Authorization": "Bearer dz_live_xxx"
      }
    }
  }
}

Cursor

~/.cursor/mcp.json を編集し、Cursor を再起動してください。

JSON

{
  "mcpServers": {
    "diagramzu": {
      "type": "http",
      "url": "https://mcp.diagramzu.ai/mcp",
      "headers": {
        "Authorization": "Bearer dz_live_xxx"
      }
    }
  }
}

ツールリファレンス

読み取りツール

list_diagrams

Space内の図表を検索します。

使う場面 create_diagramの前に呼び出して、既存の同名図表との重複を避けるか、後に呼び出して最新の一致を取得します。

例

{
  "query": "DB schema",
  "sortBy": "updatedAt",
  "sortDir": "desc"
}

list_folders

Space内のフォルダを一覧表示します。

使う場面新しい図表を特定の場所に置く可能性があるときに呼び出します。「Infra」や「Schema」のようなフォルダがあれば、ルートよりそちらを優先してください。

例

{}

get_diagram

IDで1つの図表を、説明を含めて取得します。

使う場面何を変更するか決める前に、説明をブリーフとして読んでください。

例

{
  "id": "dgm_abc123"
}

list_versions

図表の手動スナップショットを新しい順に一覧表示します。

使う場面リスクのある上書きの前に、どの復元ポイントがあるかを知るために使います。

例

{
  "diagramId": "dgm_abc123"
}

get_version

図表の過去のバージョンを1つ取得します。

使う場面図表の変遷を理解するため、または現在のバージョンにはない内容を復元するために、過去のスナップショットを読みます。

例

{
  "diagramId": "dgm_abc123",
  "versionId": "ver_xyz789"
}

書き込みツール

create_diagram

Spaceに図表を作成します。

使う場面常に最初に説明を書いてください — それが今後の呼び出しのためのエージェントブリーフになります。人間が管理するフォルダの下に図表を整理するにはfolderIdを設定します。

例

{
  "title": "User signup flow",
  "description": "Auth path from /signup → verify → first login.",
  "code": "graph TD; A-->B-->C",
  "folderId": "fld_..."
}

update_diagram

既存の図表のタイトル、説明、コード、またはstyleOptionsを更新します。

使う場面変更が意味のあるものなら、createVersion: trueを渡してください — 将来の自分が復元ポイントを欲しがるはずです。versionLabelは履歴ドロワーに表示されます。

例

{
  "id": "dgm_abc123",
  "code": "graph LR; A-->B-->C-->D",
  "createVersion": true,
  "versionLabel": "added retry path"
}

解析

analyze_diagram

図表の構造的な批評を返します — 孤立ノード、高次数ハブ、循環、切り離されたコンポーネント。

使う場面複雑な図表を簡素化する前、または生成したコードがきれいなグラフを生成しているかのサニティチェックとして使います。

例

{
  "id": "dgm_abc123"
}

デッキ

list_decks

スペース内のプレゼン用デッキを、最終編集が新しい順に一覧します。

使う場面 create_deck の前に呼び、重複作成ではなく既存デッキの拡張を検討します。

例

{}

get_deck

ID でデッキを 1 件取得し、順序付きのスライドを返します。

使う場面 update_deck で並べ替え・追加する前に、スライドの順序とタイトルを確認します。

例

{
  "id": "dck_abc123"
}

create_deck

既存の図を順序付きのスライドショー・デッキにまとめます。

使う場面先にスライドとなる図を作成して ID を集め、提示順に渡します。共有用の発表 URL を返します。

例

{
  "title": "System architecture walkthrough",
  "description": "Read in order: context → data flow → deploy.",
  "slides": ["dgm_context", "dgm_dataflow", "dgm_deploy"]
}

update_deck

デッキのタイトル・説明・スライド順を変更します。

使う場面 slides は宣言的です。望む完全な図 ID リストを送ると、省いた ID は削除され、新しい ID は末尾に追加されます。

例

{
  "id": "dck_abc123",
  "slides": ["dgm_context", "dgm_dataflow", "dgm_deploy", "dgm_appendix"]
}

list_comments

図のコメントを古い順に一覧します。

使う場面 nodeId を渡すと特定ノードのスレッドだけを読めます。includeResolved: false にしない限り、解決済みスレッドも含まれます。

例

{
  "diagramId": "dgm_abc123",
  "includeResolved": false
}

add_comment

図にコメントを投稿します（任意でノードに固定）。

使う場面人が図上で見る構造化されたレビュー所見を残します。nodeId でノードに固定、parentId でスレッドに返信できます。

例

{
  "diagramId": "dgm_abc123",
  "nodeId": "PaymentService",
  "body": "This should call the retry queue, not the DB directly."
}

REST API

すべてのリクエストは Bearer トークンで認証します。ベース URL は https://diagramzu.ai。$SPACE_ID はあなたのスペース ID(アプリ内の URL に表示)に置き換えてください。

エンドポイント

curl · 一覧

# List diagrams in your Space
curl -H "Authorization: Bearer $DIAGRAMZU_TOKEN" \
  https://diagramzu.ai/api/spaces/$SPACE_ID/diagrams

curl · 作成

# Create a new diagram
curl -X POST -H "Authorization: Bearer $DIAGRAMZU_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"title":"My diagram","code":"graph TD; A-->B"}' \
  https://diagramzu.ai/api/spaces/$SPACE_ID/diagrams

curl · 更新

# Update a diagram
curl -X PATCH -H "Authorization: Bearer $DIAGRAMZU_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"code":"graph LR; A-->B-->C"}' \
  https://diagramzu.ai/api/spaces/$SPACE_ID/diagrams/<DIAGRAM_ID>

DIAGRAMS

Method	Path	Description
GET	`/api/spaces/[spaceId]/diagrams`	List diagrams. Same filters as list_diagrams.
POST	`/api/spaces/[spaceId]/diagrams`	Create a diagram.
GET	`/api/spaces/[spaceId]/diagrams/[id]`	Fetch one diagram.
PATCH	`/api/spaces/[spaceId]/diagrams/[id]`	Update title, code, description, or styleOptions.
DELETE	`/api/spaces/[spaceId]/diagrams/[id]`	Delete a diagram.
GET	`/api/spaces/[spaceId]/diagrams/[id]/thumbnail`	Rendered thumbnail.
GET	`/api/spaces/[spaceId]/diagrams/[id]/analysis`	Structural analysis (same as analyze_diagram).
GET	`/api/spaces/[spaceId]/diagrams/[id]/embed-stats`	Embed load count for the active share (last 7 days).
POST	`/api/spaces/[spaceId]/diagrams/export/png`	Render arbitrary Mermaid code to PNG.

FOLDERS

Method	Path	Description
GET	`/api/spaces/[spaceId]/folders`	List folders.
POST	`/api/spaces/[spaceId]/folders`	Create a folder.
PATCH	`/api/spaces/[spaceId]/folders/[id]`	Rename or reparent a folder.
DELETE	`/api/spaces/[spaceId]/folders/[id]`	Delete a folder.

VERSIONS

Method	Path	Description
GET	`/api/spaces/[spaceId]/diagrams/[id]/versions`	List versions, newest first.
POST	`/api/spaces/[spaceId]/diagrams/[id]/versions`	Snapshot the current state.
GET	`/api/spaces/[spaceId]/diagrams/[id]/versions/[vid]`	Fetch one version.
POST	`/api/spaces/[spaceId]/diagrams/[id]/versions/[vid]/restore`	Restore a version (auto-snapshots first).
POST	`/api/spaces/[spaceId]/diagrams/[id]/versions/[vid]/fork`	Fork a version into a new diagram.

DECKS

Method	Path	Description
GET	`/api/spaces/[spaceId]/decks`	List decks. Same as list_decks.
POST	`/api/spaces/[spaceId]/decks`	Create a deck from an ordered list of diagram ids.
GET	`/api/spaces/[spaceId]/decks/[id]`	Fetch one deck with its ordered slides.
PATCH	`/api/spaces/[spaceId]/decks/[id]`	Update title, description, or slide order.
DELETE	`/api/spaces/[spaceId]/decks/[id]`	Delete a deck.

COMMENTS

Method	Path	Description
GET	`/api/spaces/[spaceId]/diagrams/[id]/comments`	List comments. Same as list_comments.
POST	`/api/spaces/[spaceId]/diagrams/[id]/comments`	Post a comment (optionally pinned to a node).
PATCH	`/api/spaces/[spaceId]/diagrams/[id]/comments/[cid]`	Edit a comment body.
DELETE	`/api/spaces/[spaceId]/diagrams/[id]/comments/[cid]`	Delete a comment.
POST	`/api/spaces/[spaceId]/diagrams/[id]/comments/[cid]/resolve`	Resolve or reopen a comment thread.

Method	Path	Description
GET	`/api/spaces/[spaceId]/diagrams/[id]/shares`	List active share links.
POST	`/api/spaces/[spaceId]/diagrams/[id]/shares`	Mint a new share link.
DELETE	`/api/spaces/[spaceId]/diagrams/[id]/shares/[shareId]`	Revoke a share link.
GET	`/api/public/share/[slug]`	Public read endpoint (no auth).

TOKENS

Method	Path	Description
GET	`/api/spaces/[spaceId]/tokens`	List API tokens (no secrets).
POST	`/api/spaces/[spaceId]/tokens`	Create a token. Secret returned ONCE.
DELETE	`/api/spaces/[spaceId]/tokens/[id]`	Revoke a token.

あなたの Space ID を見つける

ログイン後、API トークンページを開いてください — 現在のスペースの ID が見出しの横に表示され、コピーできます。

図表を埋め込む

共有リンクを発行し、Embed タブを開いてスニペットをコピー — または自分で組み立てます。iframe を許可する任意のページに貼り付けてください。

任意のページに貼り付け

<iframe src="https://diagramzu.ai/embed/your-diagram" width="100%" height="480" style="border:0;border-radius:8px" loading="lazy" title="diagramzu diagram"></iframe>

URL オプション

Parameter	Values	Default	Effect
`theme`	`light` `dark` `auto`	`auto`	レンダリングされる図表のカラーテーマ。auto は閲覧者の OS に従います。
`bg`	`transparent` `white` `paper` `ink-tint` `dark`	`transparent`	図表の背景。transparent はホストページの色を透過させます。
`fit`	`true` `false`	`true`	読み込み時に図表をフレームに合わせてズームします。false で元のサイズで表示します。
`badge`	`true` `false`	`true`	隅に小さな「diagramzu」リンクを表示します。false で非表示にします。