freemcplab / 目录 / 演练场 / Excalidraw Architect MCP

● 社区 BV-Venky ⚡ 即开即用

Excalidraw Architect MCP

Name: Excalidraw Architect MCP MCP Server
Author: BV-Venky

作者 BV-Venky · BV-Venky/excalidraw-architect-mcp

用自然语言描述一个系统，得到一张整洁的 Excalidraw 图——自动布局，可直接放入文档。

Excalidraw Architect MCP 将自然语言架构描述转换为 Excalidraw .json（以及可选的 PNG，需要 cairo）。智能布局引擎负责间距和箭头路由，图表不会乱成一团。适合那些脑子里想的是方框和箭头，但又不愿意手动拖拽图形的工程师。

▶ 观看演示 📦 安装 💡 使用场景

为什么要用

核心特性

自动布局——无需手动摆放
支持泳道、集群和时序流程图
输出 Excalidraw .json（可编辑）和 PNG（需要可选的 cairo）
可配置分辨率倍数，导出清晰 PNG
本地运行——无 SaaS，无遥测

实时演示

实际使用效果

excalidraw-architect-mcp.replay ▶ 就绪

0/0

安装

选择你的客户端

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

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

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

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标，然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "excalidraw-architect-mcp",
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  ]
}

Continue 使用服务器对象数组，而非映射。

~/.config/zed/settings.json

{
  "context_servers": {
    "excalidraw-architect-mcp": {
      "command": {
        "path": "uvx",
        "args": [
          "excalidraw-architect-mcp"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add excalidraw-architect-mcp -- uvx excalidraw-architect-mcp

一行命令搞定。用 claude mcp list 验证，claude mcp remove 卸载。

使用场景

实战用法： Excalidraw Architect MCP

为设计文档生成架构图

👤 撰写设计文档的工程师 ⏱ ~10 min beginner

何时使用： 设计文档需要一张系统图，但不想在 Excalidraw 里花一个小时。

前置条件

Excalidraw（Web 版或桌面版） — excalidraw.com——粘贴 .json 输出即可

步骤

描述

Generate an Excalidraw diagram: API gateway → auth service → user service & orders service → Postgres. Add a Redis cache between API and user service.✓ 已复制

→ 返回 Excalidraw .json
细化

Add a sidecar logging agent on each service. Group services in a 'core' cluster.✓ 已复制

→ 更新后的图包含集群和 sidecar
导出

Render to PNG at 3x and save to /docs/arch.png.✓ 已复制

→ PNG 已写入

结果： 2 分钟生成可用于文档的架构图，而不是花 30 分钟。

注意事项

节点太多——图表变得不可读 — 先用更高抽象层次和集群分组

搭配使用： filesystem

将代码调用流程可视化

👤 阅读陌生代码的工程师 ⏱ ~5 min beginner

何时使用： 你已经单步追踪了一个请求——现在想画成图。

步骤

描述你看到的

Diagram a request flow: HTTP handler → validator → service → repo → DB. Show validation error path branching off.✓ 已复制

→ 时序风格的图表

结果： 一张胜过 200 行文字的 PR 描述配图。

注意事项

时序图和组件图混淆 — 明确说明——「时序图」或「组件图」

组合

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

excalidraw-architect-mcp + filesystem

将带版本号的图表保存到设计文档旁

Save the .excalidraw.json next to the doc and re-render to /docs/arch.png.✓ 已复制

excalidraw-architect-mcp + github

将图表附加到 PR 描述中

Generate the diagram and embed the PNG in PR #1234's description.✓ 已复制

工具

此 MCP 暴露的能力

工具	输入参数	何时调用	成本
generate_diagram	description, layout?	从 prompt 生成初始图表	free
modify_diagram	json, instruction	迭代修改	free
to_png	json, scale?	嵌入文档时使用	free

成本与限制

运行它的成本

API 配额: 本地运行——无配额
每次调用 Token 数: 300-2000
费用: 免费
提示: 通过 modify_diagram 迭代，而不是每次从头重新生成

安全

权限、密钥、影响范围

最小权限： Local file write

凭据存储： 无

数据出站： 无——完全本地运行

故障排查

常见错误与修复

PNG export fails

安装可选的 cairo 依赖：pip install excalidraw-architect-mcp[png]

Layout looks crowded

要求集群分组，或减少节点数量

Excalidraw refuses to import

JSON schema 可能有偏差；让 Claude 对照最新 Excalidraw schema 进行验证

替代方案