excalidraw-skill MCP — ユースケース, インストール & ライブデモ

なぜ使うのか

主な機能

5種類のダイアグラムモードと専用レイアウトルール（フローチャート、アーキテクチャ、シーケンス、マインドマップ、スイムレーン）
Claudeがアーキテクチャ関連の議論を検出すると自動起動
3つのエクスポート方法：Kroki（curl、インストール不要）、ローカルCLI（PNG/SVG）、編集可能な.excalidraw
中国語または英語の自然言語入力に対応
手描き風の見た目により、AIダイアグラムにありがちな無機質な印象を回避

ライブデモ

実際の動作

excalidraw-skill.replay ▶ 準備完了

0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "excalidraw-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "excalidraw-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ],
      "_inferred": true
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "excalidraw-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ],
      "_inferred": true
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "excalidraw-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "excalidraw-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json

{
  "context_servers": {
    "excalidraw-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/Agents365-ai/excalidraw-skill",
          "~/.claude/skills/excalidraw-skill"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add excalidraw-skill -- git clone https://github.com/Agents365-ai/excalidraw-skill ~/.claude/skills/excalidraw-skill

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方： excalidraw-skill

散文形式の説明からマイクロサービスアーキテクチャ図を作成する

👤 設計ドキュメントを書くエンジニア ⏱ ~10 min beginner

使うタイミング： RFCを書いていて、別のツールを開かずにダイアグラムを作りたいとき。

前提条件

スキルを~/.claude/skills/excalidraw-skillにクローン済み — git clone https://github.com/Agents365-ai/excalidraw-skill ~/.claude/skills/excalidraw-skill
kroki.ioへのネットワークアクセス（インストール不要パス） — アウトバウンドHTTPSが使えれば設定不要

フロー

システムを説明する

Use the excalidraw skill — draw a microservices e-commerce architecture with clients, API gateway, 4 services, RabbitMQ, and per-service databases.✓ コピーしました

→ Claudeがレイアウトを生成し、Kroki経由でSVGをエクスポートする
調整して再エクスポートする

Add Redis in front of the product service and regenerate.✓ コピーしました

→ Redisが追加され、レイアウトが再調整されたダイアグラム
編集可能なバージョンを保存する

Save as .excalidraw so I can edit it on excalidraw.com.✓ コピーしました

→ カレントディレクトリにファイルが保存される

結果： 5分以内に手描き風のアーキテクチャ図をドキュメントに追加できます。

注意点

10以上のコンポーネントがあるとダイアグラムが煩雑になる — 先にClaudeにティアごとのグループ化を依頼してください。スキルにはそのためのレイアウトルールがあります

組み合わせ： filesystem

デバッグしたAPIインタラクションからシーケンス図を生成する

👤 チームメンバー向けにフローをドキュメント化するバックエンドエンジニア ⏱ ~10 min beginner

使うタイミング： 5つのサービスにまたがるOAuthフローをようやく解明し、それをドキュメント化したいとき。

フロー

ログを貼り付けるかフローを説明する

Excalidraw skill — sequence diagram: user → frontend → auth service → identity provider → callback → session.✓ コピーしました

→ 正しい矢印と戻りメッセージを含むシーケンス図
改善する

Add the error path when the IdP returns 401.✓ コピーしました

→ 代替フローが視覚的に区別されて描画される

結果： PRの説明にそのまま貼れるシーケンス図が完成します。

組み合わせ

他のMCPと組み合わせて10倍の力を

excalidraw-skill + filesystem

生成したダイアグラムをドキュメントフォルダに直接保存する

Generate the architecture diagram and save it to docs/architecture/v2.svg.✓ コピーしました

excalidraw-skill + github

仕様書と一緒にダイアグラムをコミットしてPRに添付する

Create the diagram, commit to docs/, and reference it in the PR body.✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング	コスト
generate_flowchart	process description	分岐点と順次ステップを含むプロセスの場合	0 via Kroki, 0 local
generate_architecture	components + relationships	ティアやサービス境界を持つシステムの場合	0
generate_sequence	actors + messages	時系列順のインタラクションをドキュメント化する場合	0
export_png	diagram ID	SVGに対応していないドキュメント向けにラスタライズ画像が必要な場合	0 (requires local CLI)

コストと制限

運用コスト

APIクォータ: Krokiに明示的なクォータはありませんが、過度なリクエストは控えてください
呼び出しあたりのトークン: ダイアグラム仕様はコンパクトです（通常2kトークン未満）
金額: 無料 — スキルはローカルファイルです。Krokiも無料です。
ヒント: 単発の利用にはKrokiを使い、excalidraw-brute-export-cliはオフライン環境が必要な場合のみインストールしてください。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管： 認証情報不要 — 純粋なプロンプトのみ

データ送信先： Krokiパスではダイアグラム仕様がkroki.ioに送信されます。ローカルCLIパスでは何も送信されません。

ダイアグラムにシステム内部情報が含まれる場合は、Krokiの代わりにローカルCLIパスを使用してください。

トラブルシューティング

よくあるエラーと対処法

ダイアグラムを依頼してもスキルが起動しない

「excalidraw」または「diagram」と明示的に言及するか、クローンが存在するか確認してください。

確認： ls ~/.claude/skills/excalidraw-skill/SKILL.md

SKILL.md frontmatterが正しくない

再クローンしてください。frontmatterが自動起動を制御しています。

確認： head ~/.claude/skills/excalidraw-skill/SKILL.md

トリガーキーワードの誤認 — ClaudeがExcalidrawの代わりにMermaidを生成する

「excalidraw」と明示的に指定してください。「draw a diagram」だけでは他のツールが選択される場合があります。

代替案

excalidraw-skill 他との比較

代替案	代わりに使う場面	トレードオフ
Mermaid via markdown	ドキュメントが既にMermaidをネイティブにレンダリングできる場合（GitHubなど）	手描き風の見た目がなく、レイアウトの制御も限定的
drawio via desktop app	クリック操作で手動レイアウトしたい場合	エージェント駆動ではない

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る