【硬核调研】Visio, ProcessOn, draw.io… 流程图工具技术栈大揭秘与选型指南

前言

作为一名开发者，我们经常需要绘制流程图、架构图甚至构建自己的绘图工具。市面上眼花缭乱的工具——Visio, ProcessOn, draw.io, Lucidchart… 它们底层到底使用了什么技术？

是因为 Canvas 性能更强，还是 SVG 交互更方便？
如果我也想开发一个类似的 Web 绘图应用，或者为公司选型一个开源引擎，我该选 G6/X6，LogicFlow 还是 mxGraph？

本文将带你深入扒一扒这些主流工具的"底裤"，并提供一份详实的技术选型指南。

---

📅 一、技术演进：即时协作是分水岭

流程图工具的技术架构经历了三个明显的阶段：

1. 桌面原生时代 (Native Desktop)

   • 代表: Visio, OmniGraffle
   • 核心: C++, .NET, Objective-C
   • 特点: 性能怪兽，支持超大图纸，但 collaborative（协作）能力几乎为零。

2. Web 探索时代 (Flash/Silverlight)

   • 代表: 早期 Gliffy
   • 特点: 依赖插件，现以全面被 HTML5 取代。

3. 现代 Web 协作时代 (Modern Web)

   • 代表: Figma (虽然是设计工具，但定义了技术标准), Lucidchart, ProcessOn
   • 核心: Canvas/SVG/WebGL + WebSocket + CRDTs (无冲突复制数据类型)
   • 趋势: 浏览器成为新的操作系统，多人实时协作成为标配。

---

🔍 二、主流商业 SaaS 工具技术栈深度解密

了解它们用什么，能帮我们更好地做技术决策。

1. Microsoft Visio (老大哥的云化之路)

• 定位: 企业标准的制定者。
• Web 版技术栈:
  • 前端: 深度集成 Office 365，主要基于 React。
  • 渲染策略: 混合渲染。利用 Canvas 处理大量图形的渲染以保证帧率，同时上层覆盖 SVG 层用于处理复杂的鼠标交互与事件响应。这是应对大规模图纸渲染的标准高端解法。
• 启示: 如果你的场景节点极多（数万级），单一的 SVG 可能会遇到 DOM 性能瓶颈，混合渲染是方向。

2. ProcessOn (国内在线绘图标杆)

• 定位: 强社交属性的在线作图平台。
• 技术栈推测:
  • 前端: 经典的 HTML5 + JavaScript。核心绘图引擎推测是基于早期成熟的绘图库（如 mxGraph）进行的深度魔改，优化了中文环境下的排版和网格吸附体验。
  • 后端: 稳健的 Java (Spring Boot) 体系。
  • 协作: WebSocket 长连接。
• 启示: 技术不在最新，而在稳。ProcessOn 的成功在于产品体验和模板社区生态，而非追求最新的前端框架。

3. Lucidchart (硅谷技术流)

• 定位: 追求极致性能的 Web 绘图工具。
• 技术栈:
  • 前端: TypeScript。Lucidchart 团队是非常硬核的技术团队，他们极早地攻克了 Canvas 在浏览器端的各种限制。最新的动向是引入 WebGL 来渲染更复杂的场景。
  • 后端: 从 PHP 迁移到了 Scala，追求高并发下的稳定性。
• 启示: 如果你要做"下一代"绘图工具，WebGL 是提升性能天花板的必经之路。

---

🛠️ 三、开源引擎选型指南 (干货都在这)

如果你需要开发一个绘图功能，千万不要从画一条线开始写。以下开源库是巨人的肩膀：

1. draw.io (现 diagrams.net) - 功能最全

• GitHub: https://github.com/jgraph/drawio
• 核心引擎: mxGraph
• 技术特点: 纯 JS 实现，无依赖。虽然架构老旧（非模块化），但胜在功能极其完整。泳道、复杂的连线路由算法、各种组合图形，它是目前唯一能完全对标 Visio 的开源库。
• 适合场景: 需要做一个功能大而全的传统流程图编辑器。

2. Excalidraw - 现代手绘风白板 (React 首选)

• GitHub: https://github.com/excalidraw/excalidraw
• 技术栈: React + TypeScript + Canvas
• 核心库: Rough.js (手绘风格渲染)
• 技术特点: 代码非常 clean，React 开发者狂喜。采用了 立即模式 (Immediate Mode) 渲染，重绘性能极高。
• 适合场景: 协作白板、会议草图、敏捷开发工具。

3. LogicFlow - 滴滴开源 (专注业务流程)

• GitHub: https://github.com/didi/LogicFlow
• 技术栈: MVVM (MobX) + SVG
• 核心优势:
  • 📢 懂业务: 它不只是画图，它天生支持 BPMN 规范。
  • 📢 逻辑解耦: 它的设计哲学是将“图的展示”与“业务数据”分离，非常适合集成到 OA 系统或审批流后台。
• 适合场景: 工作流设计器、审批流配置后台、低代码平台。

4. AntV X6 - 蚂蚁金服 (图编辑引擎)

• GitHub: https://github.com/antvis/X6
• 技术栈: MVC + SVG
• 核心优势:
  • 🔥 组件化开发: 你可以直接用 React/Vue 组件 来写节点！这对前端开发来说简直是降维打击，定制 UI 变得异常简单。
  • 🔥 国产之光: 文档极其完善，社区活跃。
• 适合场景: 复杂的 ER 图、DAG 图、AI 模型编排、高度定制的图编辑应用。

---

⚖️ 四、SVG vs Canvas：到底选哪个？

这是一个永恒的争论，简单的对比表如下：

维度	SVG 方案 (LogicFlow, X6, mxGraph)	Canvas 方案 (Excalidraw, Lucidchart)
底层原理	DOM 节点。每个形状都是一个 <svg/g/rect> 标签。	像素位图。所有内容画在一张画布上。
交互开发	简单。像写网页一样绑定 onclick, hover，支持 CSS。	困难。需手写代码计算鼠标坐标命中（Hit Test）。
性能极限	一般 3000-5000 节点后，DOM 操作变慢。	极高，可轻松支持 10000+ 节点。
文字排版	完美 (浏览器原生能力)。	噩梦 (需自己计算换行、光标、截断)。
扩展性	强，可以在节点里放 <input>, <iframe>。	弱，只能放图片或画出来的图形。

一句话总结: 绝大多数业务流程图场景（<1000节点），SVG 是开发效率最高的选择；只有做无限画布、超大规模脑图时，才考虑 Canvas。

---

🎯 五、最终选型建议

1. 我要做审批流/工作流配置 👉 LogicFlow (专业对口，省时省力)
2. 我要做漂亮的、定制化强的图编辑器 👉 AntV X6 (React/Vue 组件化真香)
3. 我要做协作白板 👉 Excalidraw 源码二开
4. 我要做对标 Visio 的巨型软件 👉 mxGraph (draw.io) (虽然老，但能打)
5. 我只是想在文档里展示个图 👉 Mermaid.js (Markdown 渲染)

---

希望这篇调研能帮你在技术选型的十字路口少走弯路！如果你觉得有用，欢迎点赞收藏~ 🚀