Excalidraw Architect MCP

Excalidraw架构师MCP

   ](https://pepy.tech/projects/excalidraw-architect-mcp)

试图理解不熟悉和复杂的代码库是一场持续的斗争——管理认知超载，并试图想象一切是如何结合在一起的。

问题

当你开始使用代码库、设计新系统或记录现有架构时，可视化图表会在几秒钟内传达文本页面无法传达的信息。但现在的选择并不多。Mermaid图生成速度很快，但功能有限——你不能拖动节点来重新定位它，也不能直观地对组件进行分组。Excalidraw解决了这些问题，但当LLM试图直接生成Excalidraws时，它们会产生坐标幻觉——方框重叠，箭头缠结，最终你会手动修复图表。

解决方案

excalidraw架构师mcp 分离 *什么* 从 *哪里* -AI专注于结构，引擎处理像素数学。

LLM描述了组件和连接，MCP使用适当的图形布局算法处理布局、样式和渲染。50+技术（Kafka、PostgreSQL、Redis等）实现自动化，可以用自然语言迭代编辑图表（“在DB前面添加缓存”），并在Cursor/Woldsurf中完全离线运行-不需要API密钥。

• 每次都有完美的布局 -具有自适应间距的杉山算法；无重叠框
• 架构感知样式 -说“Kafka”，得到一个流式节点，而不是一个通用的矩形
• 与你的图表交谈 -使用自然语言在现有图表上添加、删除或重新连接组件
• 集线器节点可视化 -网关和负载均衡器会自动扩展以覆盖其连接的服务
• 导出为SVG和PNG -转换任何 .excalidraw 文件转换为便携式图像，无需浏览器

在行动中看到它

下面的每一帧都是由人工智能使用这种MCP（零手动定位）生成的。

电子商务平台架构

E-Commerce Platform Demo

支付处理流程

Payment Processing Flow Demo

用例

• 加入新的代码库 -将其指向微服务，无需阅读任何代码即可获得高级架构图。当您需要详细信息时，将其指向低级流程图的一组类。
• 头脑风暴和系统设计 -当你为一项新服务添加白板或讨论权衡时，让它在你前进的过程中可视化架构。通过说“在此处添加缓存”或“将Kafka换成SQS”进行迭代，而不是从头开始重新绘制。
• 保持活力的文档 -放下 .excalidraw 将文件保存到您的仓库中，并随着系统的发展用自然语言进行更新。不再有六次冲刺前的陈旧图表。

快速开始

安装

pip install excalidraw-architect-mcp

对于 PNG导出 支持（SVG开箱即用）：

pip install excalidraw-architect-mcp[png]

或者在不安装的情况下运行（需要 紫外线):

uvx excalidraw-architect-mcp

在IDE中配置MCP

光标 -添加到 .cursor/mcp.json:

{
  "mcpServers": {
    "excalidraw-architect": {
      "command": "excalidraw-architect-mcp",
      "transport": "stdio"
    }
  }
}

克劳德代码 -运行以下命令行：

claude mcp add-json excalidraw-architect '{"type":"stdio","command":"excalidraw-architect-mcp"}' --scope user

或手动添加到 .mcp.json 在项目根目录中：

{
  "mcpServers": {
    "excalidraw-architect": {
      "type": "stdio",
      "command": "excalidraw-architect-mcp"
    }
  }
}

风帆/其他IDE -相同的模式；指向 excalidraw-architect-mcp 通过stdio命令。

安装图表设计技能（推荐）

此回购包括 图表设计技巧 它教人工智能如何构建图表以获得最佳结果——节点计数限制、拓扑规则、边缘标签指南和常见模式。

对于Cursor用户：

mkdir -p ~/.cursor/skills/excalidraw-diagram-design && \
curl -o ~/.cursor/skills/excalidraw-diagram-design/SKILL.md \
  https://raw.githubusercontent.com/BV-Venky/excalidraw-architect-mcp/main/.skills/excalidraw-diagram-design/SKILL.md

对于其他IDE： 下载 技能.md 文件并将其添加到IDE的提示上下文或系统指令中。

AI将自动掌握该技能并在生成图表时应用。请随意修改规则以适应您的偏好——调整节点限制、添加自己的模式或调整样式指南。

关于图表复杂性的说明： 随着组件和连接数量的增长，图表不可避免地变得更难阅读——对于手工绘制的人来说也是如此，而不仅仅是自动化布局。为了获得最佳效果，请瞄准 6-15个节点 在架构图和 10-25个节点 在详细的流程中。如果你的系统更大，把它分成多个重点图，而不是把所有东西都塞进一个图中。

用它

自然地问你的AI IDE：

“创建此代码库的高级架构图”

为微服务系统创建一个架构图，其中包含API网关、Auth服务、用户服务、订单服务、PostgreSQL、Redis缓存和Kafka事件总线

“将此美人鱼图转换为excalidraw图”

“在高级体系结构图中向订单服务添加缓存层”

“将架构图导出为SVG”

“将图表导出为3倍分辨率的PNG格式”

AI使用关系图调用MCP工具。MCP处理布局、样式和输出。打开结果 .excalidraw 文件与 排除VS代码扩展 或将其拖入 excalidraw.com.

特性

自动布局引擎

使用杉山分层布局算法：

• 自适应层间隙 -间距根据边缘标签长度进行调整
• 轮毂节点拉伸 -网关/负载平衡器可扩展到跨连接的服务
• 障碍物感知边缘布线 -箭头围绕中间节点弯曲，而不是穿过它们
• 断开的组件堆叠 -单独的子图（例如，监控堆栈）被放置在没有重叠的地方

构件库

50多种具有自动视觉样式的技术映射：

有状态的编辑

图表元数据嵌入在 .excalidraw 文件。问AI：

“在现有关系图中的数据库前面添加Redis缓存”

MCP读取当前状态，应用修改，并使用适当的布局重新渲染。

美人鱼转换

已经有美人鱼流程图了吗？转换它：

“将此美人鱼图转换为Excalidraw”（粘贴您的美人鱼语法）

图像导出

导出任何 .excalidraw 将图表转换为可移植图像——无需浏览器、Excalidraw应用程序或Node.js。

• 可缩放矢量图形 -零额外依赖；使用纯Python渲染器，处理矩形、椭圆、菱形、文本（包括多行）和带箭头的箭头
• 便携式网络图形 -需要可选 cairosvg 包装(pip install excalidraw-architect-mcp[png])；支持可配置的分辨率倍数（默认2×）

“将架构图导出为SVG”

MCP工具

贡献

看 贡献.md 了解详情。

许可证

麻省理工学院-见 许可证.