1. 项目概述当Excalidraw遇见MCP架构图绘制的自动化革命如果你和我一样日常工作中需要频繁地绘制系统架构图、流程图那么你一定对Excalidraw不陌生。这款开源的、手绘风格的绘图工具以其简洁、直观和强大的协作能力成为了许多技术团队绘制技术文档的首选。但不知道你有没有遇到过这样的场景一个大型微服务系统几十个服务组件每次架构调整你都需要在Excalidraw的画布上一个一个地移动、连接、修改那些方框和箭头繁琐且容易出错。或者当你需要根据一份已经写好的架构描述文档比如Markdown或JSON来生成可视化图表时你不得不进行枯燥的“翻译”工作。BV-Venky/excalidraw-architect-mcp这个项目正是为了解决这些痛点而生的。它本质上是一个MCPModel Context Protocol服务器。MCP是Anthropic提出的一种协议旨在让AI助手如Claude能够安全、可控地访问外部工具、数据和功能。而这个项目就是让Claude这类AI助手拥有了直接操作Excalidraw来绘制架构图的能力。简单来说它架起了一座桥桥的一边是能用自然语言描述需求的你或者一份结构化的文档桥的另一边是能生成精美手绘风格架构图的Excalidraw。你不再需要手动拖拽元件只需要告诉AI“请帮我画一个包含API网关、用户服务、订单服务和MySQL数据库的微服务架构图用箭头标明数据流向。” AI通过这个MCP服务器就能在Excalidraw中自动创建出对应的图形。这不仅仅是“自动画图”更是一种思维和工作流的转变。它将架构设计从纯粹的手工劳动部分升级为了“声明式”的生成过程。对于架构师、技术布道者、文档工程师甚至是需要快速绘制技术示意图进行沟通的开发者来说这个工具的价值在于极大地提升了从想法到可视化的效率与一致性。2. 核心原理与技术栈拆解要理解这个项目如何运作我们需要拆解其核心的“输入-处理-输出”链条以及背后依赖的关键技术。2.1 MCPModel Context Protocol能力扩展的标准化接口MCP是这个项目的基石。你可以把它想象成AI世界的“USB协议”或“驱动模型”。在没有MCP之前每个AI应用如果想接入外部工具如搜索引擎、数据库、绘图工具都需要自行定义一套复杂的交互接口工作量大且不通用。MCP定义了一套标准化的方式服务器Server提供特定能力的服务端比如这里的excalidraw-architect-mcp。它向AI客户端宣告“嗨我具备这些功能Tools。”工具Tools服务器提供的具体能力。在这个项目中核心工具就是create_architecture_diagram。这个工具定义了输入参数如架构描述和输出结果。客户端Client通常是Claude Desktop、Cursor等集成了MCP客户端的AI应用。它负责加载MCP服务器并在用户与AI对话时在合适的时机调用服务器提供的工具。当你在Claude中提出画图需求时对话流程如下你的提示词被发送给Claude模型。Claude模型理解你的意图后发现需要调用一个外部工具来实现“画图”这个动作。Claude客户端检查已加载的MCP服务器发现excalidraw-architect-mcp提供了create_architecture_diagram工具。客户端将该工具的描述包括所需参数格式再次发送给Claude模型。Claude模型根据你的描述和工具参数要求结构化地生成一个调用请求例如一个符合特定格式的JSON对象其中包含了“组件列表”、“关系”等信息。客户端将这个结构化请求发送给excalidraw-architect-mcp服务器。服务器收到请求执行核心逻辑将JSON结构转换为Excalidraw的图形元素。服务器将生成结果通常是成功状态和可能生成的Excalidraw场景链接或数据返回给客户端。客户端将结果呈现给你。注意MCP的核心优势在于“结构化”。AI模型不再需要“幻想”出如何操作一个它看不见的GUI界面而是通过一个定义良好的接口进行精确调用这大大提高了复杂任务执行的可靠性和安全性。2.2 Excalidraw不仅是渲染器更是数据模型项目输出端是Excalidraw。这里需要理解两个层面Excalidraw 数据模型Excalidraw的所有图形矩形、菱形、箭头、文字等在底层都有一个对应的JSON表示。这个JSON结构定义了元素的位置、大小、样式、文本内容以及元素之间的绑定关系如箭头起点和终点绑定到某个矩形。excalidraw-architect-mcp的核心工作就是根据输入的架构描述程序化地生成这样一个符合Excalidraw数据模型规范的JSON对象。Excalidraw 渲染与交互生成的JSON数据可以直接导入Excalidraw的网页应用或自部署实例中瞬间渲染出完整的图表。由于生成的是标准的Excalidraw数据你仍然可以像手动绘制一样对自动生成的图表进行任意的二次调整、美化、添加批注实现了自动化与灵活性的完美结合。2.3 项目技术栈与架构逻辑基于以上原理我们可以推断出项目的技术实现大概如下语言大概率是Node.js (JavaScript/TypeScript)。因为MCP服务器生态目前主要由JS/TS驱动且便于处理JSON和与Web技术栈集成。核心库modelcontextprotocol/sdk用于构建MCP服务器的官方SDK处理与客户端的协议通信。可能包含excalidraw或excalidraw/excalidraw的相关类型定义包用于确保生成的JSON数据格式正确。express或类似框架如果服务器需要提供额外的HTTP端点例如预览生成的图表。核心逻辑流程解析输入接收来自MCP客户端的结构化请求JSON。请求中应包含架构的组件定义和关系定义。布局计算这是最具挑战性的部分。如何将一堆抽象的“服务”、“数据库”合理地排列在画布上避免重叠并使连接线清晰项目可能实现了简单的自动布局算法如分层布局 (Layered Layout)适用于流程图、依赖图。将组件按类型或层级如前端层、网关层、业务层、数据层排列在不同的水平线上。力导向布局 (Force-Directed Layout)模拟物理粒子间的引力和斥力让连接紧密的组件靠近不相关的组件远离最终达到一个平衡的分布。这对于关系复杂的网状架构很有效。网格布局 (Grid Layout)最简单的布局将组件按行列整齐排列。元素生成根据布局计算出的坐标为每个组件创建对应的Excalidraw图形元素如矩形表示服务圆柱体表示数据库椭圆表示外部系统。同时根据关系定义在对应的图形元素间创建箭头连线。样式应用应用统一的视觉样式如颜色编码所有数据库用蓝色所有服务用绿色字体大小边框粗细等以确保图表美观且一致。输出封装将生成的所有图形元素打包成一个完整的Excalidraw场景JSON通过MCP协议返回。这个JSON可以直接被Excalidraw应用加载。3. 从零开始环境配置与服务器部署实操了解了原理我们来看看如何亲手把这个工具用起来。假设你使用的是 Claude Desktop这是目前体验MCP功能最便捷的方式。3.1 前期准备安装基础依赖首先你需要确保你的开发环境已经就绪。安装 Node.js 和 npm这是运行该项目的前提。建议安装最新的LTS版本。你可以在终端运行node --version和npm --version来检查是否已安装。安装 Claude Desktop从Anthropic官网下载并安装适合你操作系统的Claude Desktop客户端。安装后你需要找到其配置目录。macOS:~/Library/Application Support/Claude/Windows:%APPDATA%\Claude\Linux:~/.config/Claude/3.2 获取与配置 MCP 服务器接下来我们需要获取excalidraw-architect-mcp服务器并告诉 Claude Desktop 如何使用它。克隆项目仓库git clone https://github.com/BV-Venky/excalidraw-architect-mcp.git cd excalidraw-architect-mcp安装项目依赖npm install这一步会安装modelcontextprotocol/sdk以及其他必要的依赖包。构建项目如果需要查看项目根目录是否有package.json文件并检查其中的scripts。通常会有build命令。如果是TypeScript项目你需要先编译。npm run build定位服务器入口文件通常MCP服务器的入口点会在package.json的main字段或bin字段中指明。常见入口文件如dist/index.js或src/server.js。记下这个文件的绝对路径例如/Users/yourname/projects/excalidraw-architect-mcp/dist/index.js。3.3 配置 Claude Desktop 集成这是最关键的一步将我们本地的MCP服务器与Claude Desktop关联起来。在之前找到的Claude配置目录下创建一个名为claude_desktop_config.json的文件如果不存在。编辑这个文件添加MCP服务器的配置。配置结构如下{ mcpServers: { excalidraw-architect: { command: node, args: [ /ABSOLUTE/PATH/TO/YOUR/excalidraw-architect-mcp/dist/index.js ], env: { // 可以在这里定义环境变量例如指定Excalidraw实例的URL // EXCALIDRAW_BASE_URL: https://excalidraw.com } } } }excalidraw-architect这是你给这个服务器起的名字可以自定义。command: node指定用Node.js运行时来执行服务器脚本。args数组中的第一个元素必须是上一步找到的入口文件的绝对路径。请务必替换成你的实际路径。env可选。如果需要连接到你自部署的Excalidraw可以在这里设置基础URL。实操心得路径中的空格和特殊字符可能导致启动失败。如果路径包含空格在Windows的args中可能需要使用双引号包裹整个路径或在JSON中进行正确的转义。最简单的方法是避免使用带空格的目录。保存配置文件并重启Claude Desktop。重启后Claude应该会自动加载你配置的MCP服务器。3.4 验证与测试重启Claude Desktop后如何验证配置成功打开Claude Desktop新建一个对话。在输入框里尝试问Claude“你现在可以使用哪些工具” 或者 “你能帮我画架构图吗”如果配置成功Claude的回复中应该会提及它有一个名为create_architecture_diagram或类似名称的工具可用。它可能会描述这个工具的功能。进行第一次测试。输入一个简单的请求“请使用你的架构图工具画一个简单的三层Web应用架构包含用户浏览器、Web服务器、应用服务器和数据库。”观察Claude的响应。它会思考然后表示正在调用工具。调用成功后它可能会返回一段文字说明并提供一个链接或一段Excalidraw数据。返回链接如果服务器配置了将生成的场景上传到某个服务如Excalidraw的实时协作房间则会返回一个.excalidraw.com的链接点击即可查看。返回数据更常见的是返回一个包含Excalidraw场景数据的JSON块。Claude可能会建议你“复制这段数据然后打开Excalidraw.com点击‘Load’按钮粘贴导入”。如果到了这一步恭喜你环境已经搭建成功4. 核心工具使用详解与架构描述语法配置好环境只是开始如何高效地使用这个工具关键在于学会如何向AI描述你的架构。虽然最终是AI模型Claude来理解你的自然语言并生成结构化请求但掌握一些“最佳实践”能让输出结果更符合你的预期。4.1create_architecture_diagram工具参数解析虽然我们是通过自然语言与Claude交互但了解底层工具期望的结构化数据格式有助于我们给出更精确的指令。根据项目README和MCP协议惯例该工具可能接受的参数结构如下{ components: [ { id: user_browser, type: browser, label: User Browser, description: End users web browser accessing the application. }, { id: nginx, type: gateway, label: NGINX Gateway, description: Reverse proxy and load balancer. }, { id: auth_service, type: service, label: Auth Service, description: Handles user authentication and authorization. } ], relationships: [ { source: user_browser, target: nginx, label: HTTPS Requests, type: http }, { source: nginx, target: auth_service, label: Proxy Pass, type: rpc } ], layout: layered, // 可选指定布局算法如 layered, force, grid title: Microservices Authentication Flow }components (数组)定义架构中的所有实体。id: 唯一标识符用于在关系中进行引用。type: 组件类型如service,database,queue,gateway,browser,external等。这个字段至关重要因为它决定了在Excalidraw中用什么图形来表示矩形、圆柱体、云朵等。项目内部应该有一个从type到图形样式的映射表。label: 显示在图形上的主要文本。description: 更详细的描述可能作为工具提示tooltip或注释显示。relationships (数组)定义组件之间的连接和交互。source/target: 引用components中的id。label: 连线上的文字说明如“调用”、“写入”、“发送消息”。type: 关系类型如http,grpc,kafka,database。可能影响连线的样式实线、虚线、箭头样式。layout (字符串可选)给布局算法一个提示。如果你对布局有特殊要求可以在指令中说明。title (字符串可选)图表的标题。4.2 高效的自然语言指令技巧你不需要每次都手动构造JSON。通过精心设计的自然语言指令你可以引导Claude生成高质量的结构化请求。基础指令模板“请使用架构图工具绘制一个[架构名称]图。包含以下组件[组件1名称]类型为[组件1类型]负责[组件1描述]。[组件2名称]类型为[组件2类型]负责[组件2描述]。 ... 组件之间的关系如下[组件A] 通过 [协议/方式] 调用/访问 [组件B]进行 [交互内容]。[组件C] 向 [组件D] 发送 [消息类型] 消息。 ... 请使用[分层/力导向]布局让图表清晰易读。”示例1微服务电商系统“请使用架构图工具为我绘制一个简化的电商微服务架构图。 组件包括用户浏览器 (类型: browser)API网关 (类型: gateway 使用 Kong)用户服务 (类型: service 管理用户信息)商品服务 (类型: service 管理商品目录)订单服务 (类型: service 处理下单流程)支付服务 (类型: service 对接支付渠道)Redis缓存 (类型: database 存储会话和热点数据)MySQL主数据库 (类型: database 持久化核心业务数据)消息队列RabbitMQ (类型: queue 用于服务间异步通信)关系用户浏览器向API网关发送HTTP请求。API网关将请求路由到对应的微服务用户、商品、订单、支付。用户服务和订单服务会读写MySQL。所有服务都从Redis读取缓存。订单创建后订单服务向支付服务发送支付请求消息通过RabbitMQ。支付完成后支付服务通知订单服务更新状态通过RabbitMQ。希望布局能清晰展示前后端分离和分层前端和网关一层微服务一层数据层一层。”示例2数据流水线“请绘制一个实时数据流水线架构图。 组件移动App (external)、数据采集服务器 (service)、Apache Kafka (queue)、流处理引擎Flink (service)、数据湖S3 (storage)、分析数据库ClickHouse (database)、BI仪表板 (browser)。 关系App发送日志到采集服务器服务器写入Kafka主题Flink消费Kafka进行实时计算结果分别写入S3和ClickHouseBI工具从ClickHouse读取数据展示。 布局使用从左到右的流式布局体现数据流向。”注意事项在描述关系时尽量使用主动语态和明确的动词“调用”、“写入”、“发送”、“轮询”这有助于AI准确理解数据流或控制流的方向。对于复杂的、多对多的关系可以分步骤描述或请求AI分图层绘制。4.3 样式与高级定制你可能希望生成的图表符合公司的配色规范或者对某些特定类型的组件使用特殊图标。这通常需要修改MCP服务器的源代码。定位样式配置在项目源代码中寻找负责将component.type映射为Excalidraw图形元素的函数或文件。这里会定义每种type对应的图形形状、默认填充色、边框色、字体等。自定义映射你可以修改这个映射关系。例如将所有type: “database”的组件颜色从蓝色改为青色或者为type: “kubernetes”添加一个特殊的图标如果Excalidraw支持嵌入自定义SVG。布局算法调参如果项目使用的是力导向布局你可能会找到诸如linkDistance连线理想长度、nodeStrength节点间作用力等参数。调整这些参数可以改变图表的疏密和形状。// 伪代码示例在服务器源码中可能存在的样式映射 const componentStyleMap { service: { shape: ‘rectangle’, backgroundColor: ‘#d4edda’, // 浅绿 strokeColor: ‘#155724’, // 深绿 width: 180, height: 80 }, database: { shape: ‘ellipse’, backgroundColor: ‘#d1ecf1’, // 浅蓝 strokeColor: ‘#0c5460’, width: 160, height: 100 }, queue: { shape: ‘diamond’, backgroundColor: ‘#f8d7da’, // 浅红 strokeColor: ‘#721c24’, width: 120, height: 120 } // ... 其他类型 };实操心得在深入定制前最好先使用默认配置生成几次图表了解其默认风格和布局效果。定制样式后记得重新构建 (npm run build) 并重启Claude Desktop以使更改生效。这是一个进阶操作需要对项目代码结构有一定了解。5. 实战工作流从设计文档到架构图的自动化掌握了基本用法后我们可以将这个工具整合到更实际的工作流中实现更高程度的自动化。5.1 场景一基于Markdown文档自动生成图表许多技术设计文档是用Markdown写的其中可能用文字描述了系统架构。我们可以结合简单的脚本将半结构化的Markdown描述转换为AI能更好理解的提示词。假设你的设计文档architecture.md中有如下段落## 系统组件 - **前端应用 (Frontend)**: Vue.js SPA 运行在用户浏览器中。 - **API网关 (API Gateway)**: 基于Spring Cloud Gateway负责路由、鉴权。 - **用户服务 (User Service)**: Spring Boot微服务管理用户数据。 - **订单服务 (Order Service)**: Spring Boot微服务处理订单生命周期。 - **商品服务 (Product Service)**: Spring Boot微服务提供商品信息。 - **MySQL**: 主关系型数据库存储用户、订单、商品信息。 - **Redis**: 缓存层存储会话和热点商品数据。 ## 数据流 1. 用户从前端发起请求至API网关。 2. 网关根据路径路由到对应微服务。 3. 各微服务根据需要查询或更新MySQL。 4. 商品服务在读取商品信息时优先查询Redis缓存未命中则查MySQL并回填。你可以编写一个简单的脚本Python/Node.js均可提取关键名词和动词并格式化为一个更清晰的提示词# 这是一个概念性示例实际解析Markdown需要更复杂的逻辑 import re # 读取文档内容 with open(‘architecture.md‘, ‘r‘) as f: content f.read() # 简单提取组件这里用正则示例实际可用更专业的Markdown解析器 components_section re.search(r‘## 系统组件\n(.*?)\n##‘, content, re.DOTALL) if components_section: component_lines components_section.group(1).strip().split(‘\n‘) components [] for line in component_lines: if ‘**‘ in line: # 提取加粗文本作为label括号内文本可能包含类型提示 match re.search(r‘\*\*(.*?)\*\*‘, line) if match: label match.group(1) type_hint ‘service‘ if ‘服务‘ in label else ‘database‘ if ‘MySQL‘ in label or ‘Redis‘ in label else ‘browser‘ if ‘前端‘ in label else ‘gateway‘ components.append(f‘- {label} (类型: {type_hint})‘) # 构建最终提示词 prompt “请使用架构图工具根据以下描述绘制架构图\n\n主要组件\n” prompt ‘\n‘.join(components) prompt “\n\n数据流描述\n[将数据流部分粘贴到这里]” print(prompt)然后将这个生成的提示词直接粘贴到Claude中执行。这比手动重述要高效得多。5.2 场景二与CI/CD集成可视化部署拓扑在基础设施即代码IaC环境中你的Terraform或CloudFormation模板定义了整个云资源拓扑。你可以编写一个脚本在CI/CD流水线中解析这些模板的输出来生成架构图。提取资源信息在terraform apply或aws cloudformation describe-stacks之后获取生成的资源列表及其类型如aws_lambda_function,aws_api_gateway_rest_api,aws_dynamodb_table。映射与转换将云资源类型映射到架构图工具的component.type。例如aws_lambda_function-serviceaws_api_gateway_*-gatewayaws_dynamodb_table-databaseaws_s3_bucket-storageaws_sqs_queue-queue推断关系通过分析资源间的依赖关系如Lambda函数的执行角色、环境变量引用的其他资源ARN推断出组件间的关系。调用MCP服务器你的CI/CD脚本可以直接通过HTTP如果MCP服务器暴露了HTTP端点或模拟MCP客户端的方式调用create_architecture_diagram工具传入结构化数据。保存与发布将生成的Excalidraw图表保存为JSON文件或图片作为部署文档的一部分上传到Wiki或文档站点。这样每次基础设施变更后你都能自动获得一份最新的、可视化的架构拓扑图对于审计和团队沟通价值巨大。5.3 场景三架构评审与迭代在架构设计评审会议中excalidraw-architect-mcp可以作为一个实时协作和迭代的工具。快速原型在讨论初期用自然语言快速生成一个基础架构草图作为讨论的视觉锚点。实时修改当讨论中提出“这里是否需要加一个缓存”时你可以直接对AI说“在用户服务和MySQL之间增加一个Redis缓存组件类型是database。用户服务先读缓存未命中再读MySQL。” AI调用工具后图表即刻更新。版本对比将不同讨论阶段的架构图导出保存可以直观地对比架构的演进过程。生成文档定稿后的架构图可以直接从Excalidraw导出为PNG、SVG或保存场景链接嵌入到最终的设计文档中。这个工作流将架构设计从静态的、事后的绘图转变为动态的、贯穿讨论始终的活文档。6. 常见问题排查与性能调优在实际使用中你可能会遇到一些问题。以下是一些常见情况的排查思路和解决建议。6.1 服务器连接与调用失败问题现象可能原因排查步骤与解决方案Claude提示“未找到可用工具”或完全未提及绘图工具。1. MCP服务器配置错误。2. Claude Desktop未正确加载配置。3. 服务器启动失败。1.检查配置文件确认claude_desktop_config.json路径正确JSON格式无误特别是args中的文件路径存在且可执行。2.重启Claude完全退出Claude Desktop并重新启动。3.查看日志Claude Desktop通常有日志文件在配置目录的Logs子文件夹内。查看是否有加载MCP服务器时的错误信息。4.手动测试服务器在终端中使用配置中的命令和参数直接运行服务器入口文件如node /path/to/index.js看是否有错误输出。确保所有依赖已安装(npm install)。Claude识别到工具但调用时超时或返回错误。1. 服务器脚本存在运行时错误。2. 工具参数不符合预期导致服务器处理异常。3. 网络或权限问题。1.检查服务器日志如果服务器在终端运行查看调用时的错误堆栈。2.简化请求用一个最简单的架构描述进行测试排除复杂描述导致的问题。3.检查参数映射确认你描述的组件type是服务器支持的。查看项目文档或源码中的类型映射列表。6.2 生成的图表不符合预期问题现象可能原因排查步骤与解决方案组件图形不对如数据库显示为方框。组件type未正确识别或映射。在指令中明确指定类型如“一个MySQL数据库类型为database”。检查服务器源码的componentStyleMap使用已定义的类型关键词。布局混乱组件重叠严重。1. 组件过多布局算法达到局部最优而非全局最优。2. 布局参数不适合当前图形。1.尝试不同布局在指令中明确指定layout: “force”或layout: “layered”看哪种效果更好。2.分模块绘制对于大型系统不要试图在一张图中显示所有细节。可以分别绘制“整体上下文图”、“核心服务详图”、“数据存储图”。3.手动调整利用Excalidraw的优势自动生成后手动拖动调整布局这是人机协作的常态。连线错乱或缺失。AI未能正确解析组件间关系。1.关系描述更清晰使用“A调用B”、“A向B发送消息”、“A从B读取数据”等明确句式。确保关系两端的组件ID或标签在你的描述中完全一致。2.分步生成先让AI生成只有组件的图确认组件都正确后再通过新的对话基于现有图添加关系。图表过于拥挤文字看不清。画布大小或元素默认尺寸不合适。1.指令控制尝试在指令中要求“使用更大的画布”或“让组件之间的间距大一些”。虽然AI不一定能精确控制但可能影响其传递给布局算法的参数。2.事后调整在Excalidraw中全选所有元素使用缩放工具统一调整大小或调整画布尺寸。6.3 性能与扩展性考量处理大型架构当组件数量超过50甚至100个时自动布局的计算可能变慢且结果可能难以阅读。建议遵循“分而治之”原则按子系统、功能模块或层级拆分绘制多个图表然后用一个高层次的“系统全景图”来链接它们。自定义图形如果需要使用Excalidraw库中没有的特殊图标如特定云服务商的Logo目前的MCP服务器可能不支持。变通方案可以先生成基础图表然后在Excalidraw中手动替换或添加自定义图形元素作为库Library的一部分。离线使用默认可能依赖excalidraw.com。如果你需要在完全内网环境使用可以考虑自部署Excalidraw后端并修改MCP服务器的配置指向你的内网地址。这需要你对Excalidraw的部署有一定了解。一个关键的实操心得将excalidraw-architect-mcp视为一个“架构草图生成器”而非“最终成品图绘制工具”。它的最大价值在于快速将思想可视化打破讨论初期的空白。生成的草图几乎总是需要一些手动调整来达到完美的表达效果。接受这种“AI生成 人工润色”的工作模式才能最大化其效率提升。
基于MCP协议与Excalidraw实现架构图自动化绘制
发布时间:2026/5/16 5:49:12
1. 项目概述当Excalidraw遇见MCP架构图绘制的自动化革命如果你和我一样日常工作中需要频繁地绘制系统架构图、流程图那么你一定对Excalidraw不陌生。这款开源的、手绘风格的绘图工具以其简洁、直观和强大的协作能力成为了许多技术团队绘制技术文档的首选。但不知道你有没有遇到过这样的场景一个大型微服务系统几十个服务组件每次架构调整你都需要在Excalidraw的画布上一个一个地移动、连接、修改那些方框和箭头繁琐且容易出错。或者当你需要根据一份已经写好的架构描述文档比如Markdown或JSON来生成可视化图表时你不得不进行枯燥的“翻译”工作。BV-Venky/excalidraw-architect-mcp这个项目正是为了解决这些痛点而生的。它本质上是一个MCPModel Context Protocol服务器。MCP是Anthropic提出的一种协议旨在让AI助手如Claude能够安全、可控地访问外部工具、数据和功能。而这个项目就是让Claude这类AI助手拥有了直接操作Excalidraw来绘制架构图的能力。简单来说它架起了一座桥桥的一边是能用自然语言描述需求的你或者一份结构化的文档桥的另一边是能生成精美手绘风格架构图的Excalidraw。你不再需要手动拖拽元件只需要告诉AI“请帮我画一个包含API网关、用户服务、订单服务和MySQL数据库的微服务架构图用箭头标明数据流向。” AI通过这个MCP服务器就能在Excalidraw中自动创建出对应的图形。这不仅仅是“自动画图”更是一种思维和工作流的转变。它将架构设计从纯粹的手工劳动部分升级为了“声明式”的生成过程。对于架构师、技术布道者、文档工程师甚至是需要快速绘制技术示意图进行沟通的开发者来说这个工具的价值在于极大地提升了从想法到可视化的效率与一致性。2. 核心原理与技术栈拆解要理解这个项目如何运作我们需要拆解其核心的“输入-处理-输出”链条以及背后依赖的关键技术。2.1 MCPModel Context Protocol能力扩展的标准化接口MCP是这个项目的基石。你可以把它想象成AI世界的“USB协议”或“驱动模型”。在没有MCP之前每个AI应用如果想接入外部工具如搜索引擎、数据库、绘图工具都需要自行定义一套复杂的交互接口工作量大且不通用。MCP定义了一套标准化的方式服务器Server提供特定能力的服务端比如这里的excalidraw-architect-mcp。它向AI客户端宣告“嗨我具备这些功能Tools。”工具Tools服务器提供的具体能力。在这个项目中核心工具就是create_architecture_diagram。这个工具定义了输入参数如架构描述和输出结果。客户端Client通常是Claude Desktop、Cursor等集成了MCP客户端的AI应用。它负责加载MCP服务器并在用户与AI对话时在合适的时机调用服务器提供的工具。当你在Claude中提出画图需求时对话流程如下你的提示词被发送给Claude模型。Claude模型理解你的意图后发现需要调用一个外部工具来实现“画图”这个动作。Claude客户端检查已加载的MCP服务器发现excalidraw-architect-mcp提供了create_architecture_diagram工具。客户端将该工具的描述包括所需参数格式再次发送给Claude模型。Claude模型根据你的描述和工具参数要求结构化地生成一个调用请求例如一个符合特定格式的JSON对象其中包含了“组件列表”、“关系”等信息。客户端将这个结构化请求发送给excalidraw-architect-mcp服务器。服务器收到请求执行核心逻辑将JSON结构转换为Excalidraw的图形元素。服务器将生成结果通常是成功状态和可能生成的Excalidraw场景链接或数据返回给客户端。客户端将结果呈现给你。注意MCP的核心优势在于“结构化”。AI模型不再需要“幻想”出如何操作一个它看不见的GUI界面而是通过一个定义良好的接口进行精确调用这大大提高了复杂任务执行的可靠性和安全性。2.2 Excalidraw不仅是渲染器更是数据模型项目输出端是Excalidraw。这里需要理解两个层面Excalidraw 数据模型Excalidraw的所有图形矩形、菱形、箭头、文字等在底层都有一个对应的JSON表示。这个JSON结构定义了元素的位置、大小、样式、文本内容以及元素之间的绑定关系如箭头起点和终点绑定到某个矩形。excalidraw-architect-mcp的核心工作就是根据输入的架构描述程序化地生成这样一个符合Excalidraw数据模型规范的JSON对象。Excalidraw 渲染与交互生成的JSON数据可以直接导入Excalidraw的网页应用或自部署实例中瞬间渲染出完整的图表。由于生成的是标准的Excalidraw数据你仍然可以像手动绘制一样对自动生成的图表进行任意的二次调整、美化、添加批注实现了自动化与灵活性的完美结合。2.3 项目技术栈与架构逻辑基于以上原理我们可以推断出项目的技术实现大概如下语言大概率是Node.js (JavaScript/TypeScript)。因为MCP服务器生态目前主要由JS/TS驱动且便于处理JSON和与Web技术栈集成。核心库modelcontextprotocol/sdk用于构建MCP服务器的官方SDK处理与客户端的协议通信。可能包含excalidraw或excalidraw/excalidraw的相关类型定义包用于确保生成的JSON数据格式正确。express或类似框架如果服务器需要提供额外的HTTP端点例如预览生成的图表。核心逻辑流程解析输入接收来自MCP客户端的结构化请求JSON。请求中应包含架构的组件定义和关系定义。布局计算这是最具挑战性的部分。如何将一堆抽象的“服务”、“数据库”合理地排列在画布上避免重叠并使连接线清晰项目可能实现了简单的自动布局算法如分层布局 (Layered Layout)适用于流程图、依赖图。将组件按类型或层级如前端层、网关层、业务层、数据层排列在不同的水平线上。力导向布局 (Force-Directed Layout)模拟物理粒子间的引力和斥力让连接紧密的组件靠近不相关的组件远离最终达到一个平衡的分布。这对于关系复杂的网状架构很有效。网格布局 (Grid Layout)最简单的布局将组件按行列整齐排列。元素生成根据布局计算出的坐标为每个组件创建对应的Excalidraw图形元素如矩形表示服务圆柱体表示数据库椭圆表示外部系统。同时根据关系定义在对应的图形元素间创建箭头连线。样式应用应用统一的视觉样式如颜色编码所有数据库用蓝色所有服务用绿色字体大小边框粗细等以确保图表美观且一致。输出封装将生成的所有图形元素打包成一个完整的Excalidraw场景JSON通过MCP协议返回。这个JSON可以直接被Excalidraw应用加载。3. 从零开始环境配置与服务器部署实操了解了原理我们来看看如何亲手把这个工具用起来。假设你使用的是 Claude Desktop这是目前体验MCP功能最便捷的方式。3.1 前期准备安装基础依赖首先你需要确保你的开发环境已经就绪。安装 Node.js 和 npm这是运行该项目的前提。建议安装最新的LTS版本。你可以在终端运行node --version和npm --version来检查是否已安装。安装 Claude Desktop从Anthropic官网下载并安装适合你操作系统的Claude Desktop客户端。安装后你需要找到其配置目录。macOS:~/Library/Application Support/Claude/Windows:%APPDATA%\Claude\Linux:~/.config/Claude/3.2 获取与配置 MCP 服务器接下来我们需要获取excalidraw-architect-mcp服务器并告诉 Claude Desktop 如何使用它。克隆项目仓库git clone https://github.com/BV-Venky/excalidraw-architect-mcp.git cd excalidraw-architect-mcp安装项目依赖npm install这一步会安装modelcontextprotocol/sdk以及其他必要的依赖包。构建项目如果需要查看项目根目录是否有package.json文件并检查其中的scripts。通常会有build命令。如果是TypeScript项目你需要先编译。npm run build定位服务器入口文件通常MCP服务器的入口点会在package.json的main字段或bin字段中指明。常见入口文件如dist/index.js或src/server.js。记下这个文件的绝对路径例如/Users/yourname/projects/excalidraw-architect-mcp/dist/index.js。3.3 配置 Claude Desktop 集成这是最关键的一步将我们本地的MCP服务器与Claude Desktop关联起来。在之前找到的Claude配置目录下创建一个名为claude_desktop_config.json的文件如果不存在。编辑这个文件添加MCP服务器的配置。配置结构如下{ mcpServers: { excalidraw-architect: { command: node, args: [ /ABSOLUTE/PATH/TO/YOUR/excalidraw-architect-mcp/dist/index.js ], env: { // 可以在这里定义环境变量例如指定Excalidraw实例的URL // EXCALIDRAW_BASE_URL: https://excalidraw.com } } } }excalidraw-architect这是你给这个服务器起的名字可以自定义。command: node指定用Node.js运行时来执行服务器脚本。args数组中的第一个元素必须是上一步找到的入口文件的绝对路径。请务必替换成你的实际路径。env可选。如果需要连接到你自部署的Excalidraw可以在这里设置基础URL。实操心得路径中的空格和特殊字符可能导致启动失败。如果路径包含空格在Windows的args中可能需要使用双引号包裹整个路径或在JSON中进行正确的转义。最简单的方法是避免使用带空格的目录。保存配置文件并重启Claude Desktop。重启后Claude应该会自动加载你配置的MCP服务器。3.4 验证与测试重启Claude Desktop后如何验证配置成功打开Claude Desktop新建一个对话。在输入框里尝试问Claude“你现在可以使用哪些工具” 或者 “你能帮我画架构图吗”如果配置成功Claude的回复中应该会提及它有一个名为create_architecture_diagram或类似名称的工具可用。它可能会描述这个工具的功能。进行第一次测试。输入一个简单的请求“请使用你的架构图工具画一个简单的三层Web应用架构包含用户浏览器、Web服务器、应用服务器和数据库。”观察Claude的响应。它会思考然后表示正在调用工具。调用成功后它可能会返回一段文字说明并提供一个链接或一段Excalidraw数据。返回链接如果服务器配置了将生成的场景上传到某个服务如Excalidraw的实时协作房间则会返回一个.excalidraw.com的链接点击即可查看。返回数据更常见的是返回一个包含Excalidraw场景数据的JSON块。Claude可能会建议你“复制这段数据然后打开Excalidraw.com点击‘Load’按钮粘贴导入”。如果到了这一步恭喜你环境已经搭建成功4. 核心工具使用详解与架构描述语法配置好环境只是开始如何高效地使用这个工具关键在于学会如何向AI描述你的架构。虽然最终是AI模型Claude来理解你的自然语言并生成结构化请求但掌握一些“最佳实践”能让输出结果更符合你的预期。4.1create_architecture_diagram工具参数解析虽然我们是通过自然语言与Claude交互但了解底层工具期望的结构化数据格式有助于我们给出更精确的指令。根据项目README和MCP协议惯例该工具可能接受的参数结构如下{ components: [ { id: user_browser, type: browser, label: User Browser, description: End users web browser accessing the application. }, { id: nginx, type: gateway, label: NGINX Gateway, description: Reverse proxy and load balancer. }, { id: auth_service, type: service, label: Auth Service, description: Handles user authentication and authorization. } ], relationships: [ { source: user_browser, target: nginx, label: HTTPS Requests, type: http }, { source: nginx, target: auth_service, label: Proxy Pass, type: rpc } ], layout: layered, // 可选指定布局算法如 layered, force, grid title: Microservices Authentication Flow }components (数组)定义架构中的所有实体。id: 唯一标识符用于在关系中进行引用。type: 组件类型如service,database,queue,gateway,browser,external等。这个字段至关重要因为它决定了在Excalidraw中用什么图形来表示矩形、圆柱体、云朵等。项目内部应该有一个从type到图形样式的映射表。label: 显示在图形上的主要文本。description: 更详细的描述可能作为工具提示tooltip或注释显示。relationships (数组)定义组件之间的连接和交互。source/target: 引用components中的id。label: 连线上的文字说明如“调用”、“写入”、“发送消息”。type: 关系类型如http,grpc,kafka,database。可能影响连线的样式实线、虚线、箭头样式。layout (字符串可选)给布局算法一个提示。如果你对布局有特殊要求可以在指令中说明。title (字符串可选)图表的标题。4.2 高效的自然语言指令技巧你不需要每次都手动构造JSON。通过精心设计的自然语言指令你可以引导Claude生成高质量的结构化请求。基础指令模板“请使用架构图工具绘制一个[架构名称]图。包含以下组件[组件1名称]类型为[组件1类型]负责[组件1描述]。[组件2名称]类型为[组件2类型]负责[组件2描述]。 ... 组件之间的关系如下[组件A] 通过 [协议/方式] 调用/访问 [组件B]进行 [交互内容]。[组件C] 向 [组件D] 发送 [消息类型] 消息。 ... 请使用[分层/力导向]布局让图表清晰易读。”示例1微服务电商系统“请使用架构图工具为我绘制一个简化的电商微服务架构图。 组件包括用户浏览器 (类型: browser)API网关 (类型: gateway 使用 Kong)用户服务 (类型: service 管理用户信息)商品服务 (类型: service 管理商品目录)订单服务 (类型: service 处理下单流程)支付服务 (类型: service 对接支付渠道)Redis缓存 (类型: database 存储会话和热点数据)MySQL主数据库 (类型: database 持久化核心业务数据)消息队列RabbitMQ (类型: queue 用于服务间异步通信)关系用户浏览器向API网关发送HTTP请求。API网关将请求路由到对应的微服务用户、商品、订单、支付。用户服务和订单服务会读写MySQL。所有服务都从Redis读取缓存。订单创建后订单服务向支付服务发送支付请求消息通过RabbitMQ。支付完成后支付服务通知订单服务更新状态通过RabbitMQ。希望布局能清晰展示前后端分离和分层前端和网关一层微服务一层数据层一层。”示例2数据流水线“请绘制一个实时数据流水线架构图。 组件移动App (external)、数据采集服务器 (service)、Apache Kafka (queue)、流处理引擎Flink (service)、数据湖S3 (storage)、分析数据库ClickHouse (database)、BI仪表板 (browser)。 关系App发送日志到采集服务器服务器写入Kafka主题Flink消费Kafka进行实时计算结果分别写入S3和ClickHouseBI工具从ClickHouse读取数据展示。 布局使用从左到右的流式布局体现数据流向。”注意事项在描述关系时尽量使用主动语态和明确的动词“调用”、“写入”、“发送”、“轮询”这有助于AI准确理解数据流或控制流的方向。对于复杂的、多对多的关系可以分步骤描述或请求AI分图层绘制。4.3 样式与高级定制你可能希望生成的图表符合公司的配色规范或者对某些特定类型的组件使用特殊图标。这通常需要修改MCP服务器的源代码。定位样式配置在项目源代码中寻找负责将component.type映射为Excalidraw图形元素的函数或文件。这里会定义每种type对应的图形形状、默认填充色、边框色、字体等。自定义映射你可以修改这个映射关系。例如将所有type: “database”的组件颜色从蓝色改为青色或者为type: “kubernetes”添加一个特殊的图标如果Excalidraw支持嵌入自定义SVG。布局算法调参如果项目使用的是力导向布局你可能会找到诸如linkDistance连线理想长度、nodeStrength节点间作用力等参数。调整这些参数可以改变图表的疏密和形状。// 伪代码示例在服务器源码中可能存在的样式映射 const componentStyleMap { service: { shape: ‘rectangle’, backgroundColor: ‘#d4edda’, // 浅绿 strokeColor: ‘#155724’, // 深绿 width: 180, height: 80 }, database: { shape: ‘ellipse’, backgroundColor: ‘#d1ecf1’, // 浅蓝 strokeColor: ‘#0c5460’, width: 160, height: 100 }, queue: { shape: ‘diamond’, backgroundColor: ‘#f8d7da’, // 浅红 strokeColor: ‘#721c24’, width: 120, height: 120 } // ... 其他类型 };实操心得在深入定制前最好先使用默认配置生成几次图表了解其默认风格和布局效果。定制样式后记得重新构建 (npm run build) 并重启Claude Desktop以使更改生效。这是一个进阶操作需要对项目代码结构有一定了解。5. 实战工作流从设计文档到架构图的自动化掌握了基本用法后我们可以将这个工具整合到更实际的工作流中实现更高程度的自动化。5.1 场景一基于Markdown文档自动生成图表许多技术设计文档是用Markdown写的其中可能用文字描述了系统架构。我们可以结合简单的脚本将半结构化的Markdown描述转换为AI能更好理解的提示词。假设你的设计文档architecture.md中有如下段落## 系统组件 - **前端应用 (Frontend)**: Vue.js SPA 运行在用户浏览器中。 - **API网关 (API Gateway)**: 基于Spring Cloud Gateway负责路由、鉴权。 - **用户服务 (User Service)**: Spring Boot微服务管理用户数据。 - **订单服务 (Order Service)**: Spring Boot微服务处理订单生命周期。 - **商品服务 (Product Service)**: Spring Boot微服务提供商品信息。 - **MySQL**: 主关系型数据库存储用户、订单、商品信息。 - **Redis**: 缓存层存储会话和热点商品数据。 ## 数据流 1. 用户从前端发起请求至API网关。 2. 网关根据路径路由到对应微服务。 3. 各微服务根据需要查询或更新MySQL。 4. 商品服务在读取商品信息时优先查询Redis缓存未命中则查MySQL并回填。你可以编写一个简单的脚本Python/Node.js均可提取关键名词和动词并格式化为一个更清晰的提示词# 这是一个概念性示例实际解析Markdown需要更复杂的逻辑 import re # 读取文档内容 with open(‘architecture.md‘, ‘r‘) as f: content f.read() # 简单提取组件这里用正则示例实际可用更专业的Markdown解析器 components_section re.search(r‘## 系统组件\n(.*?)\n##‘, content, re.DOTALL) if components_section: component_lines components_section.group(1).strip().split(‘\n‘) components [] for line in component_lines: if ‘**‘ in line: # 提取加粗文本作为label括号内文本可能包含类型提示 match re.search(r‘\*\*(.*?)\*\*‘, line) if match: label match.group(1) type_hint ‘service‘ if ‘服务‘ in label else ‘database‘ if ‘MySQL‘ in label or ‘Redis‘ in label else ‘browser‘ if ‘前端‘ in label else ‘gateway‘ components.append(f‘- {label} (类型: {type_hint})‘) # 构建最终提示词 prompt “请使用架构图工具根据以下描述绘制架构图\n\n主要组件\n” prompt ‘\n‘.join(components) prompt “\n\n数据流描述\n[将数据流部分粘贴到这里]” print(prompt)然后将这个生成的提示词直接粘贴到Claude中执行。这比手动重述要高效得多。5.2 场景二与CI/CD集成可视化部署拓扑在基础设施即代码IaC环境中你的Terraform或CloudFormation模板定义了整个云资源拓扑。你可以编写一个脚本在CI/CD流水线中解析这些模板的输出来生成架构图。提取资源信息在terraform apply或aws cloudformation describe-stacks之后获取生成的资源列表及其类型如aws_lambda_function,aws_api_gateway_rest_api,aws_dynamodb_table。映射与转换将云资源类型映射到架构图工具的component.type。例如aws_lambda_function-serviceaws_api_gateway_*-gatewayaws_dynamodb_table-databaseaws_s3_bucket-storageaws_sqs_queue-queue推断关系通过分析资源间的依赖关系如Lambda函数的执行角色、环境变量引用的其他资源ARN推断出组件间的关系。调用MCP服务器你的CI/CD脚本可以直接通过HTTP如果MCP服务器暴露了HTTP端点或模拟MCP客户端的方式调用create_architecture_diagram工具传入结构化数据。保存与发布将生成的Excalidraw图表保存为JSON文件或图片作为部署文档的一部分上传到Wiki或文档站点。这样每次基础设施变更后你都能自动获得一份最新的、可视化的架构拓扑图对于审计和团队沟通价值巨大。5.3 场景三架构评审与迭代在架构设计评审会议中excalidraw-architect-mcp可以作为一个实时协作和迭代的工具。快速原型在讨论初期用自然语言快速生成一个基础架构草图作为讨论的视觉锚点。实时修改当讨论中提出“这里是否需要加一个缓存”时你可以直接对AI说“在用户服务和MySQL之间增加一个Redis缓存组件类型是database。用户服务先读缓存未命中再读MySQL。” AI调用工具后图表即刻更新。版本对比将不同讨论阶段的架构图导出保存可以直观地对比架构的演进过程。生成文档定稿后的架构图可以直接从Excalidraw导出为PNG、SVG或保存场景链接嵌入到最终的设计文档中。这个工作流将架构设计从静态的、事后的绘图转变为动态的、贯穿讨论始终的活文档。6. 常见问题排查与性能调优在实际使用中你可能会遇到一些问题。以下是一些常见情况的排查思路和解决建议。6.1 服务器连接与调用失败问题现象可能原因排查步骤与解决方案Claude提示“未找到可用工具”或完全未提及绘图工具。1. MCP服务器配置错误。2. Claude Desktop未正确加载配置。3. 服务器启动失败。1.检查配置文件确认claude_desktop_config.json路径正确JSON格式无误特别是args中的文件路径存在且可执行。2.重启Claude完全退出Claude Desktop并重新启动。3.查看日志Claude Desktop通常有日志文件在配置目录的Logs子文件夹内。查看是否有加载MCP服务器时的错误信息。4.手动测试服务器在终端中使用配置中的命令和参数直接运行服务器入口文件如node /path/to/index.js看是否有错误输出。确保所有依赖已安装(npm install)。Claude识别到工具但调用时超时或返回错误。1. 服务器脚本存在运行时错误。2. 工具参数不符合预期导致服务器处理异常。3. 网络或权限问题。1.检查服务器日志如果服务器在终端运行查看调用时的错误堆栈。2.简化请求用一个最简单的架构描述进行测试排除复杂描述导致的问题。3.检查参数映射确认你描述的组件type是服务器支持的。查看项目文档或源码中的类型映射列表。6.2 生成的图表不符合预期问题现象可能原因排查步骤与解决方案组件图形不对如数据库显示为方框。组件type未正确识别或映射。在指令中明确指定类型如“一个MySQL数据库类型为database”。检查服务器源码的componentStyleMap使用已定义的类型关键词。布局混乱组件重叠严重。1. 组件过多布局算法达到局部最优而非全局最优。2. 布局参数不适合当前图形。1.尝试不同布局在指令中明确指定layout: “force”或layout: “layered”看哪种效果更好。2.分模块绘制对于大型系统不要试图在一张图中显示所有细节。可以分别绘制“整体上下文图”、“核心服务详图”、“数据存储图”。3.手动调整利用Excalidraw的优势自动生成后手动拖动调整布局这是人机协作的常态。连线错乱或缺失。AI未能正确解析组件间关系。1.关系描述更清晰使用“A调用B”、“A向B发送消息”、“A从B读取数据”等明确句式。确保关系两端的组件ID或标签在你的描述中完全一致。2.分步生成先让AI生成只有组件的图确认组件都正确后再通过新的对话基于现有图添加关系。图表过于拥挤文字看不清。画布大小或元素默认尺寸不合适。1.指令控制尝试在指令中要求“使用更大的画布”或“让组件之间的间距大一些”。虽然AI不一定能精确控制但可能影响其传递给布局算法的参数。2.事后调整在Excalidraw中全选所有元素使用缩放工具统一调整大小或调整画布尺寸。6.3 性能与扩展性考量处理大型架构当组件数量超过50甚至100个时自动布局的计算可能变慢且结果可能难以阅读。建议遵循“分而治之”原则按子系统、功能模块或层级拆分绘制多个图表然后用一个高层次的“系统全景图”来链接它们。自定义图形如果需要使用Excalidraw库中没有的特殊图标如特定云服务商的Logo目前的MCP服务器可能不支持。变通方案可以先生成基础图表然后在Excalidraw中手动替换或添加自定义图形元素作为库Library的一部分。离线使用默认可能依赖excalidraw.com。如果你需要在完全内网环境使用可以考虑自部署Excalidraw后端并修改MCP服务器的配置指向你的内网地址。这需要你对Excalidraw的部署有一定了解。一个关键的实操心得将excalidraw-architect-mcp视为一个“架构草图生成器”而非“最终成品图绘制工具”。它的最大价值在于快速将思想可视化打破讨论初期的空白。生成的草图几乎总是需要一些手动调整来达到完美的表达效果。接受这种“AI生成 人工润色”的工作模式才能最大化其效率提升。