Excalidraw构建远程诊疗流程：互联网医院模式图
在互联网医疗迅猛发展的今天，远程问诊、在线开方和跨区域协作已不再是未来构想，而是每天真实发生的医疗场景。尤其是在疫情后时代，越来越多患者习惯通过手机完成挂号、视频问诊、电子处方获取乃至药品配送全流程。这一转变背后，是整个互联网医院系统复杂业务逻辑的支撑——而如何清晰、高效地表达这些流程，成为产品设计与技术落地的关键瓶颈。
传统流程图工具如 Visio 或 Lucidchart 虽然功能完整，但往往风格僵硬、操作繁琐，且难以适应敏捷迭代的需求。更关键的是，在多角色参与（医生、运营、开发、UI/UX）的项目中，一张“看得懂”的流程图远比一张“画得准”的图表更重要。这时候，Excalidraw 这类轻量级、手绘风、支持实时协作的虚拟白板工具，开始展现出独特优势。
它不像标准制图软件那样追求规整与精确，反而用一种接近纸笔草图的视觉语言降低认知门槛。你可以想象这样一个场景：一位临床医生第一次使用绘图工具，没有经过培训，却能在 5 分钟内拖出几个框、连上几条线，准确表达出他理想中的复诊流程。这种“零学习成本”的体验，正是 Excalidraw 的核心竞争力所在。
它的底层其实并不简单。Excalidraw 基于 HTML5 Canvas 构建图形渲染引擎，并借助 Rough.js 实现非机械化的手绘效果——每一条线都略有抖动，每一个矩形都不完全规整，模拟真实书写感。这种“不完美”恰恰带来了亲和力，让团队成员更愿意参与讨论而非纠结于格式。
更重要的是，它的状态管理采用了不可变数据结构（Immutable State），所有图形元素以 JSON 形式存储，每一次操作都被序列化为可追溯的动作流。这意味着你可以回退到任意历史版本，也能轻松实现多人实时协同编辑。当多个角色同时打开同一个白板时，每个人的操作都会通过 WebSocket 实时广播，光标位置、修改内容即时同步，真正做到了“所见即共见”。
这在医疗流程设计中尤为关键。比如在制定一个包含初诊、审方、医保对接、物流触发等多个环节的远程诊疗路径时，药师可能关注处方审核节点是否遗漏风控条件，IT 工程师则关心系统间接口调用顺序，而运营人员更在意患者等待时间点的标注。Excalidraw 允许他们在同一张图上并行标注、即时反馈，避免了以往“你改我改大家改不同版本”的混乱局面。
不仅如此，Excalidraw 还具备强大的扩展能力。企业可以通过 Docker 快速部署私有实例，确保敏感的诊疗流程数据不出内网：
docker run -d \ --name excalidraw \ -p 8080:80 \ excalidraw/excalidraw:latest这条命令就能在本地服务器启动一个完全隔离的 Excalidraw 服务，映射到http://localhost:8080即可访问。对于有合规要求的医疗机构来说，这是保障数据安全的基础一步。
更进一步，你还可以将它嵌入现有系统。例如在医院的知识库页面中直接嵌入一个交互式白板：
<iframe src="https://excalidraw.com" width="100%" height="600px" frameborder="0"> </iframe>这样一来，PRD 文档里的流程图不再是静态截图，而是可点击、可编辑的活文档。产品经理可以在会议中当场调整流程，会后自动保存更新，所有人看到的都是最新版本。
而真正让效率发生跃迁的，是 AI 辅助绘图功能的引入。设想一下：只需输入一句自然语言描述——“患者登录APP后选择科室，进入视频问诊，医生开具电子处方，药房在线审方并通过第三方平台配送”——系统就能自动生成对应的流程图初稿。这不是科幻，而是通过集成大语言模型（LLM）即可实现的能力。
其背后的技术链路清晰而实用：
1. 用户输入文本；
2. 系统调用 LLM（如 GPT-4 或通义千问）进行语义解析；
3. 提取关键节点与关系，输出结构化 JSON；
4. Excalidraw 解析并渲染成可视图表。
为了保证输出质量，提示工程（Prompt Engineering）的设计至关重要。一个典型的 Prompt 模板可以这样定义：
PROMPT_TEMPLATE = """ 你是一个专业的医疗系统架构师，请根据以下需求生成 Excalidraw 兼容的流程图描述。 要求： - 提取主要节点（最多8个） - 明确节点间的顺序与分支条件 - 输出为JSON格式，字段包括：nodes: [{id, label, position}], edges: [{from, to, label}] 场景描述：{user_input} 输出： """这个模板强制模型返回可控结构，避免自由发挥导致解析失败。随后，前端代码将 JSON 映射为 Excalidraw 可识别的元素数组：
function parseLLMResponse(jsonOutput: any): ExcalidrawElement[] { const elements: ExcalidrawElement[] = []; const nodePositions: Record<string, [number, number]> = {}; // 创建节点 jsonOutput.nodes.forEach((node: any, index: number) => { const x = 100 + (index % 3) * 300; const y = 100 + Math.floor(index / 3) * 150; nodePositions[node.id] = [x, y]; elements.push({ type: 'rectangle', x, y, width: 120, height: 60, id: node.id, text: node.label }); }); // 创建连线 jsonOutput.edges.forEach((edge: any) => { const fromPos = nodePositions[edge.from]; const toPos = nodePositions[edge.to]; if (fromPos && toPos) { elements.push({ type: 'arrow', x: fromPos[0] + 60, y: fromPos[1] + 60, width: toPos[0] - fromPos[0] + 60, height: toPos[1] - fromPos[1] + 60, id: `edge-${edge.from}-${edge.to}` }); } }); return elements; }这套机制使得非技术人员也能参与流程设计。一位不懂绘图工具的医生，只要能说清楚流程，AI 就能帮他画出来。初稿生成通常只需 30 秒，之后再由产品经理微调布局、补充异常路径即可定稿。相比过去耗时 20–30 分钟的手工绘制，效率提升显著。
在实际项目中，我们常看到这样的协作链条：
+------------------+ +--------------------+ | 需求收集 | ----> | Excalidraw 白板 | | （医生/产品经理） | | （流程图设计） | +------------------+ +----------+---------+ | v +----------------------------+ | 版本控制系统（Git/Gitee） | | 存储 .excalidraw 文件 | +-------------+--------------+ | v +----------------------+------------------------+ | 文档中心（Confluence/Obsidian） | 项目管理（Jira） | +-----------------------------------------------+Excalidraw 不再只是一个绘图工具，而是成为了整个研发协作体系的“设计中枢”。生成的图表可导出为 PNG、SVG 或直接嵌入 Markdown，无缝接入 PRD、培训手册或项目看板。
当然，要发挥最大价值，仍需遵循一些最佳实践。比如单张图建议控制在 10 个主节点以内，避免信息过载；使用颜色语义化区分角色行为（绿色=患者动作，蓝色=系统响应，红色=异常分支）；开启对齐辅助线保持排版整洁；定期导出 JSON 备份以防意外丢失。
尤其值得注意的是，Excalidraw 支持插件系统和 API 扩展，企业完全可以基于自身业务定制专属功能。例如训练一个微调过的 LLM 模型，专门理解本院特有的术语（如“绿色通道复诊”、“双签审方机制”），从而提高 AI 生成的准确性。
从技术角度看，Excalidraw 的成功并非源于某项突破性创新，而是对“用户体验优先”理念的极致贯彻。它放弃了传统工具对“完美图形”的执念，转而追求“快速表达”与“广泛参与”。在医疗这类高度依赖跨专业协作的领域，这种设计理念显得尤为珍贵。
当我们在推进一家三甲医院的互联网诊疗平台建设时，曾面临多方沟通困难的局面：临床科室希望流程尽可能简化，信息科强调系统对接的严谨性，药剂科则坚持审方环节不能有任何跳过可能。最终，正是通过 Excalidraw 搭建的一个共享白板，各方才得以在同一张图上达成共识——不是因为图有多精美，而是因为它足够简单、足够开放，允许每个人用自己的方式参与进来。
这也正是数字化转型的本质：技术不仅要解决问题，更要降低参与门槛，让更多人能够加入创造过程。Excalidraw 正是以其极简之形，承载了协同之重。对于正在探索智慧医疗路径的机构而言，它不仅是一个工具的选择，更是一种协作文化的象征——可视化、可讨论、可迭代，才是真正可持续的产品演进方式。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
