excalidraw-skill MCP — 使用场景, 安装 & 实时演示

为什么要用

核心特性

Five diagram modes with specialized layout rules (flowchart, architecture, sequence, mind map, swimlane)
Auto-invokes when Claude detects architecture-worthy discussions
Three export paths: Kroki (curl, zero-install), local CLI (PNG/SVG), editable .excalidraw
Accepts Chinese or English natural-language input
Hand-drawn aesthetic avoids the sterile-looking AI diagram problem

实时演示

实际使用效果

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

Sketch a microservices architecture diagram from a prose description

👤 Engineers writing design docs ⏱ ~10 min beginner

何时使用： You're writing an RFC and want a diagram without opening a separate tool.

前置条件

Skill cloned to ~/.claude/skills/excalidraw-skill — git clone https://github.com/Agents365-ai/excalidraw-skill ~/.claude/skills/excalidraw-skill
Network access to kroki.io (zero-install path) — No setup if outbound HTTPS works

步骤

Describe the system

Use the excalidraw skill — draw a microservices e-commerce architecture with clients, API gateway, 4 services, RabbitMQ, and per-service databases.✓ 已复制

→ Claude generates layout + exports an SVG via Kroki
Tweak and re-export

Add Redis in front of the product service and regenerate.✓ 已复制

→ Updated diagram with Redis inserted, layout re-balanced
Save editable version

Save as .excalidraw so I can edit it on excalidraw.com.✓ 已复制

→ File saved to CWD

结果： A hand-drawn-style architecture diagram in your doc in under 5 minutes.

注意事项

Diagram is cluttered for 10+ components — Ask Claude to group by tier first; the skill has layout rules for that

搭配使用： filesystem

Generate a sequence diagram from an API interaction you just debugged

👤 Backend engineers documenting flows for teammates ⏱ ~10 min beginner

何时使用： You finally figured out the 5-service OAuth dance and want to document it.

步骤

Paste the log or describe the flow

Excalidraw skill — sequence diagram: user → frontend → auth service → identity provider → callback → session.✓ 已复制

→ Sequence diagram with correct arrows and return messages
Refine

Add the error path when the IdP returns 401.✓ 已复制

→ Alternative flow rendered distinctly

结果： A sequence diagram you can drop into the PR description.

组合

与其他 MCP 搭配，撬动十倍杠杆

excalidraw-skill + filesystem

Save generated diagrams directly into your docs folder

Generate the architecture diagram and save it to docs/architecture/v2.svg.✓ 已复制

excalidraw-skill + github

Attach the diagram to a PR by committing it alongside the spec

Create the diagram, commit to docs/, and reference it in the PR body.✓ 已复制

工具

此 MCP 暴露的能力

工具	输入参数	何时调用	成本
generate_flowchart	process description	Process has decision points and sequential steps	0 via Kroki, 0 local
generate_architecture	components + relationships	System has tiers or service boundaries	0
generate_sequence	actors + messages	Documenting a time-ordered interaction	0
export_png	diagram ID	Need rasterized image for docs that don't support SVG	0 (requires local CLI)

成本与限制

运行它的成本

API 配额: Kroki has no explicit quota but don't hammer it
每次调用 Token 数: Diagram specs are compact (<2k tokens typically)
费用: Free — skills are local files. Kroki is free.
提示: Use Kroki for one-offs, install excalidraw-brute-export-cli only if you need offline.

安全

权限、密钥、影响范围

凭据存储： No credentials — pure prompts

数据出站： Kroki path sends your diagram spec to kroki.io. Local CLI path sends nothing.

If your diagrams leak system internals, use the local CLI path instead of Kroki.

故障排查

常见错误与修复

Skill not invoked when you ask for a diagram

Mention 'excalidraw' or 'diagram' explicitly; or verify the clone exists.

验证： ls ~/.claude/skills/excalidraw-skill/SKILL.md

SKILL.md frontmatter wrong

Re-clone; the frontmatter drives auto-activation.

验证： head ~/.claude/skills/excalidraw-skill/SKILL.md

Wrong trigger keywords — Claude writes Mermaid instead

Say 'excalidraw' explicitly; 'draw a diagram' alone can pick other tools.

替代方案

excalidraw-skill 对比其他方案

替代方案	何时用它替代	权衡
Mermaid via markdown	Your docs already render Mermaid natively (GitHub, etc.)	No hand-drawn aesthetic, less layout control
drawio via desktop app	You want click-heavy manual layout	Not agent-driven

excalidraw-skill