之前写过的绘图工具系列超强大免费绘图工具draw.io初体验Mermaid语法、实战画图工具汇总Excalidraw、tldraw、Drawnix、Drawio本文继续搜集一些开源或闭源绘图工具暂时没有过多实战经验。FossFLOW开源GitHub19.2K Star1.3K Fork功能强大的渐进式Web应用PWA专为创建精美的等距图而设计。基于React和Isoflow库构建完全在浏览器中运行并支持离线使用。在线体验。实战基于docker-compose.yaml部署version:3.8services:fossflow:image:stnsmith/fossflow:latestports:-8083:80environment:-NODE_ENVproduction-ENABLE_SERVER_STORAGEtrue-STORAGE_PATH/data/diagrams-ENABLE_GIT_BACKUPfalsevolumes:-./diagrams:/data/diagrams浏览器打开http://localhost:8083开始体验。操作添加组件、节点连接LogicFlow官网无https-官网滴滴开源GitHub11.5K Star1.4K Fork基于H5和JS、专注于业务自定义、流程图编辑框架提供丰富的功能和灵活的扩展机制适用于各种逻辑编排场景如工作审批流配置、机器人逻辑编排、无代码平台流程配置。支持多种数据格式的渲染对外提供许多API可自定义节点和菜单如流程图、ER图、BPMN流程、脑图、UML、工作流等场景。提供一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制可用于在工作审批配置、机器人逻辑编排、无代码平台流程配置等场景。核心优势轻量化核心包体积仅100KB无冗余依赖加载速度快高灵活节点、连线、面板均可自定义从样式到交互全链路可控跨框架支持Vue 2/3、React、原生JS。需求场景业务流程设计如OA系统的审批流程、电商的订单流转支持拖拽添加节点、设置条件分支数据可视化架构图、思维导图、ER图通过自定义节点实现复杂数据关系展示低代码平台作为可视化编辑器核心搭配表单组件快速搭建流程配置中心即时协作工具支持节点拖拽、连线自动吸附配合WebSocket实现多人实时编辑。实战安装及使用npm install logicflow/core--save npm install logicflow/theme--savetemplatediv idflow-containerstylewidth: 800px; height: 500px; border: 1px solid #eee;/div/templatescript setupimport{onMounted}fromvue;import{LogicFlow}fromlogicflow/core;importlogicflow/theme;onMounted((){// 初始化实例constlfnewLogicFlow({container:document.getElementById(flow-container),grid:true// 显示网格});// 添加节点lf.addNode({id:node1,type:rect,// 矩形节点x:100,y:100,text:开始});lf.addNode({id:node2,type:rect,x:400,y:100,text:结束});// 添加连线lf.addEdge({sourceNodeId:node1,targetNodeId:node2,text:流程流转});// 渲染lf.render();});/script说明容器必须指定宽高否则无法正常渲染节点类型内置rect矩形、circle圆形、diamond菱形等基础类型支持自定义交互默认支持节点拖拽、连线编辑可通过stopDefaultBehavior禁用默认交互。自定义节点样式lf.registerNode(approval-node,{extends:rect,// 继承矩形节点style:{fill:#e8f4f8,stroke:#4299e1,strokeWidth:2},// 自定义图标icon:{type:svg,svg:svg width20 height20 viewBox0 0 24 24path dM12 2L2 7l10 5 10-5-10-5z//svg}});监听事件提供丰富事件钩子如节点点击、连线变化// 监听节点点击lf.on(node:click,(data){console.log(点击了节点,data.node.id);// 这里可触发弹窗、表单编辑等业务逻辑});// 监听连线完成lf.on(edge:add,(data){console.log(新增连线,data.edge);// 校验连线合法性、保存到后端等});支持将流程图导出为JSON或从JSON恢复// 导出constflowDatalf.getGraphData();// 导入lf.render(flowData);oxdraw开源GitHub2K Star65 Fork基于Rust、Diagram-as-Code 工具支持使用 Mermaid 语法编写图表提供 Web 界面进行拖拽式交互编辑在界面上做的任何视觉调整比如移动节点、添加拐点、改颜色都会以注释形式自动保存回原始.mmd文件中确保代码与视图完全同步。旨在解决Mermaid无法精细控制对齐、布局、线条交叉、美观等问题。技术原理Rust编写的CLI工具负责把.mmd文件渲染成SVG或PNG图片也可启动本地服务器运行前端编辑器。React 实现的 Web 前端编辑器提供可视化的拖拽界面支持节点移动、连线重路由、样式覆盖等功能。解析层Mermaid AST 提取 自定义元数据注入oxdraw 并没有自己实现 Mermaid 的语法解析器而是复用了社区成熟的mermaid-js引擎。但它聪明的地方在于在解析完标准语法后额外提取出“非功能性”的布局信息并将其隔离存储。具体做法主体逻辑仍由Mermaid原生解析保证兼容性所有自定义样式、位置、路径等信息统一用%% oxdraw:xxx开头的注释块包裹渲染时先加载Mermaid原始结构再应用oxdraw注入的布局偏移量好处完全兼容其他Mermaid工具即使你把.mmd文件拿去别的地方渲染那些注释会被忽略图依然能正常显示只是回到默认布局避免污染语义结构不会为了控制样式而去改写graph或subgraph结构保持代码干净实现“增量更新”机制只同步变化的部分而不是全量重写文件渲染引擎Rust WebAssembly 的高性能组合拳很多人看到“前端编辑器”就以为这是个纯 JS 项目但实际上oxdraw 的核心渲染逻辑是用 Rust 写的它通过 WASMWebAssembly技术将 Rust 编译成可在浏览器中运行的二进制模块负责以下任务Mermaid 字符串 → SVG 路径计算控制点插值算法贝塞尔曲线优化碰撞检测与自动避让未来规划功能图形变换矩阵运算为啥要用 Rust因为这类图形计算非常吃性能尤其是在处理复杂拓扑结构时JS的 GC 和动态类型劣势明显。而 Rust 提供了零成本抽象、内存安全、极致性能三大优势特别适合做底层图形引擎。举个例子当你拖动一个节点时所有连接它的边都需要实时重绘。如果用 JS 实现频繁的数组操作和 DOM 更新很容易卡顿。但在 oxdraw 中这部分逻辑跑在 WASM 里毫秒级响应丝般顺滑。双向绑定机制虚拟 DOM 文件监听 自动保存为了让“代码 ↔ 视图”真正实现双向同步oxdraw 设计一套类似于 React Redux 的状态管理系统。其工作流程如下[用户拖动节点] ↓ 触发前端事件 → 发送给 WASM 模块计算新坐标 ↓ WASM 返回新的布局数据 → 更新 React 状态树 ↓ React 重新渲染画布 同步更新左侧代码面板 ↓ Debounce 定时器触发 → 将变更写回磁盘文件关键细节包括使用throttle/debounce防止频繁写盘差异对比diff仅写入变动部分减少 I/O支持stdin/stdout流式处理便于集成 CI/CD错误边界兜底防止编辑器崩溃导致数据丢失这套机制看似简单实则涉及多个技术栈的协同Rust、WASM、React、WebSocket、FS Watcher……但最终呈现给用户的只是一个.mmd文件 一条命令。实战安装cargo install oxdraw命令行使用oxdraw--inputflow.mmd# 默认生成同名svg文件oxdraw--inputflow.mmd--pngoxdraw--inputflow.mmd--editoxdraw--inputdemo.mmd--edit--serve-port8080oxdraw--inputdemo.mmd-b#fff# 设置背景色oxdraw--inputdemo.mmd-q# 静默输出catdiagram.mmd\|oxdraw-i--oout.png# 从stdin读取浏览器打开http://127.0.0.1:5151左侧是 Mermaid 源码编辑区右侧是可交互的画布。基础操作拖动任何一个节点它们会自动吸附到网格上双击连线添加控制点手动拉出折线路径点击节点或连线弹出色板修改填充色、边框、文字颜色切换箭头方向、虚实线样式选中元素后按Delete删除子图容器Subgraph Container的智能分组移动。支持Mermaid的subgraph功能订单系统用户系统登录注册忘记密码下单支付发货在编辑器中可直接拖动整个“用户系统”方框里面的三个节点会一起移动且相对位置不变连带着从这个子图出发的所有连线也会自动跟随调整路径。子图级操作大大提升大型图表的组织效率。模板支持用于团队协作场景下的风格统一template.mmd预设常用节点样式和布局规则每次新建图表都基于模板复制提交PR时可通过lint工具检查是否有非法样式覆盖。GitHub Actions集成name:GenerateDiagramson:[push]jobs:build:runs-on:ubuntu-lateststeps:-uses:actions/checkoutv4-name:Installoxdrawrun:cargoinstalloxdraw-name:Renderall.mmdfilesrun:|find . -name *.mmd | while read f; do oxdraw --input $f --png --scale 5 done-name:Commitandpushimagesrun:|git config user.name github-actions git add *.png git commit -m Auto-generate diagrams || exit 0 git push自动化文档生成pipeline。工具技术栈是否支持拖拽是否保留代码是否开源跨平台Mermaid Live EditorJS❌✅✅✅PlantUMLIntelliJ插件Java⚠️有限✅✅✅Draw.io/diagrams.netJS✅❌XML封装✅✅ExcalidrawTS✅⚠️JSON代码混合✅✅oxdrawRustWASM✅✅注释注入✅✅LucidChart官网一款基于云端的在线图表制作和可视化工具由Lucid Software公司开发支持流程图、组织结构图、UML图、思维导图等多种专业图表类型的创建和实时协作。​基于H5技术开发完全在浏览器中运行无需安装任何软件或插件支持在PC、Mac、Linux以及移动设备上使用。最初作为Microsoft Visio的替代品而设计特别强调云端协作和易用性。用户可通过简单的拖拽操作创建专业水准的图表支持与Google Workspace、Microsoft 365、Atlassian、Slack等主流办公应用无缝集成。原理云端架构采用基于云的SaaS软件即服务架构所有图表数据存储在云端服务器上。用户可从任何设备、任何地点访问和编辑图表无需担心数据丢失或版本不一致的问题。实时协作机制系统支持多人实时协作当多个用户同时编辑同一图表时实时同步所有更改。每个用户的编辑操作会立即显示在其他协作者的界面上同时提供聊天、评论、提及等功能促进团队沟通。数据集成与自动化支持与外部数据源连接如Excel、Google Sheets、Salesforce等。用户可将图表与这些数据源关联实现图表的自动更新。当源数据发生变化时相应的图表元素会自动调整。AI智能绘图引入AI技术如ChatGPT和AI Prompt Flow。可通过自然语言输入快速生成和修改图表大大提高绘图效率。优势跨平台与易用性无需安装基于浏览器运行随时随地可用拖拽式操作界面直观非技术人员也能快速上手多设备支持在PC、Mac、平板、手机上都能流畅使用强大的协作功能实时协作多人同时编辑实时查看对方修改评论与反馈直接在图表上添加评论和标注版本控制自动保存历史版本可随时回溯丰富的模板与图形库数百种模板涵盖各个行业和应用场景专业图形库包括流程图符号、UML元素、网络设备图标等自定义形状用户可创建自己的形状库集成与扩展性广泛集成与Google Workspace、Microsoft 365、Atlassian、Slack等100应用集成API支持提供开发者API支持自定义集成数据连接支持与外部数据源自动同步企业级功能团队空间为不同团队提供独立的工作空间权限管理精细的访问控制和分享权限设置企业级安全包括SAML认证、IP白名单、域名控制等局限性免费版限制较多只支持3个可编辑文档、100个模板每个文档最多60个形状对于重度用户来说空间明显不足。网络依赖性强作为云端工具必须有稳定的网络连接才能正常使用离线功能有限。高级功能需要付费许多高级功能如AI智能绘图、高级数据集成、企业级安全功能等需要订阅付费版本。与Visio的兼容性问题虽然支持Visio文件导入但在复杂图表的转换过程中可能会出现格式错乱或功能不兼容的情况。学习曲线存在虽然比Visio简单但对于完全没有图表制作经验的用户仍需要一定的学习时间才能熟练使用所有功能。价格因素对于团队使用即使是5人小团队也需要每月支付21美元100人的团队每月支出高达334美元对于创业公司或小型团队来说是一笔不小的开支。LucidSparkLucid公司推出的可视化白板绘图工具对其他开源自部署白板绘图工具感兴趣可参考白板项目Rnote、Lorien、Infinite-Canvas、open-ai-canvas。iCraft Editor官网中文站点GitHub收录一下官方文档、教程、示例等资料。一款由Gant Software开发、专注于3D架构设计的开源在线编辑器通过立体视觉效果提升沟通效率支持从2D到3D的一键切换、自由视角控制和数字孪生功能让复杂系统架构以三维形式直观呈现。​与传统的2D图表工具不同专注于3D化设计让每一个元素、每一个层次都立体呈现。用户可通过自由旋转、缩放从各个角度审视架构轻松洞察其中的细节和关联。原理基于WebGL的3D渲染iCraft Editor采用现代Web技术栈基于WebGL实现高性能的3D图形渲染。这使得用户无需安装任何插件或软件直接在浏览器中就能获得流畅的3D体验。场景图管理系统编辑器采用场景图Scene Graph架构管理3D元素每个元素几何体、模型、文字、线条等都是场景图中的节点。这种架构支持复杂的层级关系和变换操作便于实现子场景嵌套、动画播放等高级功能。实时交互与物理模拟。系统支持实时交互操作包括自动网格吸附方便元素对齐和连接操作自动堆叠和磁吸绘图元素自动堆叠磁吸提高布局效率碰撞检测确保元素不会重叠或冲突数据集成与同步机制支持与外部系统集成通过JS SDK控制3D元素状态实现Web系统信息与3D架构图的实时同步。这为数字孪生应用提供了技术基础。模块化设计采用React等技术构建提供组件化架构。icraft/player-react组件库让开发者可轻松将iCraft Editor制作的3D场景嵌入到React项目中。功能特点丰富的元素类型基础几何体立方体、圆柱体、棱柱体、平面等3D模型服务器、存储设备等专业模型带图片的3D模型应用程序、软件服务图标图片云服务图标、自定义图片图标AntDesign Icon、Box Icon等文字用于添加说明和标注线条用于连接和标注元素智能编辑一键2D/3D切换支持在2D和3D视图间无缝切换自动吸附与对齐网格自动吸附方便的连线操作元素属性编辑支持位置、大小、旋转、颜色等属性调整子场景嵌套支持在主场景中嵌套多个子场景高级呈现自由视角控制360°自由旋转和缩放动画播放支持场景动画动态展示架构演变全景展示3D全景介绍思路多视角自由变换高清导出支持8K-16K高清分辨率导出数字孪生集成实时数据接入支持自定义数据接入对接各类监控系统状态同步通过JS SDK控制3D元素状态Web组件嵌入提供易于嵌入的Web渲染组件适用场景软件架构设计在软件架构设计阶段iCraft Editor创建的3D架构图能帮助团队成员更好地理解整体系统结构和组件间的关系。如可创建微服务架构图、云原生部署图等通过3D视角展示服务间的依赖关系和通信路径。系统部署与维护在系统部署和维护过程中iCraft Editor生成的3D架构图可直观显示系统的各个部分及其空间关系。通过数字孪生功能甚至可动态展示实时组件状态帮助运维人员快速定位和解决问题。云架构可视化特别适合展示AWS、Azure、GCP等云服务架构。用户可从多个角度观察云资源布局理解VPC、子网、安全组等网络组件的空间关系。工业互联网与智能制造在智能工厂场景中iCraft Editor可绘制IoT设备网络拓扑、生产线布局、设备状态监控等3D场景图实现生产过程的数字孪生。培训与教学在培训和教学场合3D架构图能够吸引听众注意力提高沟通效率。通过生动的3D图像和动画可更清楚地解释复杂概念和技术原理。产品结构与工艺展示支持创建3D产品结构图多角度动态展示产品内外结构、零部件和工作原理。也适用于工艺流程图的3D化展示。优势视觉表现力强3D立体效果让架构图更加生动直观相比传统2D图表能更好地展示空间关系和层次结构。自由视角控制让用户可从任意角度观察系统发现2D图中难以察觉的细节。易用性高简洁直观的界面设计让新手也能快速上手。拖拽式操作、自动吸附等功能降低了使用门槛即使没有3D设计经验的用户也能在短时间内创建专业图表。开源与可定制作为开源项目iCraft Editor提供了完全的代码透明度和可定制性。开发者可根据需要修改源码或基于现有功能进行二次开发。强大的集成能力支持外部模型导入GLB、GLTF格式可无缝嵌入现有的3D资源。提供React组件库便于将3D场景集成到Web应用中。成本效益免费版本提供基础功能满足个人和小团队的基本需求。相比商业3D设计软件iCraft Editor的性价比更高。专注于专业场景不像通用3D建模软件那样功能繁杂iCraft Editor专注于架构图设计提供了针对性的功能和模板提高了专业场景下的工作效率。局限性功能相对专一作为专注于架构图设计的工具iCraft Editor在通用3D建模能力上相对有限。不适合需要复杂曲面建模、材质编辑、灯光渲染等高级3D设计任务。性能要求较高3D渲染对硬件有一定要求在低配置设备或老旧浏览器上可能出现卡顿。复杂的3D场景可能需要较强的GPU支持才能流畅运行。学习曲线存在虽然比专业3D软件简单但对于完全没有3D概念的用户仍需要一定时间适应三维空间的操作逻辑如视角控制、旋转调整等。协作功能有限相比LucidChart等成熟的在线协作工具iCraft Editor在实时多人协作方面的功能可能不够完善更适合个人或小团队使用。生态系统尚在发展中作为相对较新的工具iCraft Editor的模板库、插件生态相比成熟工具如draw.io、LucidChart还有差距社区资源和第三方集成相对较少。导出格式限制虽然支持多种分辨率导出但在专业出版或打印场景下可能不如专业设计软件提供的输出选项丰富。对比维度iCraft Editordraw.ioLucid Chart核心特色3D架构图设计2D图表绘制在线协作图表技术基础WebGL3D渲染SVG矢量图形HTML5Canvas主要场景系统架构、数字孪生流程图、UML图团队协作、业务流程协作能力有限基础协作强大的实时协作学习曲线中等需要3D思维低直观易用低拖拽操作开源状态开源开源商业软件价格模式免费付费增值完全免费免费订阅制集成能力React组件、SDK多种格式导入导出100应用集成实战打开中文站点无需注册即可在线体验有一定的上手门槛。