2026/9/1 17:58:17
FEATURED · 精选文章 
画流程图这件事几乎是每个开发者和产品同学都绕不开的日常任务。可真正打开画图工具时很多人反而会卡在选型上商业软件按年付费格式不通用在线工具免费版限制导出数量好不容易画完需求一变又得手动调整所有连线。这篇笔记围绕“免费开源流程图神器”展开把拖拽组件、AI 自动生成、代码插入、动态线条这四个高频需求完整拆解一遍。无论你是第一次接触流程图工具还是想把手头重复画图的工作自动化这篇内容都可以直接参考。1. 背景与核心概念免费开源流程图工具到底强在哪里1.1 流程图的本质一张图背后是一套结构化数据在进入工具之前先理解一个关键概念流程图不是一张“图片”而是一组“数据 样式”的集合。每一个图形节点代表一个步骤每一条连线代表步骤之间的流转关系而这些信息在底层都是以文本结构存储的。这就是为什么专业流程图工具比 PPT 里的“插入形状”更好用。PPT 中你画了一个矩形它只是一张画布上的图形而在流程图工具中这个矩形是带 ID、坐标、样式、连接关系的节点。你可以随时拖拽调整位置连线会自动跟着重排你可以给节点设置不同的颜色、形状、图标你还可以把整张图导出为 XML 文件放进 Git 仓库进行版本管理。1.2 为什么需要免费开源的流程图方案商业流程图软件不是不好用而是很多场景下性价比不高。个人偶尔画一张图按年订阅完全没必要团队协作时如果所有成员都安装收费客户端授权成本会迅速膨胀。更重要的是很多商业工具的私有格式会导致数据锁定今天画好的图明天换一个工具就导不出来。免费开源方案的底气在于格式开放、生态成熟。以本文主讲的 draw.io即 diagrams.net为例它使用 XML 保存图形数据支持导出 PNG、SVG、PDF、HTML、VSDX 等格式跨平台运行还提供了在线版、桌面版、VS Code 插件、Docker 自托管等多种使用方式。正因为文件本质是代码它才可能和 AI 结合实现自动生成。1.3 常见免费开源流程图工具选型对比除了 draw.io市面上还有不少优秀选择这里整理了一个对比表工具开源协议核心特点适合场景draw.io / diagrams.net开源且免费功能全、XML 存储、支持代码编辑业务流程图、系统架构图、UML 图ExcalidrawMIT手绘风格、轻量、支持端到端加密快速草图、白板协作tldrawMIT白板协作、易集成到 Web 应用在线白板、低代码产品LogicFlow开源免费前端流程图引擎、可二次开发开发者自建流程设计器AntV X6MIT图编辑引擎、支持动画边中后台流程设计器、脑图本文后续内容以 draw.io 为主线因为它最贴合“拖拽组件 代码插入”的需求也是目前被讨论最多的免费开源流程图工具。2. 核心原理AI 自动生成流程图是怎么实现的2.1 流程图的文本化基础从 XML 到 Mermaid想理解 AI 自动生成必须先理解流程图工具的文本化能力。draw.io 的 .drawio 文件本质上是一个 XML 文档里面有mxCell节点和mxGeometry坐标信息。只要数据结构正确draw.io 就能把它渲染成图形。这意味着你可以用脚本、模板、甚至大模型来生成这份 XML然后直接打开成一张流程图。另一类文本化描述是 Mermaid。Mermaid 是一种用纯文本描述图表语法的语言比如A -- B就表示 A 指向 B 的箭头。相比手写 XMLMermaid 对人和 AI 都更友好但它的排版自动布局能力弱一些复杂流程容易乱。2.2 AI 自动生成流程图的三种实现路径严格来说大多数免费开源流程图工具本身并没有内置“输入一句话自动画图”的按钮。但通过组合大模型和图形工具完全可以实现“AI 自动生成流程图”的效果。目前主要有三条路径路径 AAI 生成 Mermaid 代码再通过在线编辑器或 draw.io 导入。适合快速得到一份草稿再由人工调整布局。路径 BAI 生成 draw.io 的 XML 代码保存为 .drawio 文件直接用 draw.io 打开。适合需要精确控制节点坐标和样式的场景。路径 C在自研应用中接入大模型 API把 AI 返回的结构化数据交给 LogicFlow、AntV X6 等流程图引擎渲染。适合把流程图能力做成产品功能。三种路径的复杂度和自由度是递增的。普通用户用路径 A 就能解决大多数问题开发者可以进一步探索路径 B 和 C。2.3 为什么“代码插入”是关键能力很多流程图画到一半需要批量修改节点名称、统一样式、补充重复分支。如果只靠鼠标拖拽工作量会很大。代码插入的价值在于你可以直接编辑流程图的底层数据用查找替换、脚本批处理的方式完成重复劳动。draw.io 原生提供了 XML 编辑入口这就是数据和图形之间的桥梁。理解这一点后后续的自动化生成、模板化复用、团队版本管理都会变得顺理成章。3. 环境准备安装 draw.io 并搭建基础工作台3.1 选择最合适的使用方式draw.io 提供了多种部署形态我建议根据实际场景选择在线版打开 diagrams.net 官网即可使用适合临时画图、演示场景。桌面版下载对应操作系统的安装包适合离线环境、大文件编辑。VS Code 插件在 VS Code 扩展市场搜索 Draw.io Integration安装后可以直接编辑 .drawio 文件适合开发者。Docker 自托管适合企业内网部署保障数据不出内网。本文以桌面版和在线版为例不同版本的菜单位置可能略有差异但核心操作一致。3.2 桌面版安装步骤桌面版安装非常简单不需要编程基础访问 diagrams.net 官方下载页面。根据你的操作系统选择 Windows、macOS 或 Linux 安装包。双击安装完成后启动应用。启动后选择“创建新绘图”选择一个空白模板即可开始。如果你更习惯在浏览器中使用可以直接跳过安装步骤在线版的功能和桌面版基本一致。3.3 使用 Docker 自托管可选如果你所在团队对数据安全要求较高可以采用自托管方式部署 draw.io。具体镜像和端口以官方仓库说明为准这里给出一个常见的启动思路# 示例使用官方 Docker 镜像运行 diagrams.net # 具体镜像名称、端口参数请以 diagrams.net 官方文档为准 docker run -d -p 8080:8080 --name drawio jgraph/drawio:latest启动后访问http://localhost:8080即可打开绘图页面。自托管的好处是所有数据保存在自己的服务器上不经过任何第三方平台。3.4 准备 Python 运行环境自动化脚本用后文会给出一个用 Python 自动生成 drawio 文件的脚本。这个脚本只需要 Python 3.6 以上版本不需要安装第三方依赖因为我们会使用 Python 自带的xml.etree.ElementTree标准库。python --version如果系统提示找不到 python可以尝试python3 --version。只要输出类似Python 3.x.x即可。4. 拖拽组件十分钟绘制第一张流程图4.1 认识画布与图形库打开 draw.io 后你会看到三块主要区域左侧是图形库中间是画布右侧是格式设置面板。左侧图形库默认包含“标准”“基本”“箭头”等分类。你可以看到很多流程图符号矩形表示处理步骤圆角矩形通常表示开始或结束菱形表示判断分支。用鼠标按住任意图形拖到中间画布就完成了一个节点的创建。这里需要注意draw.io 的图形库是可以扩展的。你可以在左侧面板中点击“更多形状”勾选你需要的图形库比如 UML、网络拓扑、BPMN 等。刚开始不用贪多标准库已经能覆盖绝大多数流程图场景。4.2 从拖拽到连线节点与边的连接方式创建节点后把鼠标悬停在节点边缘会出现蓝色的连接箭头。按住这个箭头拖向另一个节点就能创建一条连线。连线不仅仅是视觉上的线段它在底层是一条“边”。当你移动节点时draw.io 会自动重新计算连线路由尽量让连线不交叉、不重叠。在画流程时建议先快速拖出所有节点再统一连线这样结构更清晰。如果需要添加条件分支双击连线可以输入文字例如“是”“否”“成功”“失败”。这些文字会显示在连线中间让流程图语义更完整。4.3 节点样式与布局调整选中一个节点后右侧面板会出现样式选项。你可以修改填充颜色、边框颜色、字体、圆角、阴影等属性。流程图常用的颜色逻辑是结束节点用深色判断节点用警示色普通处理节点用中性色。关于布局draw.io 提供了一个非常实用的功能框选所有节点后点击菜单中的“排列”选项可以自动对齐、均匀分布。对于节点较多的流程这个功能可以省去大量手动微调时间。4.4 保存为 .drawio 文件XML 的本质当你完成第一张流程图后点击“文件 → 保存”会得到一个 .drawio 文件。这个文件可以直接用文本编辑器打开你会看到类似下面的 XML 结构mxfile hostapp.diagrams.net diagram idsimple-flow name页面-1 mxGraphModel dx900 dy600 grid1 gridSize10 root mxCell id0 / mxCell id1 parent0 / mxCell idstart value开始 stylerounded1;whiteSpacewrap;html1; vertex1 parent1 mxGeometry x100 y100 width120 height60 asgeometry / /mxCell mxCell idnext value处理 stylerounded0;whiteSpacewrap;html1; vertex1 parent1 mxGeometry x320 y100 width120 height60 asgeometry / /mxCell mxCell idedge1 styleedgeStyleorthogonalEdgeStyle;html1; edge1 parent1 sourcestart targetnext mxGeometry relative1 asgeometry / /mxCell /root /mxGraphModel /diagram /mxfile看到这个结构你就应该理解为什么它天然适合版本管理和代码生成了。5. 代码插入用 XML 和 Mermaid 精确控制流程图5.1 在 draw.io 中直接编辑 XML如果你不想一个个拖拽节点可以直接修改 XML 数据。在 draw.io 菜单中找到“Edit Diagram”不同版本可能叫“编辑图表”或“编辑 XML”打开后会弹出一个文本编辑窗口里面就是当前图表的全部 XML。在这个窗口中你可以直接改节点文字、坐标、样式、颜色保存后画布会自动刷新。这个功能对熟练用户来说效率非常高尤其是需要批量修改节点名称时用编辑器里的查找替换功能比逐个双击快得多。5.2 用 Python 脚本自动生成 .drawio 文件下面是一个完整的 Python 脚本它可以根据给定的节点和边数据自动生成一个可以在 draw.io 中打开的流程图文件。我将它命名为generate_drawio.py# 文件路径generate_drawio.py # 作用用 Python 标准库生成 draw.io 可识别的 XML 流程图文件 import xml.etree.ElementTree as ET def build_drawio_xml(nodes, edges): 根据节点和边生成 draw.io XML 根元素 mxfile ET.Element(mxfile, {host: app.diagrams.net}) diagram ET.SubElement(mxfile, diagram, {id: flow-demo, name: 订单流程}) model ET.SubElement(diagram, mxGraphModel, { dx: 900, dy: 600, grid: 1, gridSize: 10, guides: 1, tooltips: 1, connect: 1, arrows: 1, fold: 1, page: 1, pageWidth: 1169, pageHeight: 826 }) root ET.SubElement(model, root) # 基础的两个根节点draw.io 要求必须存在 ET.SubElement(root, mxCell, {id: 0}) ET.SubElement(root, mxCell, {id: 1, parent: 0}) # 创建业务节点 for node in nodes: cell ET.SubElement(root, mxCell, { id: node[id], value: node[label], style: rounded1;whiteSpacewrap;html1;fillColor#dae8fc;strokeColor#6c8ebf;, vertex: 1, parent: 1 }) geo ET.SubElement(cell, mxGeometry) geo.set(x, str(node[x])) geo.set(y, str(node[y])) geo.set(width, 140) geo.set(height, 60) geo.set(as, geometry) # 创建连线 for i, edge in enumerate(edges): cell ET.SubElement(root, mxCell, { id: fedge-{i}, value: edge.get(label, ), style: edgeStyleorthogonalEdgeStyle;rounded1;html1;, edge: 1, parent: 1, source: edge[from], target: edge[to] }) geo ET.SubElement(cell, mxGeometry) geo.set(relative, 1) geo.set(as, geometry) return mxfile # 定义节点坐标可以按自己的布局习惯修改 nodes [ {id: start, label: 用户下单, x: 100, y: 100}, {id: check, label: 库存校验, x: 320, y: 100}, {id: pay, label: 支付处理, x: 540, y: 100}, {id: end, label: 订单完成, x: 540, y: 280}, ] # 定义连线 edges [ {from: start, to: check, label: 提交订单}, {from: check, to: pay, label: 库存充足}, {from: pay, to: end, label: 支付成功}, ] root_xml build_drawio_xml(nodes, edges) tree ET.ElementTree(root_xml) tree.write(order_flow.drawio, encodingutf-8, xml_declarationTrue) print(已生成 order_flow.drawio请用 draw.io 打开查看)在命令行执行python generate_drawio.py运行后目录下会多出一个order_flow.drawio文件。双击用 draw.io 打开你会看到自动生成的“用户下单 → 库存校验 → 支付处理 → 订单完成”流程。这段代码的核心思路就是先构造 XML 根结构再根据字典数据生成节点和边。这种做法的好处是只要你能拿到流程结构数据无论是手写、读取数据库、还是调用 AI 接口返回的结果都能批量生成流程图。5.3 Mermaid 代码的导入与复用Mermaid 是另一种常见的文本化流程图描述方式和 AI 的配合度很高。下面是一段典型的 Mermaid 流程描述graph TD A[用户下单] -- B{库存充足?} B --|是| C[支付处理] B --|否| D[补货提示] C --|支付成功| E[订单完成] C --|支付失败| F[订单取消]这段话直接用文本描述了一个带判断分支的订单流程。你可以把这段文本粘贴到 mermaid.live 在线渲染器生成一张矢量图并导出 SVG再拖入 draw.io 中进行二次编辑。如果你的 draw.io 版本较新也可能支持直接打开 .mermaid 文件如果版本较旧使用在线渲染器中转是最通用、最稳妥的方式。6. 完整实战用 AI 自动生成一张订单业务流程图6.1 场景与需求假设你负责一个电商系统的订单模块需要绘制一张“订单从创建到完成”的流程图。传统做法是打开 draw.io 拖拽节点大约需要十分钟。接下来我们试试用 AI 代码的方式把过程缩短到三分钟并且生成的文件可维护、可复用。6.2 第一步向 AI 描述业务流程打开任意大模型对话工具输入这样一段提示词请帮我梳理一个电商订单流程包含以下环节 1. 用户下单 2. 库存校验如果库存不足则提示补货 3. 支付处理支付成功则订单完成支付失败则订单取消 请用 Mermaid 语法输出并保持节点命名清晰。大模型通常会输出类似前面 5.3 节中的 Mermaid 代码。这个过程验证了一个关键点AI 真正擅长的是把自然语言需求转化成结构化文本而这正好是流程图工具的输入格式。6.3 第二步用 Python 把流程结构转成 draw.io XMLMermaid 适合阅读但如果想直接在 draw.io 里调整布局我更推荐把流程结构转成 draw.io XML。仍然使用上面的脚本思想这次加入菱形判断节点。判断节点在 draw.io 里通过rhombus1样式表示代码中只需要改一个 style 字符串。# 文件路径generate_order_flow.py # 作用生成带判断分支的订单流程图 import xml.etree.ElementTree as ET def
免费开源流程图工具实战：从拖拽到AI自动生成完整指南
画流程图这件事几乎是每个开发者和产品同学都绕不开的日常任务。可真正打开画图工具时很多人反而会卡在选型上商业软件按年付费格式不通用在线工具免费版限制导出数量好不容易画完需求一变又得手动调整所有连线。这篇笔记围绕“免费开源流程图神器”展开把拖拽组件、AI 自动生成、代码插入、动态线条这四个高频需求完整拆解一遍。无论你是第一次接触流程图工具还是想把手头重复画图的工作自动化这篇内容都可以直接参考。1. 背景与核心概念免费开源流程图工具到底强在哪里1.1 流程图的本质一张图背后是一套结构化数据在进入工具之前先理解一个关键概念流程图不是一张“图片”而是一组“数据 样式”的集合。每一个图形节点代表一个步骤每一条连线代表步骤之间的流转关系而这些信息在底层都是以文本结构存储的。这就是为什么专业流程图工具比 PPT 里的“插入形状”更好用。PPT 中你画了一个矩形它只是一张画布上的图形而在流程图工具中这个矩形是带 ID、坐标、样式、连接关系的节点。你可以随时拖拽调整位置连线会自动跟着重排你可以给节点设置不同的颜色、形状、图标你还可以把整张图导出为 XML 文件放进 Git 仓库进行版本管理。1.2 为什么需要免费开源的流程图方案商业流程图软件不是不好用而是很多场景下性价比不高。个人偶尔画一张图按年订阅完全没必要团队协作时如果所有成员都安装收费客户端授权成本会迅速膨胀。更重要的是很多商业工具的私有格式会导致数据锁定今天画好的图明天换一个工具就导不出来。免费开源方案的底气在于格式开放、生态成熟。以本文主讲的 draw.io即 diagrams.net为例它使用 XML 保存图形数据支持导出 PNG、SVG、PDF、HTML、VSDX 等格式跨平台运行还提供了在线版、桌面版、VS Code 插件、Docker 自托管等多种使用方式。正因为文件本质是代码它才可能和 AI 结合实现自动生成。1.3 常见免费开源流程图工具选型对比除了 draw.io市面上还有不少优秀选择这里整理了一个对比表工具开源协议核心特点适合场景draw.io / diagrams.net开源且免费功能全、XML 存储、支持代码编辑业务流程图、系统架构图、UML 图ExcalidrawMIT手绘风格、轻量、支持端到端加密快速草图、白板协作tldrawMIT白板协作、易集成到 Web 应用在线白板、低代码产品LogicFlow开源免费前端流程图引擎、可二次开发开发者自建流程设计器AntV X6MIT图编辑引擎、支持动画边中后台流程设计器、脑图本文后续内容以 draw.io 为主线因为它最贴合“拖拽组件 代码插入”的需求也是目前被讨论最多的免费开源流程图工具。2. 核心原理AI 自动生成流程图是怎么实现的2.1 流程图的文本化基础从 XML 到 Mermaid想理解 AI 自动生成必须先理解流程图工具的文本化能力。draw.io 的 .drawio 文件本质上是一个 XML 文档里面有mxCell节点和mxGeometry坐标信息。只要数据结构正确draw.io 就能把它渲染成图形。这意味着你可以用脚本、模板、甚至大模型来生成这份 XML然后直接打开成一张流程图。另一类文本化描述是 Mermaid。Mermaid 是一种用纯文本描述图表语法的语言比如A -- B就表示 A 指向 B 的箭头。相比手写 XMLMermaid 对人和 AI 都更友好但它的排版自动布局能力弱一些复杂流程容易乱。2.2 AI 自动生成流程图的三种实现路径严格来说大多数免费开源流程图工具本身并没有内置“输入一句话自动画图”的按钮。但通过组合大模型和图形工具完全可以实现“AI 自动生成流程图”的效果。目前主要有三条路径路径 AAI 生成 Mermaid 代码再通过在线编辑器或 draw.io 导入。适合快速得到一份草稿再由人工调整布局。路径 BAI 生成 draw.io 的 XML 代码保存为 .drawio 文件直接用 draw.io 打开。适合需要精确控制节点坐标和样式的场景。路径 C在自研应用中接入大模型 API把 AI 返回的结构化数据交给 LogicFlow、AntV X6 等流程图引擎渲染。适合把流程图能力做成产品功能。三种路径的复杂度和自由度是递增的。普通用户用路径 A 就能解决大多数问题开发者可以进一步探索路径 B 和 C。2.3 为什么“代码插入”是关键能力很多流程图画到一半需要批量修改节点名称、统一样式、补充重复分支。如果只靠鼠标拖拽工作量会很大。代码插入的价值在于你可以直接编辑流程图的底层数据用查找替换、脚本批处理的方式完成重复劳动。draw.io 原生提供了 XML 编辑入口这就是数据和图形之间的桥梁。理解这一点后后续的自动化生成、模板化复用、团队版本管理都会变得顺理成章。3. 环境准备安装 draw.io 并搭建基础工作台3.1 选择最合适的使用方式draw.io 提供了多种部署形态我建议根据实际场景选择在线版打开 diagrams.net 官网即可使用适合临时画图、演示场景。桌面版下载对应操作系统的安装包适合离线环境、大文件编辑。VS Code 插件在 VS Code 扩展市场搜索 Draw.io Integration安装后可以直接编辑 .drawio 文件适合开发者。Docker 自托管适合企业内网部署保障数据不出内网。本文以桌面版和在线版为例不同版本的菜单位置可能略有差异但核心操作一致。3.2 桌面版安装步骤桌面版安装非常简单不需要编程基础访问 diagrams.net 官方下载页面。根据你的操作系统选择 Windows、macOS 或 Linux 安装包。双击安装完成后启动应用。启动后选择“创建新绘图”选择一个空白模板即可开始。如果你更习惯在浏览器中使用可以直接跳过安装步骤在线版的功能和桌面版基本一致。3.3 使用 Docker 自托管可选如果你所在团队对数据安全要求较高可以采用自托管方式部署 draw.io。具体镜像和端口以官方仓库说明为准这里给出一个常见的启动思路# 示例使用官方 Docker 镜像运行 diagrams.net # 具体镜像名称、端口参数请以 diagrams.net 官方文档为准 docker run -d -p 8080:8080 --name drawio jgraph/drawio:latest启动后访问http://localhost:8080即可打开绘图页面。自托管的好处是所有数据保存在自己的服务器上不经过任何第三方平台。3.4 准备 Python 运行环境自动化脚本用后文会给出一个用 Python 自动生成 drawio 文件的脚本。这个脚本只需要 Python 3.6 以上版本不需要安装第三方依赖因为我们会使用 Python 自带的xml.etree.ElementTree标准库。python --version如果系统提示找不到 python可以尝试python3 --version。只要输出类似Python 3.x.x即可。4. 拖拽组件十分钟绘制第一张流程图4.1 认识画布与图形库打开 draw.io 后你会看到三块主要区域左侧是图形库中间是画布右侧是格式设置面板。左侧图形库默认包含“标准”“基本”“箭头”等分类。你可以看到很多流程图符号矩形表示处理步骤圆角矩形通常表示开始或结束菱形表示判断分支。用鼠标按住任意图形拖到中间画布就完成了一个节点的创建。这里需要注意draw.io 的图形库是可以扩展的。你可以在左侧面板中点击“更多形状”勾选你需要的图形库比如 UML、网络拓扑、BPMN 等。刚开始不用贪多标准库已经能覆盖绝大多数流程图场景。4.2 从拖拽到连线节点与边的连接方式创建节点后把鼠标悬停在节点边缘会出现蓝色的连接箭头。按住这个箭头拖向另一个节点就能创建一条连线。连线不仅仅是视觉上的线段它在底层是一条“边”。当你移动节点时draw.io 会自动重新计算连线路由尽量让连线不交叉、不重叠。在画流程时建议先快速拖出所有节点再统一连线这样结构更清晰。如果需要添加条件分支双击连线可以输入文字例如“是”“否”“成功”“失败”。这些文字会显示在连线中间让流程图语义更完整。4.3 节点样式与布局调整选中一个节点后右侧面板会出现样式选项。你可以修改填充颜色、边框颜色、字体、圆角、阴影等属性。流程图常用的颜色逻辑是结束节点用深色判断节点用警示色普通处理节点用中性色。关于布局draw.io 提供了一个非常实用的功能框选所有节点后点击菜单中的“排列”选项可以自动对齐、均匀分布。对于节点较多的流程这个功能可以省去大量手动微调时间。4.4 保存为 .drawio 文件XML 的本质当你完成第一张流程图后点击“文件 → 保存”会得到一个 .drawio 文件。这个文件可以直接用文本编辑器打开你会看到类似下面的 XML 结构mxfile hostapp.diagrams.net diagram idsimple-flow name页面-1 mxGraphModel dx900 dy600 grid1 gridSize10 root mxCell id0 / mxCell id1 parent0 / mxCell idstart value开始 stylerounded1;whiteSpacewrap;html1; vertex1 parent1 mxGeometry x100 y100 width120 height60 asgeometry / /mxCell mxCell idnext value处理 stylerounded0;whiteSpacewrap;html1; vertex1 parent1 mxGeometry x320 y100 width120 height60 asgeometry / /mxCell mxCell idedge1 styleedgeStyleorthogonalEdgeStyle;html1; edge1 parent1 sourcestart targetnext mxGeometry relative1 asgeometry / /mxCell /root /mxGraphModel /diagram /mxfile看到这个结构你就应该理解为什么它天然适合版本管理和代码生成了。5. 代码插入用 XML 和 Mermaid 精确控制流程图5.1 在 draw.io 中直接编辑 XML如果你不想一个个拖拽节点可以直接修改 XML 数据。在 draw.io 菜单中找到“Edit Diagram”不同版本可能叫“编辑图表”或“编辑 XML”打开后会弹出一个文本编辑窗口里面就是当前图表的全部 XML。在这个窗口中你可以直接改节点文字、坐标、样式、颜色保存后画布会自动刷新。这个功能对熟练用户来说效率非常高尤其是需要批量修改节点名称时用编辑器里的查找替换功能比逐个双击快得多。5.2 用 Python 脚本自动生成 .drawio 文件下面是一个完整的 Python 脚本它可以根据给定的节点和边数据自动生成一个可以在 draw.io 中打开的流程图文件。我将它命名为generate_drawio.py# 文件路径generate_drawio.py # 作用用 Python 标准库生成 draw.io 可识别的 XML 流程图文件 import xml.etree.ElementTree as ET def build_drawio_xml(nodes, edges): 根据节点和边生成 draw.io XML 根元素 mxfile ET.Element(mxfile, {host: app.diagrams.net}) diagram ET.SubElement(mxfile, diagram, {id: flow-demo, name: 订单流程}) model ET.SubElement(diagram, mxGraphModel, { dx: 900, dy: 600, grid: 1, gridSize: 10, guides: 1, tooltips: 1, connect: 1, arrows: 1, fold: 1, page: 1, pageWidth: 1169, pageHeight: 826 }) root ET.SubElement(model, root) # 基础的两个根节点draw.io 要求必须存在 ET.SubElement(root, mxCell, {id: 0}) ET.SubElement(root, mxCell, {id: 1, parent: 0}) # 创建业务节点 for node in nodes: cell ET.SubElement(root, mxCell, { id: node[id], value: node[label], style: rounded1;whiteSpacewrap;html1;fillColor#dae8fc;strokeColor#6c8ebf;, vertex: 1, parent: 1 }) geo ET.SubElement(cell, mxGeometry) geo.set(x, str(node[x])) geo.set(y, str(node[y])) geo.set(width, 140) geo.set(height, 60) geo.set(as, geometry) # 创建连线 for i, edge in enumerate(edges): cell ET.SubElement(root, mxCell, { id: fedge-{i}, value: edge.get(label, ), style: edgeStyleorthogonalEdgeStyle;rounded1;html1;, edge: 1, parent: 1, source: edge[from], target: edge[to] }) geo ET.SubElement(cell, mxGeometry) geo.set(relative, 1) geo.set(as, geometry) return mxfile # 定义节点坐标可以按自己的布局习惯修改 nodes [ {id: start, label: 用户下单, x: 100, y: 100}, {id: check, label: 库存校验, x: 320, y: 100}, {id: pay, label: 支付处理, x: 540, y: 100}, {id: end, label: 订单完成, x: 540, y: 280}, ] # 定义连线 edges [ {from: start, to: check, label: 提交订单}, {from: check, to: pay, label: 库存充足}, {from: pay, to: end, label: 支付成功}, ] root_xml build_drawio_xml(nodes, edges) tree ET.ElementTree(root_xml) tree.write(order_flow.drawio, encodingutf-8, xml_declarationTrue) print(已生成 order_flow.drawio请用 draw.io 打开查看)在命令行执行python generate_drawio.py运行后目录下会多出一个order_flow.drawio文件。双击用 draw.io 打开你会看到自动生成的“用户下单 → 库存校验 → 支付处理 → 订单完成”流程。这段代码的核心思路就是先构造 XML 根结构再根据字典数据生成节点和边。这种做法的好处是只要你能拿到流程结构数据无论是手写、读取数据库、还是调用 AI 接口返回的结果都能批量生成流程图。5.3 Mermaid 代码的导入与复用Mermaid 是另一种常见的文本化流程图描述方式和 AI 的配合度很高。下面是一段典型的 Mermaid 流程描述graph TD A[用户下单] -- B{库存充足?} B --|是| C[支付处理] B --|否| D[补货提示] C --|支付成功| E[订单完成] C --|支付失败| F[订单取消]这段话直接用文本描述了一个带判断分支的订单流程。你可以把这段文本粘贴到 mermaid.live 在线渲染器生成一张矢量图并导出 SVG再拖入 draw.io 中进行二次编辑。如果你的 draw.io 版本较新也可能支持直接打开 .mermaid 文件如果版本较旧使用在线渲染器中转是最通用、最稳妥的方式。6. 完整实战用 AI 自动生成一张订单业务流程图6.1 场景与需求假设你负责一个电商系统的订单模块需要绘制一张“订单从创建到完成”的流程图。传统做法是打开 draw.io 拖拽节点大约需要十分钟。接下来我们试试用 AI 代码的方式把过程缩短到三分钟并且生成的文件可维护、可复用。6.2 第一步向 AI 描述业务流程打开任意大模型对话工具输入这样一段提示词请帮我梳理一个电商订单流程包含以下环节 1. 用户下单 2. 库存校验如果库存不足则提示补货 3. 支付处理支付成功则订单完成支付失败则订单取消 请用 Mermaid 语法输出并保持节点命名清晰。大模型通常会输出类似前面 5.3 节中的 Mermaid 代码。这个过程验证了一个关键点AI 真正擅长的是把自然语言需求转化成结构化文本而这正好是流程图工具的输入格式。6.3 第二步用 Python 把流程结构转成 draw.io XMLMermaid 适合阅读但如果想直接在 draw.io 里调整布局我更推荐把流程结构转成 draw.io XML。仍然使用上面的脚本思想这次加入菱形判断节点。判断节点在 draw.io 里通过rhombus1样式表示代码中只需要改一个 style 字符串。# 文件路径generate_order_flow.py # 作用生成带判断分支的订单流程图 import xml.etree.ElementTree as ET def 
