Excalidraw Diagram Skill — インストール & ライブデモ

なぜ使うのか

主な機能

Outputs native .excalidraw JSON (fully editable)
Pre-baked layouts for architecture, sequence, flow, mind map
Smart auto-layout to avoid label overlap
Annotation arrows with proper anchoring
Works in any agent (Claude Code, Cursor, Codex)

ライブデモ

実際の動作

excalidraw-diagram-skill.replay ▶ 準備完了

0/0

インストール

クライアントを選択

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

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

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

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

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

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

VS Code → Cline → MCP Servers → Edit

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

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

~/.codeium/windsurf/mcp_config.json

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

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

~/.continue/config.json

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

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

~/.config/zed/settings.json

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

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

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

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

ユースケース

実用的な使い方： Excalidraw Diagram Skill

Generate an editable architecture diagram from a description

👤 Engineers documenting systems ⏱ ~15 min intermediate

使うタイミング： You want a diagram you can iterate on, not a static PNG.

前提条件

Server/skill installed and authenticated — See repo README

フロー

Describe the system

Using the Excalidraw skill, draw our auth flow: SPA → API gateway → auth-service → Postgres → emit event to Kafka.✓ コピーしました

→ A .excalidraw file with labeled boxes + arrows
Iterate

Add a Redis cache between API gateway and auth-service.✓ コピーしました

→ Updated file with the new node + correct re-routed arrows

結果： A diagram you actually edit, not redraw.

注意点

For very large diagrams (>30 nodes) auto-layout struggles — For very large diagrams (>30 nodes) auto-layout struggles — split into multiple diagrams or group by concern.

コストと制限

運用コスト

APIクォータ: See provider docs for rate limits
呼び出しあたりのトークン: Varies by tool
金額: See repo README for pricing details
ヒント: Cache tool results and avoid repeated identical calls.

セキュリティ

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

認証情報の保管： Use environment variables; never commit secrets

データ送信先： Tool calls go to the provider's API as documented

トラブルシューティング

よくあるエラーと対処法

file doesn't open in Excalidraw

Make sure the file ends with .excalidraw and is valid JSON. The skill outputs both, but check the extension.

確認： Open at excalidraw.com → load file

arrows pointing wrong way

Excalidraw's arrow startBinding/endBinding matters. The skill's templates handle it, but custom edits can break it.

確認： Reload the file

代替案

Excalidraw Diagram Skill 他との比較

代替案	代わりに使う場面	トレードオフ
BV-Venky/excalidraw-architect-mcp	You want it as an MCP server instead of a skill	MCP is heavier setup; skill is just a folder

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

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