Excalidraw 与 Make（原 Integromat）集成：构建无代码可视化自动化工作流
在今天的产品设计和系统架构工作中，一张清晰的草图往往胜过千言万语。但现实是，从一个想法到生成可共享的技术图表，通常需要手动打开绘图工具、回忆布局结构、逐个添加组件——这个过程不仅耗时，还容易因沟通断层导致信息失真。
有没有可能让“画图”这件事也实现自动化？比如，你在 Slack 里打一句：“帮我画个包含用户服务和订单服务的微服务架构”，几秒钟后，一张风格统一、结构清晰的手绘风架构图就自动生成并返回给你？
这并非科幻场景。借助Excalidraw和Make（原 Integromat）的深度集成，这种“自然语言 → 可视化图表”的无代码自动化流程已经可以稳定落地。
为什么是 Excalidraw？
Excalidraw 不是一个普通的在线白板。它之所以能在技术团队中迅速走红，靠的不是花哨的功能，而是对“沟通本质”的深刻理解。
它的界面模仿手绘笔触，线条略带抖动，颜色柔和，完全没有传统图表那种冷冰冰的距离感。当你在会议上展示一张 Visio 风格的架构图时，大家可能会沉默；但如果你展示的是 Excalidraw 绘制的草图，人们更愿意指着某条线说：“这里是不是应该加个缓存？”——因为它看起来像是“还没完成”的，天然鼓励协作。
更重要的是，它的数据结构极其开放。你看到的所有图形，在底层都是一段结构化的 JSON。这意味着机器能读懂它，也能生成它。
举个例子，下面这段 JSON 描述了一个简单的架构元素：
{ "type": "excalidraw", "version": 2, "source": "https://excalidraw.com", "elements": [ { "id": "A1", "type": "rectangle", "x": 100, "y": 100, "width": 160, "height": 80, "text": "用户服务" }, { "id": "B1", "type": "arrow", "points": [[180, 180], [180, 240], [220, 240]], "endArrowhead": "arrow" }, { "id": "C1", "type": "ellipse", "x": 200, "y": 240, "width": 100, "height": 60, "text": "数据库" } ] }这段数据完全可以由程序动态生成。也就是说，只要我们能让 AI 理解“用户想要什么图”，就能自动输出对应的 JSON，再注入到 Excalidraw 中渲染出来。
这就为自动化打开了大门。
Make：把“意图”变成“动作”的中枢
如果说 Excalidraw 是画布，那 Make 就是那个挥动画笔的人。
Make（前身为 Integromat）是一种无代码自动化平台，擅长连接不同应用、监听事件、执行逻辑判断，并驱动下游操作。它不像 Zapier 那样只适合简单触发，而是支持分支、循环、错误重试、脚本嵌入等复杂流程控制，更像是一个可视化编程环境。
在一个典型的自动化流程中，Make 扮演着“中间协调者”的角色：
- 监听某个输入源（比如 Slack 消息、Notion 页面更新或表单提交）；
- 提取其中的关键信息（如用户描述的图表需求）；
- 调用 AI 模型将自然语言转化为结构化指令；
- 构造符合 Excalidraw 格式的 JSON；
- 将结果推送到指定的 Excalidraw 实例；
- 最后通知相关人员查看新生成的图表。
整个过程无需人工干预，也不需要写一行后端代码。
关键环节：如何让 AI 输出有效的 JSON？
这是最容易出问题的地方。大模型虽然聪明，但它并不天生知道 Excalidraw 的数据格式长什么样。如果提示词设计不好，它可能返回一段 Markdown、一段伪代码，甚至直接开始写作文。
解决办法是在调用 API 时明确约束输出格式。例如，在 Make 的 JavaScript Code 模块中，你可以这样写：
const prompt = input.text; // 明确要求模型返回纯 JSON 数组，且符合 Excalidraw 元素规范 const response = await fetch('https://api.openai.com/v1/chat/completions', { method: 'POST', headers: { 'Authorization': 'Bearer YOUR_API_KEY', 'Content-Type': 'application/json' }, body: JSON.stringify({ model: 'gpt-3.5-turbo', messages: [{ role: 'user', content: ` 请将以下描述转换为 Excalidraw 元素数组 JSON： "${prompt}" 要求： - 仅输出 JSON 数组，不要任何解释 - 使用 rectangle 表示服务，ellipse 表示数据库，arrow 表示调用关系 - 包含 text 字段标注名称 - 坐标可大致分布，避免重叠 ` }], temperature: 0.5 // 降低随机性，提高一致性 }) }); try { const data = await response.json(); const rawOutput = data.choices[0].message.content.trim(); // 清理可能的包裹文本（如 ```json ... ```） const jsonStart = rawOutput.indexOf('['); const jsonEnd = rawOutput.lastIndexOf(']') + 1; const cleaned = rawOutput.slice(jsonStart, jsonEnd); output = { elements: JSON.parse(cleaned) }; } catch (err) { console.error("JSON 解析失败", err); output = { error: "无法生成有效图表结构，请检查输入" }; }这个脚本的关键点在于：
-精准提示词：告诉模型“你要做什么”以及“输出必须是什么格式”；
-容错处理：清理多余的标记符号，防止 JSON 解析失败；
-异常捕获：一旦出错，不至于中断整个流程。
在实际部署中，建议配合 JSON Schema 校验模块进行二次验证，确保传给 Excalidraw 的数据是合法的。
自动化流程实战：从一句话到一张图
让我们看一个完整的使用场景。
假设你的团队使用 Slack 进行日常沟通。某位同事发了一条消息：
@design-bot 画一个电商系统的架构图，包含商品服务、订单服务、支付服务和 MySQL 数据库，用箭头表示调用方向。
这条消息被配置好的 Webhook 捕获，触发 Make 中的一个 Scenario。
流程分解如下：
Trigger：Slack 新消息
- 监听特定频道或 @bot 提及的消息；
- 提取text字段作为输入。Router：过滤有效请求
- 判断是否包含关键词“画”、“图表”、“架构”等；
- 排除无关对话。Code Module：调用 LLM 生成 JSON
- 如上所述，发送请求至 OpenAI；
- 获取结构化元素数组。HTTP Request：注入 Excalidraw 实例
- 如果你部署了私有 Excalidraw（如通过 Docker 自托管），可通过其 API 或前端注入机制加载 JSON；
- 或者使用 Playwright 脚本模拟浏览器行为，自动保存图表并生成分享链接。Notification：返回结果
- 将生成的图表链接通过 Slack 发送回去；
- 可附加预览图或简要说明。
整个流程耗时通常在 10~20 秒之间，远快于人工绘制。
设计之外：安全、稳定性与扩展性考量
听起来很美好，但在真实环境中落地这套方案，还需要考虑几个关键问题。
安全性：别把敏感架构暴露在外网
Excalidraw 的公共实例（如 excalidraw.com）不适合绘制涉及内部系统的信息。一旦生成的链接被泄露，整个架构就一览无余。
推荐做法：部署私有化实例。Excalidraw 支持 self-hosting，结合 Nginx 反向代理和身份认证（如 Auth0 或 Keycloak），可以做到企业级访问控制。
同时，在 Make 中调用相关接口时，应使用临时令牌而非长期密钥，并启用 IP 白名单限制。
输出质量不稳定？建立“兜底机制”
AI 并非每次都能完美输出。有时会漏掉元素，有时坐标重叠，甚至返回无效 JSON。
为此，可以在流程中加入：
-JSON Schema 验证模块：校验字段完整性；
-默认模板 fallback：当 AI 失败时，返回一个空白画布或基础模板；
-人工审核开关：高敏感场景下先发送待审通知，确认后再发布。
版本管理：让图表成为可追溯的知识资产
自动化带来的另一个好处是——每一次生成都有记录。
你可以让 Make 在每次成功生成图表后，将原始 JSON 存入 Airtable、Notion 或 Git 仓库。这样一来，不仅方便回溯历史版本，还能用于训练更专业的领域模型。
比如，积累足够多的“微服务架构”样本后，可以微调一个小模型专门处理这类请求，减少对外部 LLM 的依赖。
更进一步：不只是“画图”
这套模式的本质，其实是“将非结构化输入转化为结构化输出”的通用框架。一旦打通这个链路，它的应用场景远不止于绘图。
示例扩展：
会议纪要 → 架构草图
录音转文字后，提取关键实体和服务关系，自动生成系统交互图。PRD 文档 → 页面原型
解析产品文档中的功能模块，生成低保真 UI 草图，供前端快速参考。日志分析 → 故障拓扑图
当监控系统发现异常时，自动绘制当前调用链路，并高亮可疑节点。新人入职 → 学习路径图
输入岗位类型（如“后端工程师”），自动生成学习路线白板，包含推荐阅读、项目列表和联系人。
这些都不是未来设想，而是基于现有工具组合即可实现的自动化能力。
写在最后
Excalidraw 和 Make 的结合，表面上只是两个工具的连接，实则代表了一种新的工作范式：让创意直达呈现，让表达不再被工具所困。
过去，我们需要先学会使用 PowerPoint、Visio 或 Figma，才能把自己的想法可视化。而现在，只要你能说出来，系统就能帮你画出来。
这不是取代设计师，而是解放创造力。人类负责提出问题、定义目标、判断结果；机器负责重复劳动、格式转换、快速迭代。
随着 AI 理解力的提升和自动化平台的普及，类似的“意图驱动型工作流”将会越来越多地出现在我们的日常中。而 Excalidraw + Make 的集成，正是这样一个轻量却极具启发性的起点——它提醒我们，真正的效率革命，往往始于一次简单的“我说你画”。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
