Mermaid Diagram Editor

Mermaid 编辑器支持使用 Mermaid 标记语言编写和预览流程图、序列图、类图、状态图、甘特图、饼图等多种图表。Mermaid 是一种文本驱动的图表生成工具，使用简单的 Markdown 风格语法描述图表结构。该编辑器提供实时预览和语法高亮功能，帮助开发者用代码的方式创建和版本管理图表。

Mermaid 已成为技术文档的标准图表工具：在 Markdown 文档中嵌入流程图（常用于 README 和 GitHub 仓库）、在技术设计文档中绘制系统架构图和序列图、在项目管理中使用甘特图展示项目计划、在 API 文档中绘制状态转移图（如订单状态流转）、以及在会议记录中使用饼图展示数据分布。GitHub、GitLab、Notion 等平台原生支持渲染 Mermaid 图表。

生成的 SVG 图表可通过 SVG 预览器 查看和导出。SVG 优化器 可压缩导出图表。Markdown 预览器 可预览包含 Mermaid 图表的完整文档。代码截图工具 可将 Mermaid 代码制作成截图。

Mermaid 解析流程：输入文本经过词法分析器（Lexer）转换为 token 流，语法分析器（Parser）根据 token 流构建抽象语法树（AST），渲染器根据 AST 生成 SVG 或 Canvas 路径。例如，流程图将节点渲染为矩形/菱形/圆形，连线使用直线或贝塞尔曲线；序列图用生命线（垂直线）和箭头（水平线）表示参与者之间的消息传递。Mermaid 的布局使用 Dagre（有向图）等布局算法自动排列节点。

• 语法版本差异：Mermaid 的语法随版本更新变化（如从 graph TD 到 flowchart TD 的演进），旧语法在新版本中可能产生不同的渲染结果。
• 布局局限性：Mermaid 自动布局可能不总是最优。复杂图表的节点位置可能显示异常，需要手动增加方向提示（如 TD、LR）。
• 特殊字符转义：节点文本中的特殊字符（引号、括号、#）需要正确转义，否则可能导致解析错误。
• 渲染平台差异：不同平台（GitHub、GitLab、Notion）的 Mermaid 版本和渲染器可能略有差异，同一段代码在不同平台效果可能不同。

在编写技术文档、设计系统架构或创建演示图表时使用此工具。作为 Markdown 原生图表方案，Mermaid 更适合代码化、版本控制友好的图表管理。对于需要复杂视觉效果或精确布局的图表，推荐使用 Draw.io、Excalidraw 或 Visio 等图形化工具。对于自动生成 API 文档图表，使用 mermaid-cli 命令行工具在 CI/CD 中集成。