Mermaid图表在线编辑 - 文本转流程图

Mermaid 是一个基于文本的图表生成工具，使用类似 Markdown 的简洁语法来描述图表结构。它就像是图表界的 Markdown——用纯文本编写，自动渲染为可视化图表。

核心优势：

• ✅ 纯文本驱动：无需拖拽，代码即图表，便于版本控制（Git友好）
• ✅ 多类型支持：流程图、时序图、甘特图、类图、状态图、饼图、ER图等
• ✅ 广泛集成：GitHub、GitLab、Notion、Obsidian等平台原生支持
• ✅ 快速迭代：修改文本即可更新图表，效率远超图形化工具
• ✅ 免费开源：社区活跃，持续更新

流程图使用 graph 或 flowchart 关键字定义，基本语法如下：

graph TD
    A[开始] --> B{是否通过?}
    B -->|是| C[执行操作]
    B -->|否| D[返回重试]
    C --> E[结束]
    D --> A

方向控制：

• TD / TB - 从上到下
• LR - 从左到右
• RL - 从右到左
• BT - 从下到上

节点形状：[]矩形、()圆角、{}菱形、(())圆形、[()]圆柱形等。

时序图用于展示对象之间的交互顺序，使用 sequenceDiagram 关键字：

sequenceDiagram
    participant 客户端
    participant 服务器
    participant 数据库
    客户端->>服务器: 发送请求
    服务器->>数据库: 查询数据
    数据库-->>服务器: 返回结果
    服务器-->>客户端: 响应数据

箭头类型：

• ->> 实线箭头（同步调用）
• -->> 虚线箭头（返回/异步）
• -x 实线带叉（失败）
• -) 异步箭头

可使用 Note、loop、alt、opt 等高级特性丰富表达。

甘特图用于项目管理，使用 gantt 关键字：

gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计阶段
    需求分析    :done, a1, 2024-01-01, 2024-01-07
    UI设计      :active, a2, 2024-01-08, 2024-01-14
    section 开发阶段
    前端开发    :b1, 2024-01-15, 2024-02-05
    后端开发    :b2, 2024-01-15, 2024-02-10
    测试部署    :crit, c1, 2024-02-11, 2024-02-18

状态标记：done已完成、active进行中、crit关键任务、milestone里程碑。

日期格式通过 dateFormat 指定，支持多种日期格式。

支持两种导出格式：

• SVG 矢量图：可无损缩放，适合嵌入网页、文档，文件体积小。点击工具栏「SVG」按钮即可下载。
• PNG 位图：适合在PPT、Word等办公软件中使用，兼容性更好。点击工具栏「PNG」按钮导出。

导出技巧：

• 导出前可调整缩放级别，PNG导出会使用当前缩放后的尺寸
• SVG导出保留矢量特性，推荐用于高质量场景
• 支持复制代码到支持Mermaid的平台（如GitHub、Notion）直接渲染

常见错误及修复：

1. 节点标签含特殊字符：使用双引号包裹，如 A["节点: 包含特殊字符"]
2. 箭头语法错误：确保箭头符号完整，流程图用 -->，时序图用 ->>
3. 子图未闭合：subgraph 必须有对应的 end
4. 中文/Unicode问题：Mermaid完全支持中文节点名，但建议用引号包裹含空格的文本
5. 缩进问题：虽然Mermaid对缩进不严格，但保持一致的缩进有助于排查问题

本工具会实时检测语法错误并在预览区显示详细错误信息，帮助快速定位问题。

Mermaid 的应用场景非常广泛：

• 📄 技术文档：API交互流程、系统架构图、数据流向图
• 📊 项目管理：甘特图规划项目进度、里程碑追踪
• 🏗️ 软件设计：类图展示面向对象设计、ER图展示数据库结构
• 🔄 业务流程：审批流程、订单状态流转、用户操作路径
• 📝 会议沟通：快速绘制思路、替代白板草图
• 🎓 教学培训：算法流程演示、知识体系梳理