一、你是不是也在被 Visio 折磨画流程图这件事用 Visio 手动拖拽矩形、对齐箭头、调整文字位置……一张稍微复杂的流程图动辄半小时起步。更崩溃的是需求一改整个布局可能要推倒重来。有没有一种方式像写代码一样画流程图改几行文本就能更新最后还能导出 Visio 编辑有方案就是Mermaid md2visio。Mermaid 代码(.md)──→ md2visio ──→ VSDX(Visio 完全可编辑)二、工具简介2.1 Mermaid —— 用代码画图Mermaid 是一个开源的工具让你用纯文本语法画流程图、时序图、类图等。比如是否开始处理步骤条件判断执行操作跳过结束这六行代码就是一个完整的带分支的流程图比 Visio 拖拽快一个数量级。2.2 md2visio —— Mermaid → Visio 的桥梁md2visio 是一个开源工具将 Markdown 中的 Mermaid 代码块转换为你本机 Visio 的.vsdx文件。转换后所有形状、连线、文字在 Visio 中完全可编辑——就像你亲手画的一样。三、环境准备依赖说明Windows 10/11md2visio 调用本机 Visio COM 接口Microsoft Visio2010 及以上版本支持.vsdx格式.NET 8.0 Runtimemd2visio CLI 版本需要GUI 版本内置md2visio有 GUI 和 CLI 两个版本3.1 安装 md2visio GUI推荐打开 md2visio-gui Releases下载最新版win-x64.zip约 140MB解压即用无需安装GUI 版自带 .NET 运行时零配置启动。3.2 安装 md2visio CLI可选适合自动化打开 md2visio Releases下载最新版md2visio-vX.X.X.zip安装 .NET 8.0 Runtime四、Mermaid 流程图速成流程图核心就三种节点语法效果用途A[文字]矩形处理步骤A{文字}菱形判断分支A([文字])圆角矩形开始 / 结束连线语法渲染错误:Mermaid 渲染失败: Parse error on line 2: ... A -- B %% 实线箭头 C --|是 -----------------------^ Expecting SEMI, NEWLINE, EOF, AMP, START_LINK, LINK, LINK_ID, got NODE_STRING更多语法参考 Mermaid 官方文档。五、实战将 Jira 处理流程转为 Visio5.1 编写 Mermaid 代码以Bug 修复与发布流程为例将流程逻辑写在.md文件中# Bug 修复与发布流程 mermaid flowchart TD A[开始] -- B[收到 Bug 报告] B -- B1{判断优先级} B1 --|紧急| B2[立即分配开发] B1 --|普通| B3[排入下个迭代] B2 -- C[开发排查问题] B3 -- C C -- C1{定位到原因} C1 --|否| C2[补充日志/复现步骤] C2 -- C1 C1 --|是| D[提交修复代码] D -- E[代码审查] E -- E1{审查通过} E1 --|否| E2[修改代码] E2 -- E E1 --|是| F[合并到主分支] F -- G[QA 验证测试] G -- G1{测试通过} G1 --|否| G2[重新打开 Bug回到排查] G2 -- C G1 --|是| H[发布上线] H -- I[关闭 Bug] I -- J[流程结束] 这个流程图包含回退分支审查不通过 → 修改代码 → 重新审查、并行分支紧急/普通和循环测试不通过 → 重新排查覆盖了 Mermaid 流程图的常见用法。5.2 转换为 VSDXGUI 方式启动md2visio.GUI.exe将.md文件拖入窗口点击转换 → 输出.vsdxCLI 方式$env:DOTNET_ROOT .NET 安装路径md2visio.exe/I流程图.md/O输出目录\/Y5.3 在 Visio 中微调用 Visio 打开生成的.vsdx所有形状和连线都可自由拖动、改色、调整样式。通常只需微调几个节点的位置即可。六、更新流程流程变更后不需要从头画修改.md文件中的 Mermaid 代码再次拖入 md2visio GUI → 转换重新打开 VSDX增量修改用代码实现最终美化留给 Visio。七、备选方案对比方案输出格式可编辑适用场景Mermaid md2visio.vsdx✅ Visio最终需要在 Visio 中交付Mermaid mermaid.liveSVG / PNG❌快速预览、插入文档Draw.io 桌面版.drawio/ SVG✅ Draw.io不需要 VSDX 格式时手动 Visio.vsdx✅ Visio极简图不值得写代码八、踩坑指南亲历在探索这套方案的过程中我踩了很多坑。记录如下帮你少走弯路。坑 1Draw.io 免费版无法导出 VSDXDraw.io 在线版app.diagrams.net和桌面版都很好用但免费版不支持导出 VSDX。网上有些教程说可以那是因为他们用的是 Confluence 付费版的 draw.io 插件。如果你已经在 draw.io 里画好了图想转 VSDX要么手工迁移到 Mermaid要么用 draw.io 导出 SVG 然后在 Visio 里导入——但箭头会丢失见坑 4。坑 2md2visio CLI 需要 .NET 运行时GUI 不需要md2visio 有两个版本版本.NET 需求布局质量GUI v1.05自带免安装较好CLI v0.2.0需要 .NET 8.0 Runtime一般我第一次直接用 CLI 版本报错hostfxr.dll not found折腾了半小时才发现必须装 .NET Runtime。换 GUI 版本一拖就完事了。建议日常用 GUICI/自动化场景再用 CLI。坑 3Draw.io 命令行导出的是 PDF不是 VSDX我想全自动化尝试用 draw.io 桌面版命令行导出draw.io.exe--export--format vsdx--output out.vsdx in.drawio结果命令成功了但out.vsdx文件打开是一团乱码。后来发现 draw.io CLI 只支持导出 PDF/PNG/SVG 图片格式不支持 VDX/VSDX 格式。坑 4Mermaid SVG 直接导入 Visio箭头会消失尝试过这个链路Mermaid → 在线渲染 SVG → Visio 导入。结果发现 Visio 对 SVG 的marker箭头的支持很差导入后箭头全部消失只剩方块和文字。必须通过 md2visio 调用 Visio COM 接口生成的原生 VSDX箭头才是正常的。坑 5自己手写 VSDX 几乎不可能VSDX 实际上是 ZIP 包内嵌规范的 OpenXML结构非常复杂。我尝试过用 Python 直接生成 VSDX折腾了整整一下午先试 VDXVisio 旧版 XMLVisio 只渲染了一个形状就停了再试 VSDX新版格式Visio 直接报文件已损坏最后发现 md2visio 这个现成工具一行命令搞定教训别重复造轮子有开源的先用开源的。九、常见问题Q1转换后的 VSDX 布局很乱怎么办md2visio 会自动布局但复杂流程图多少会有些位置偏差。建议用 GUI 版本v1.05 布局算法比 CLI 的 v0.2.0 好复杂的子流程先拆分为多个小图分别转换在 Visio 中用「自动对齐」功能微调Q2公司网络限制Mermaid 在线渲染打不开怎么办三种替代方案本地装 Mermaid CLInpm install -g mermaid-js/mermaid-cli用mmdc命令行本地渲染用 VS Code Mermaid 插件编辑.md文件时直接CtrlShiftV预览直接用 md2visio 生成 VSDX在 Visio 里看效果——这是最终交付物不需要单独看预览Q3md2visio 支持哪些 Mermaid 图表类型md2visio 支持flowchart、graph、sequenceDiagram、classDiagram、journey、pie、erDiagram。不支持gantt甘特图、stateDiagram、mindmap、timeline。如果你的图有这四种类型需要用 draw.io 或其他工具代替。Q4多个流程图能一次转换吗可以。一个.md文件中放多个 Mermaid 代码块md2visio 会为每个图生成独立的.vsdx文件。Q5Mac 能用来吗不行。md2visio 依赖 Windows 上的 Visio COM 接口macOS 上 Visio 不存在。Mac 用户的替代方案是用 mermaid.live 渲染成 SVG再导入 Keynote 或 OmniGraffle。十、总结这套工作流解决了三个核心痛点画图快—— 代码描述逻辑无需拖拽改图快—— 改几行代码重新转换不用手动调整布局交付兼容—— 最终输出标准 VSDX收件方用 Visio 打开无缝编辑如果团队也在用 Visio 画流程图不妨试试。一次配置长期受益。参考Mermaid 流程图语法md2visio CLImd2visio GUIDraw.io Desktop