Excalidraw Mcp

excalidraw-mcp

使用 AI 生成 25 种以上精美的手绘图表——流程图、时序图、架构图、思维导图、ER 图、类图、状态图、时间线、饼图／柱状图／折线图／雷达图、看板、线框图、决策树等，并支持 Sugiyama 层次布局、CJK 支持，且 零学习门槛。

作者：Maaker.AI

展示

以下所有图片均通过单次工具调用生成，无需指定坐标，也无需手动布局。.excalidraw 源文件位于 docs/showcase/；将任意文件拖到 excalidraw.com 上即可继续编辑。

流程图（分支 + 循环 + CJK）	分层架构

安装

Claude Code（推荐）

claude mcp add excalidraw -- uvx maaker-excalidraw-mcp

Claude Desktop

添加到 MCP 配置（~/Library/Application Support/Claude/claude_desktop_config.json）：

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

opencode / Cursor / 任意 MCP 客户端

{
  "mcp": {
    "excalidraw": {
      "type": "local",
      "command": ["uvx", "maaker-excalidraw-mcp"],
      "enabled": true
    }
  }
}

（此处展示的是 opencode；Cursor 和其他客户端在其 MCP 配置格式中使用相同的 uvx maaker-excalidraw-mcp 命令。）

pip

pip install maaker-excalidraw-mcp

工具

工具	描述
create_flowchart	使用 Sugiyama 布局绘制流程图——支持分支、合并、循环和分组
create_architecture_diagram	绘制包含连接的分层架构图
create_sequence_diagram	绘制带有生命线和消息的 UML 时序图
create_class_diagram	绘制带有属性、方法和关系的 UML 类图
create_state_diagram	绘制包含初始状态和终止状态的 UML 状态机
create_er_diagram	绘制带有基数的实体关系图
create_mindmap	绘制树状思维导图，分支自动着色
create_timeline	绘制时间线／甘特图，并处理事件重叠
create_pie_chart	绘制带有标签和百分比的饼图
create_kanban_board	绘制包含列和卡片的看板
create_network_diagram	绘制包含类型化节点（服务器、DB 等）的网络拓扑图
create_quadrant_chart	绘制 2x2 优先级／定位矩阵
create_user_journey	绘制带有情绪指标的用户旅程图
create_wireframe	绘制带有设备边框的 UI 线框图
create_org_chart	绘制组织结构图（自上而下的层级结构）
create_swot_analysis	绘制采用颜色编码的 SWOT 分析 2x2 矩阵
create_table	绘制网格表格，列宽自动调整，行颜色交替显示
create_bar_chart	绘制纵向柱状图，柱条和标签自动缩放
create_line_chart	绘制支持多系列数据的折线图
create_radar_chart	绘制支持多系列叠加的雷达图／蜘蛛图
create_decision_tree	绘制采用菱形决策节点和矩形结果节点的决策树
import_mermaid	导入 Mermaid 语法（流程图、时序图、类图、状态图）
list_diagram_types	列出所有可用的图表类型
modify_diagram	在现有图表中添加／移除节点和连接
read_diagram	分析现有的 .excalidraw 文件
export_diagram	将图表导出为 SVG 格式

快速示例

流程图

只需告诉你的 AI 助手：

“创建一个流程图：用户请求 → 负载均衡器 → API 服务器 → 数据库”

AI 会调用 create_flowchart 并传入结构化数据，随后你会获得一个 .excalidraw 文件，其中包含：

• Sugiyama 层次布局 — 妥善处理分支、合并、循环和不连通的子图
• 根据文本内容自动计算方框大小
• 文本完美居中（包括中文/CJK 字符）
• 智能箭头布线，并正确绑定边缘
• 手绘风格，在文档和演示文稿中效果出色
• 4 种方向：LR（从左到右）、RL（从右到左）、TB（从上到下）、BT（从下到上）

架构图

“创建一个架构图，包含前端（React、Next.js）、后端（API 服务器、身份验证服务）和数据库（PostgreSQL、Redis）层”

生成按层级组织组件的分层图表，并自动调整大小、连接各层。

读取和修改

“读取 ./my-system.excalidraw 中的图表，并添加一个与 API 服务器连接的 ‘Cache’ 节点”

支持处理现有的 .excalidraw 文件 — 读取其结构、添加/删除节点、添加连接。

为什么选择 excalidraw-mcp？

与官方 Excalidraw MCP（excalidraw/excalidraw-mcp）对比

功能	官方 MCP	excalidraw-mcp
方式	原始 JSON — AI 手动放置每个元素	结构化输入 — 描述需求，即可生成图表
布局	AI 计算坐标	Sugiyama 层次自动布局
分支/合并	AI 必须自行确定位置	自动处理 — 由布局引擎完成
CJK 文本	不估算宽度	准确计算 CJK/混合文字宽度
文本居中	AI 必须计算 x/y 偏移量	在容器中自动居中
箭头绑定	AI 必须管理绑定	自动进行 fixedPoint + orbit 绑定
本地文件	无法读取/写入本地文件	完整支持读取、修改和保存
分发方式	远程 URL / .mcpb	uvx / pip（标准 Python）
Token 用量	需要调用 read_me 才能了解格式	内置格式知识

与基于 Mermaid 的工具对比

• 自由布局：不受 Mermaid 语法限制
• 手绘风格：原生 Excalidraw 风格，而非渲染后的代码块
• 可编辑输出：将 .excalidraw 文件拖到 excalidraw.com 继续编辑

工具参考

create_flowchart

Input:
  nodes: [{label: "Step 1", color?: "blue", shape?: "rectangle"}]
  edges: [{from: "Step 1", to: "Step 2", label?: "next"}]
  direction?: "LR" | "RL" | "TB" | "BT"  (default: "LR")
  title?: "My Flowchart"
  output_path?: "/path/to/output.excalidraw"

Output: Path to generated .excalidraw file

颜色：蓝色、绿色、紫色、黄色、红色、灰色、橙色、粉色

形状：rectangle（默认）、diamond（决策）、ellipse（开始/结束）

create_architecture_diagram

Input:
  layers: [{
    name: "Frontend",
    color?: "blue",
    components: [{label: "React"}, {label: "Next.js"}]
  }]
  connections?: [{from: "React", to: "API Server"}]
  output_path?: "/path/to/output.excalidraw"

Output: Path to generated .excalidraw file

modify_diagram

Input:
  file_path: "/path/to/existing.excalidraw"
  add_nodes?: [{label: "New Node", color?: "green", x?: 100, y?: 100}]
  remove_labels?: ["Old Node"]
  add_connections?: [{from: "A", to: "B"}]
  output_path?: "/path/to/output.excalidraw"

Output: Path to modified file

read_diagram

Input:
  file_path: "/path/to/diagram.excalidraw"

Output: Structured description (shapes, connections, colors)

export_diagram

Input:
  file_path: "/path/to/diagram.excalidraw"
  format: "svg"

Output: Path to exported SVG file

技术细节

Sugiyama 层次布局

使用 grandalf 库实现规范的有向图布局：

• 层分配：根据图的拓扑结构将节点放置到各层
• 交叉最小化：通过多轮优化减少边交叉
• 坐标分配：在各层中平衡节点位置
• 循环处理：检测循环图中的反馈边
• 不连通子图：自动并排放置

CJK 宽度估算

准确计算中英文混合文本的宽度：

字符类型	宽度（fontSize=20 时）
CJK 字符	每个字符约 22px
ASCII 字母/数字	每个字符约 11px
空格	约 5px

箭头绑定

使用 Excalidraw 的现代 fixedPoint + orbit 绑定方式（而非已弃用的 focus/gap 格式）：

{
  "startBinding": {
    "elementId": "box1",
    "fixedPoint": [1.0, 0.5001],
    "mode": "orbit"
  }
}

箭头会根据相对位置自动连接到正确的边缘。

开发

git clone https://github.com/maaker-ai/excalidraw-mcp.git
cd excalidraw-mcp
uv sync --dev
uv run pytest

许可证

MIT