实时 Mermaid 预览
编辑源码时同步更新图表，语法问题会直接显示在代码旁，不会静默失败。
浏览器图表工作区
Mermaid 在线编辑器
在线编写 Mermaid 语法，实时检查图表变化，无需安装本地渲染器即可导出 SVG 或 PNG。适合快速修改，也可继续进入 OnUML 使用 AI 生成、修复、分享和项目管理。
为图表即代码而设计
直接、清晰的 Mermaid 编辑流程
页面同时显示源码和渲染结果，让团队既能评审代码，也能评审图表所表达的信息，而不是维护一张与定义脱节的图片。
可移植的文本源码
图表以可读文本保存，能够进入 Markdown、技术文档、工单和版本控制。
导出 SVG 和 PNG
下载适合缩放文档的矢量 SVG，或用于演示文稿和图片工具的高清 PNG。
适配不同主题
导出前切换 Mermaid 主题，让图表适合技术文档、演示文稿或深色界面。
如何使用 Mermaid 在线编辑器
先创建较小的初稿并验证结构，再逐步添加细节。容易编辑的图表通常也更容易阅读。
- 01
从有效 Mermaid 语法开始
使用内置流程图，也可以替换为时序图、类图、ER 图、甘特图或其他支持的类型。
- 02
检查实时预览
在源码仍然容易修改时，检查标签、方向、层级和关系是否清晰。
- 03
修复源码而不是图片
渲染器报告错误时，修改 Mermaid 声明或错误信息指出的源码行。
- 04
导出或继续编辑
直接下载 SVG 或 PNG，也可以把当前源码带入完整 OnUML 编辑器继续使用 AI。
从快速预览进入完整图表工作流
根据描述生成图表
让完整编辑器把系统、流程或交互描述转换为 Mermaid 源码。
结合上下文修复语法
当大型图表渲染失败、解析器信息不足时，使用 AI 辅助修复。
组织和分享工作成果
集中管理相关图表，稍后继续编辑，并向评审者分享稳定结果。
常见问题
Mermaid 在线编辑器可以免费使用吗？
可以。你可以直接编辑 Mermaid 源码、实时预览结果、切换主题，并从当前页面导出 SVG 或 PNG。
可以预览哪些 Mermaid 图表类型？
编辑器使用 Mermaid.js，支持流程图、时序图、类图、状态图、ER 图、甘特图、时间线、思维导图和 Git 图等标准语法。
可以把 Mermaid 图表下载为 SVG 或 PNG 吗？
可以。SVG 适合需要缩放的技术文档和网站，PNG 适合演示文稿以及不能直接渲染 Mermaid 源码的工具。
需要安装 Mermaid 或其他应用吗？
不需要。图表直接在浏览器中渲染，可以从页面内置示例开始使用，无需安装命令行工具或桌面应用。
这个页面和完整 OnUML 编辑器有什么区别？
本页面用于快速编辑、预览和导出 Mermaid 图表。完整编辑器还提供 AI 生成、语法修复、项目管理、分享和多图表工作流。