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
每次呼叫 Token 數: 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

替代方案