Claude Code または Cursor に DiagramZu を追加する

MCP サーバーを入れ、トークンを発行する（または Claude コネクターを使う）。エージェントが Mermaid を、チームが開ける URL に書く。クイックスタート、ツール一覧、REST。

DiagramZu は初めてですか？まずは 6 つのコンセプトから →

このページの内容

クイックスタート

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

STEP 01

新規登録

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

STEP 02

API トークンを作成

/app/settings/connections を開いてトークンを生成。すぐにコピーしてください — 二度と表示されません。

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

スペース内の図を検索します。

使う場面 create_diagram の前に呼び出して、既存の同名図との重複を避けます。q にタイトル・説明・ソースの部分文字列を渡して検索できます。作成後にも呼び出して最新の一致を取得します。

例

{
  "q": "DB schema",
  "sort": "relevance"
}

list_folders

スペース内のフォルダを一覧表示します。

使う場面新しい図を特定の場所に置く可能性があるときに呼び出します。「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

スペースに図を作成します。

使う場面必ず説明から書いてください — それが以後の呼び出しでエージェントへの申し送りになります。人が整理しているフォルダに入れるには 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 で非表示にします。