Draw.io转Mermaid
将 Draw.io（diagrams.net）的 XML 格式一键转换为 Mermaid 流程图语法，支持 TD（自上而下）和 LR（从左到右）方向，实时预览渲染效果，可复制 Mermaid 代码或 Markdown 代码块，适合将现有 Draw.io 图表迁移到 Mermaid。
Draw.io XML 输入
支持 mxfile / mxGraphModel 格式
转换结果
Mermaid 代码
等待转换…
图形预览
转换后将在此处渲染流程图预览
功能特性
XML 解析
解析 Draw.io 的 mxfile/mxGraphModel/mxCell 结构，自动提取节点、连线和标签生成 Mermaid 语法。
方向切换
支持 TD（自上而下）与 LR（从左到右）两种布局方向，一键切换并自动重新生成代码与预览。
实时预览
内置 Mermaid 渲染引擎，转换后即时渲染 SVG 流程图，所见即所得，便于核对转换效果。
代码复制
一键复制生成的 Mermaid 代码到剪贴板，可直接粘贴到 Mermaid Live Editor 或文档中使用。
Markdown 导出
支持以 Markdown 代码块格式（```mermaid）复制，便于嵌入 GitHub README、博客或笔记。
示例加载
内置审批流程示例 XML，页面打开即自动加载并转换，帮助快速了解工具能力与使用方式。
使用说明
基本步骤
- 粘贴 XML：在 Draw.io（diagrams.net）中使用「文件 → 导出为 → XML」获取 XML，粘贴到输入框，或点击「加载示例」快速体验。
- 选择方向：在方向选择器中点击 TD（自上而下）或 LR（从左到右），若已有内容将自动重新转换。
- 点击转换：点击「转换为 Mermaid」按钮，后端解析 XML 并生成对应的 Mermaid 流程图代码。
- 复制代码：转换完成后点击「复制代码」，将 Mermaid 源码粘贴到 Mermaid Live Editor 或支持 Mermaid 的编辑器。
- 复制 Markdown：点击「复制 Markdown」可得到
```mermaid代码块格式，直接嵌入 Markdown 文档即可渲染。
典型使用场景
- 图表迁移：将历史 Draw.io 流程图迁移到 Mermaid，纳入版本控制与文档体系。
- 文档编写：在 Markdown 文档、GitHub README、Wiki 中以纯文本方式呈现流程图。
- 架构评审：快速把 Draw.io 绘制的架构图转为 Mermaid，便于在 PR/Review 中评审。
- 教学演示：对照 Draw.io XML 与 Mermaid 语法，理解两种图表描述方式的差异。
常见问题
支持哪些 Draw.io 元素？
工具支持解析 Draw.io 的
mxfile、mxGraphModel、mxCell 结构，能够识别普通矩形节点、菱形（决策节点）以及带 source/target 的连线，并提取 value 作为节点与连线标签。复杂的泳道、自定义样式、嵌套子图等高级特性可能无法完全还原，会尽量映射为基础流程图节点与连线。
TD 和 LR 方向有什么区别？
TD（Top-Down，自上而下）对应 Mermaid 的
graph TD，节点从顶部向底部排列，适合纵向流程图。LR（Left-Right，从左到右）对应 graph LR，节点从左向右排列，适合横向流程图或宽屏展示。切换方向后若输入框已有 XML 内容，将自动重新转换并刷新预览。
转换后能否再次编辑？
可以。本工具仅输出 Mermaid 源码，复制后可粘贴到任意支持 Mermaid 的编辑器（如 Mermaid Live Editor、VS Code Mermaid 插件、Typora 等）中继续修改节点文字、连线与样式。Mermaid 是纯文本语法，编辑与版本管理都非常方便。
Mermaid 是什么？
Mermaid 是一个基于 JavaScript 的图表生成库，使用类 Markdown 的纯文本语法描述流程图、时序图、甘特图、类图等，可在浏览器中渲染为 SVG。它被 GitHub、GitLab、Notion、Obsidian 等广泛支持，适合将图表以文本形式纳入文档与代码仓库。
是否支持中文标签？
支持。Draw.io 节点与连线中的中文标签会被原样提取并写入 Mermaid 代码，预览渲染时同样以中文显示。若中文中包含特殊字符（如括号、冒号、引号），Mermaid 可能需要用引号包裹节点文本，转换时会尽量做兼容处理。
这个工具是免费的吗？
完全免费，无需注册登录。XML 解析与转换由后端 API 处理，仅在请求过程中传输数据用于生成 Mermaid 代码，不会被持久化存储。Mermaid 图形渲染在浏览器本地完成，可放心使用。