编辑与预览
从有效 Mermaid 语法开始，修改源码时检查渲染结构，并参考语法反馈定位问题。
Loading diagram preview...
从源码编辑图表
Mermaid 在线编辑器
在上方粘贴 Mermaid 源码、检查实时预览并导出 SVG 或 PNG。需要某种图型的具体帮助时，可选择下方专项工具。Mermaid 工具页与通用编辑器共用当前工作区草稿。
结合源码与图形检查同一份模型
把源码作为可维护的图表版本，在发布图片前通过预览检查标签、分支与关系。
保留工作草稿
浏览器恢复当前工作区的草稿。这是本地连续编辑，不代替保存项目或单独保留源码。
调整输出主题
选择 Mermaid 主题，并对照图表实际使用的背景检查对比度。
在当前工作区使用 AI
聊天面板可帮助生成或调整源码，使用受账号权限和额度限制；保存项目需要登录。
从 Mermaid 源码得到可用图表
从能逐条检查连线的小图开始，成功渲染并能回答目标问题后再补细节。
- 01
选择对应语法
使用 flowchart LR、sequenceDiagram、classDiagram、erDiagram、stateDiagram-v2 或 gantt 等声明。粘贴源码时去掉外层 Markdown 代码围栏。
- 02
检查图形含义
处理语法反馈后，再检查方向、标签和每条关系的含义。能成功渲染不代表业务逻辑正确。
- 03
交付并保留源码
点击预览右上角的 SVG 或 PNG 按钮导出，分享当前草稿，或登录后保存为项目。保留源码便于后续结构修改。
根据目标环境选择 SVG 或 PNG
无论选择哪种格式，都保留 Mermaid 源码。导出的图片是发布结果，不是源码模型。
SVG：需要缩放的展示
目标支持时，可用于 README、文档站或网页。请在实际查看器中检查字体和标签，不保证设计软件能完整编辑所有元素。
Mermaid 转 SVG →PNG：普通图片附件
目标要求位图时使用。PNG 像素固定，并填充背景：深色主题为深色，其他主题为白色。当前没有自定义尺寸或透明背景选项。
Mermaid 转 PNG →草稿、保存、分享与语法支持
不登录可以编辑 Mermaid 吗？
可以编辑源码、预览图表、选择主题和下载 SVG 或 PNG。保存项目需要登录，AI 使用受账号权限和额度限制。
为什么打开其他工具页仍看到上一张图？
Mermaid 工具页与通用编辑器在当前浏览器中共用工作区草稿。已有源码优先于页面示例，打开专项工具不会覆盖正在处理的内容。
恢复的浏览器草稿等于已保存项目吗？
不等于。浏览器草稿用于本地续编，清理浏览器存储后可能丢失。需要通过账号访问时，请登录并保存项目；必要时另行保留源码副本。
应该从哪种 Mermaid 语法开始？
流程路径用 flowchart，消息顺序用 sequenceDiagram，软件类型用 classDiagram，数据库关系用 erDiagram，生命周期用 stateDiagram-v2，日期排期用 gantt。较新的语法可能需要当前编辑器尚未采用的 Mermaid 版本。
分享草稿会发生什么？
未登录用户分享当前图表时创建的是该图表的快照，之后的编辑不会更新该快照。已保存项目分享是单独的流程，需要明确选择分享哪些图表。
使用 AI 需要打开另一个编辑器吗？
不需要，当前页面工作区已经提供聊天面板，可以帮助生成或调整源码，使用受账号权限、模型可用性和额度限制。请检查生成的源码与图表再使用。