Excalidraw绘制智慧城市架构：城市大脑顶层设计
在一次智慧城市项目的跨部门评审会上，技术团队面对长达数十页的PPT架构图文档，陷入了沟通僵局——交通组的数据流向与安防组的理解完全不同。这种“各说各话”的困境，在大型系统设计中并不罕见。而当有人打开一个手绘风格的白板页面，几秒钟内用AI生成了一张包含感知层、网络层、平台层和应用层的四层架构草图时，会议室突然安静了下来：所有人第一次在同一张图上看到了完整的“城市大脑”轮廓。
这正是 Excalidraw 正在悄然改变技术设计流程的真实写照。
Excalidraw 并不是一个传统意义上的绘图工具。它没有复杂的菜单栏，也不追求像素级精准排版。相反，它的界面简洁得近乎极简：打开浏览器就能用，拖拽几个图形，线条自带轻微抖动的手绘质感，就像你在纸上随手勾勒思路一样自然。但正是这种“不完美”的视觉风格，意外地降低了技术表达的心理门槛——工程师不再纠结于对齐与配色，而是更专注于逻辑本身。
它的底层基于 React 和 TypeScript 构建，所有图形通过 SVG 渲染，并利用 Canvas 或 DOM 实现交互。用户每一次操作都被记录为对象状态，存储在内存或 localStorage 中。当你开启协作模式时，WebRTC 或 WebSocket 会实时同步这些状态，确保多地参与者看到的是同一幅不断演进的设计蓝图。这种轻量化的前端架构，让它几乎可以在任何现代浏览器中流畅运行，无需安装客户端，也无需依赖特定操作系统。
真正让 Excalidraw 在智慧城市建设中脱颖而出的，是其开放的插件系统与 AI 集成能力。比如，你可以输入一句：“画一个智慧城市架构图，包含摄像头、5G 网络、数据中台和交通治理应用”，后端的大语言模型（LLM）就会解析语义，识别出实体、层级关系和数据流向，输出标准的 JSON 结构，再由 Excalidraw 渲染成可视图表。整个过程不到十秒，原本需要半小时手工绘制的内容已经初具雏形。
这个过程的核心在于提示工程的设计。我们曾在一个项目中测试过不同 prompt 的效果：
“请生成智慧城市四层架构” → 输出模糊，缺少细节 “请生成包含感知层（摄像头/传感器）、网络层（5G/光纤）、平台层（数据中台/AI中台）、应用层（交通治理/应急指挥）的架构图JSON，使用rectangle、text、arrow元素，roughness=2” → 输出结构清晰，可直接加载可见，明确的指令模板能显著提升 AI 生成质量。为此，我们在企业内部封装了一个 Python 脚本，调用本地部署的 Qwen2 模型（通过 Ollama 提供 OpenAI 兼容接口），实现安全可控的文生图流程：
from openai import OpenAI import json client = OpenAI(base_url="http://localhost:11434/v1", api_key="ollama") def generate_excalidraw_json(prompt: str): system_msg = """ 你是一个专业的架构图生成器。根据用户描述，输出符合 Excalidraw 格式的 JSON 数据。 要求： - elements 数组包含所有图形元素（rectangle, text, arrow） - 每个元素必须有 id, type, x, y, width, height（如适用） - 文字元素标注清晰名称 - 箭头表示层级或数据流向 - 使用手绘风格参数（roughness=2） - 返回纯 JSON，不要额外解释 """ response = client.chat.completions.create( model="qwen2:latest", messages=[ {"role": "system", "content": system_msg}, {"role": "user", "content": prompt} ], temperature=0.3 ) try: return json.loads(response.choices[0].message.content.strip()) except Exception as e: print("解析失败:", e) return None这段代码的关键不只是技术实现，更是理念转变：我们将 LLM 视为“初级架构助理”，负责快速搭建骨架；人类专家则作为“总设计师”，进行结构调整、语义校验和细节补充。AI 不替代思考，而是把我们从重复劳动中解放出来，去关注更高阶的问题。
实际落地时，我们也总结了一些经验教训。例如，早期团队喜欢把所有内容塞进一张大图，结果画布无限扩展，最终谁也找不到某个模块在哪。后来我们引入了“frame”功能，将感知层、平台层等划分为独立区域，类似 Figma 中的组件框，既保持整体性又便于局部聚焦。颜色使用也开始规范化——虽然手绘风鼓励自由发挥，但我们约定蓝色代表基础设施、绿色代表数据流、红色代表关键决策点，避免后期理解混乱。
另一个容易被忽视的点是版本控制。尽管 Excalidraw 支持自动保存，但重要会议后的成果仍需手动导出 SVG/PNG 用于汇报，并保留 JSON 源文件归档至知识库。我们甚至开发了一个小工具，能对比两个 JSON 版本之间的元素差异，帮助追踪设计演变过程。
最令人惊喜的应用场景出现在跨部门协同中。过去，每个团队都用自己的方式表达系统结构：PPT、Visio、甚至Word里的形状拼接。整合时往往耗费大量时间对齐概念。而现在，大家直接进入同一个 Excalidraw 画布，交通组添加信号灯控制系统，环保组接入空气质量监测节点，公安组标注视频分析算法位置……所有人都在同一空间下工作，争议点可以直接用箭头标出并附上评论。一次两小时的线上会议，就能产出一份各方达成共识的顶层设计草图。
当然，这种灵活性也带来挑战。比如多人同时编辑时偶尔会出现元素错位，这是由于 OT（Operational Transformation）算法在极端并发下的同步延迟所致。我们的应对策略很简单：指定一名“画布主持人”，负责最终布局调整；其他人以建议模式参与，避免冲突。此外，对于敏感项目，我们会采用私有化部署方案，将整个服务运行在内网环境中，杜绝数据外泄风险。
如果你希望将 Excalidraw 深度集成到现有系统中，以下是一个轻量级嵌入示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Embedded Excalidraw</title> <script type="module"> import { Excalidraw } from "https://cdn.jsdelivr.net/npm/@excalidraw/excalidraw@0.14.0/dist/excalidraw.min.js"; window.addEventListener("load", () => { const excalidraw = new Excalidraw(); document.getElementById("container").appendChild(excalidraw); const initialData = { type: "excalidraw", version: 2, source: "https://excalidraw.com", elements: [ { id: "rect1", type: "rectangle", x: 100, y: 100, width: 200, height: 100, strokeColor: "#000", backgroundColor: "#fff", roughness: 2, }, { id: "text1", type: "text", x: 150, y: 140, text: "城市大脑平台层", fontSize: 16, } ], appState: { theme: "light", viewBackgroundColor: "#edf2ff", } }; excalidraw.updateScene(initialData); }); </script> </head> <body> <h2>智慧城市架构设计面板</h2> <div id="container" style="height: 600px; border: 1px solid #ccc;"></div> </body> </html>这段代码无需构建工具链，直接通过 CDN 引入即可运行。roughness: 2参数赋予图形轻微抖动，模拟真实手绘感；updateScene()方法支持动态加载预设内容，非常适合用于初始化常见架构模板。我们已将其嵌入企业内部的 Confluence 和飞书文档中，使架构设计成为知识沉淀的一部分。
回过头看，Excalidraw 的价值远不止于“画图”。它本质上是一种新型的技术协作范式：在一个去工业化的视觉环境中，让思想流动得更快、更自由。特别是在“城市大脑”这类涉及数十个子系统、上百个接口的复杂工程中，一张可以随时修改、人人可编辑的草图，反而比一份精美但僵化的正式文档更具生命力。
未来，随着 AI 能力的深入融合，我们可以期待更多智能化辅助——比如自动检测架构中的循环依赖、推荐标准化图例、甚至根据历史项目数据生成最优分层建议。那时的 Excalidraw 将不再只是一个白板，而是一个真正意义上的“设计智能体”。
但无论如何演进，它的核心哲学不会变：好的工具，应该让人忘记工具的存在，只专注于创造本身。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
