步骤 1
输入 Mermaid 语法
在左侧输入区域中编写 Mermaid 语法，内容会自动反映到右侧预览中。
确认点
- 输入区域中显示 Mermaid 语法
- 右侧预览会自动更新
本画面的操作
01
输入 Mermaid 语法
可直接输入流程图或时序图语法，并立即反映到图表中。
02
清空输入
可清除当前 Mermaid 语法，从最小示例重新开始。
03
复制语法
可直接复制 Mermaid 语法，并粘贴到 README 或规格文档中。
使用方法
Mermaid 预览的使用方法
用于预览 Mermaid 图表的工具，适合在整理图表时快速试验语法，或确认规格说明图的显示效果。通过切换主题，也能在分享前比较输出外观。
- 步骤
- 2 步
- 指南
- 附截图说明
- 内容
- 注意事项与 FAQ
适用场景
适合在这些时候使用
- 快速确认规格文档中的流程图
- 尝试并微调时序图语法
- 在写入文档前确认 Mermaid 图表外观
- 在设计评审前快速整理时序图
- 尝试 ER 图或甘特图的语法
- 在分享给团队前确认图表外观
可实现内容
这个工具可以做什么
- 并排查看 Mermaid 语法与图表
- 切换主题
- 确认语法错误并复制源码
- 将图表保存或复制为 SVG 或 PNG
- 在预览下方实时显示错误信息
- 支持流程图、时序图、ER 图等主要图表类型
步骤
步骤
这里按顺序整理操作流程与确认点，便于边看页面边继续操作。
步骤 2
确认主题与输出结果
在右侧确认图表的同时切换主题。可根据分享方式选择 SVG 或 PNG 的复制与下载。
确认点
- 右侧会显示 Mermaid 图表
- 切换主题后外观会变化
- 可使用 SVG 与 PNG 的复制或下载操作
本画面的操作
01
切换主题
可在 GitHub Light、GitHub Dark、Presentation、Notebook、Terminal 之间切换，以确认背景与线条颜色。
02
确认图表
可使用 SVG 复制或下载，以矢量形式复用输出结果。
03
PNG 输出
如果想以图片形式分享，可使用 PNG 的复制或下载。
注意事项
注意事项
将使用前应先判断的重要点按原因归纳整理。
确认事项
先从能渲染的最小语法开始
如果一次加入太多元素，错误原因会更难定位。建议先从最小可用语法开始，再逐步增加节点或分支。
确认事项
切换主题以确认线条与文字可见性
即使是同一份 Mermaid 语法，不同主题下的背景与线条颜色也会不同。使用接近最终展示环境的主题，可减少返工。
注意
语法错误显示在预览下方
语法有误时，预览区域会显示错误信息。图表未能显示时，请先查看错误信息，修正语法后再试。
FAQ
关于 Mermaid 预览 的常见问题
这里先整理能帮助使用前判断的常见问题。
可以把图表保存成图片吗？
可以。支持 SVG 与 PNG，并提供复制与下载操作。
在哪里查看语法错误？
错误信息会显示在预览下方，编辑时可立即定位有问题的部分。
支持哪些图表类型？
支持流程图、时序图、类图、ER 图、甘特图等 Mermaid 标准支持的图表类型。
在哪里可以查看语法说明？
Mermaid 官方文档中有各类图表的语法说明。可以在本页边写语法边确认效果。
可以更改图表背景色吗？
切换主题可改变包括背景色在内的整体样式。可以比较不同主题下的显示效果。
如何将图表以图片形式分享？
可保存为 SVG 或 PNG 后分享，也支持复制到剪贴板。
下一步指南
相关指南
这里整理了相关指南，便于继续操作时不迷失。
