一、你是不是也在被 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 中完全可编辑——就像你亲手画的一样。

三、环境准备

3.1 安装 md2visio GUI（推荐）

1. 打开 md2visio-gui Releases
2. 下载最新版 win-x64.zip（约 140MB）
3. 解压即用，无需安装

GUI 版自带 .NET 运行时，零配置启动。

3.2 安装 md2visio CLI（可选，适合自动化）

1. 打开 md2visio Releases
2. 下载最新版 md2visio-vX.X.X.zip
3. 安装 .NET 8.0 Runtime

四、Mermaid 流程图速成

流程图核心就三种节点：

连线语法：

更多语法参考 Mermaid 官方文档。

五、实战：将 Jira 处理流程转为 Visio

5.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 转换为 VSDX

GUI 方式：

1. 启动 md2visio.GUI.exe
2. 将 .md 文件拖入窗口
3. 点击转换 → 输出 .vsdx

CLI 方式：

$env:DOTNET_ROOT = "<.NET 安装路径>"
md2visio.exe /I "流程图.md" /O "输出目录\" /Y

5.3 在 Visio 中微调

用 Visio 打开生成的 .vsdx，所有形状和连线都可自由拖动、改色、调整样式。通常只需微调几个节点的位置即可。

六、更新流程

流程变更后不需要从头画：

1. 修改 .md 文件中的 Mermaid 代码
2. 再次拖入 md2visio GUI → 转换
3. 重新打开 VSDX

增量修改用代码实现，最终美化留给 Visio。

七、备选方案对比

八、踩坑指南（亲历）

在探索这套方案的过程中，我踩了很多坑。记录如下，帮你少走弯路。

坑 1：Draw.io 免费版无法导出 VSDX

Draw.io 在线版（app.diagrams.net）和桌面版都很好用，但免费版不支持导出 VSDX。网上有些教程说可以，那是因为他们用的是 Confluence 付费版的 draw.io 插件。

如果你已经在 draw.io 里画好了图想转 VSDX，要么手工迁移到 Mermaid，要么用 draw.io 导出 SVG 然后在 Visio 里导入——但箭头会丢失（见坑 4）。

坑 2：md2visio CLI 需要 .NET 运行时，GUI 不需要

md2visio 有两个版本：

我第一次直接用 CLI 版本，报错 hostfxr.dll not found，折腾了半小时才发现必须装 .NET Runtime。换 GUI 版本一拖就完事了。

建议：日常用 GUI，CI/自动化场景再用 CLI。

坑 3：Draw.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 格式。

坑 4：Mermaid SVG 直接导入 Visio，箭头会消失

尝试过这个链路：Mermaid → 在线渲染 SVG → Visio 导入。结果发现 Visio 对 SVG 的 <marker> 箭头的支持很差，导入后箭头全部消失，只剩方块和文字。

必须通过 md2visio 调用 Visio COM 接口生成的原生 VSDX，箭头才是正常的。

坑 5：自己手写 VSDX 几乎不可能

VSDX 实际上是 ZIP 包内嵌规范的 OpenXML，结构非常复杂。我尝试过用 Python 直接生成 VSDX，折腾了整整一下午：

1. 先试 VDX（Visio 旧版 XML），Visio 只渲染了一个形状就停了
2. 再试 VSDX（新版格式），Visio 直接报"文件已损坏"
3. 最后发现 md2visio 这个现成工具，一行命令搞定

教训：别重复造轮子，有开源的先用开源的。

九、常见问题

Q1：转换后的 VSDX 布局很乱，怎么办？

md2visio 会自动布局，但复杂流程图多少会有些位置偏差。建议：

• 用 GUI 版本（v1.05 布局算法比 CLI 的 v0.2.0 好）
• 复杂的子流程先拆分为多个小图，分别转换
• 在 Visio 中用「自动对齐」功能微调

Q2：公司网络限制，Mermaid 在线渲染打不开怎么办？

三种替代方案：

1. 本地装 Mermaid CLI：npm install -g @mermaid-js/mermaid-cli，用 mmdc 命令行本地渲染
2. 用 VS Code + Mermaid 插件，编辑 .md 文件时直接 Ctrl+Shift+V 预览
3. 直接用 md2visio 生成 VSDX，在 Visio 里看效果——这是最终交付物，不需要单独看预览

Q3：md2visio 支持哪些 Mermaid 图表类型？

md2visio 支持：flowchart、graph、sequenceDiagram、classDiagram、journey、pie、erDiagram。

不支持：gantt（甘特图）、stateDiagram、mindmap、timeline。

如果你的图有这四种类型，需要用 draw.io 或其他工具代替。

Q4：多个流程图能一次转换吗？

可以。一个 .md 文件中放多个 Mermaid 代码块，md2visio 会为每个图生成独立的 .vsdx 文件。

Q5：Mac 能用来吗？

不行。md2visio 依赖 Windows 上的 Visio COM 接口，macOS 上 Visio 不存在。Mac 用户的替代方案是用 mermaid.live 渲染成 SVG，再导入 Keynote 或 OmniGraffle。

十、总结

这套工作流解决了三个核心痛点：

1. 画图快 —— 代码描述逻辑，无需拖拽
2. 改图快 —— 改几行代码重新转换，不用手动调整布局
3. 交付兼容 —— 最终输出标准 VSDX，收件方用 Visio 打开无缝编辑

如果团队也在用 Visio 画流程图，不妨试试。一次配置，长期受益。

参考

• Mermaid 流程图语法
• md2visio CLI
• md2visio GUI
• Draw.io Desktop