使用方法
用于预览 Mermaid 图表的工具，适合在整理图表时快速试验语法，或确认规格说明图的显示效果。通过切换主题，也能在分享前比较输出外观。
适用场景
可实现内容
指南
按画面区域说明设置、输入、预览、结果和保存等操作方法。
01 HOWTO
在左侧输入 Mermaid 语法。可以先选择图表模板，再根据当前图表类型插入补全候选，并在右侧预览中确认结构。
可以输入流程图、时序图、类图等 Mermaid 语法。
输入为空时，可以选择图表类型并插入基础结构。
可以在光标位置插入节点、连接、分支等符合当前图表类型的候选。
语法有问题时，可以查看预览侧的显示并修正输入。
02 HOWTO
使用输入框上方的模板和补全候选、顶部的历史记录，以及输入框右上角的清空和复制操作来编辑图表。这里用于创建基础结构、追加部件和复用草稿。
可以选择流程图、时序图、类图等基础结构并插入输入框。
可以追加节点、连接、分支、循环等符合当前语法的部件。
当前输入会作为草稿保存在浏览器中，也可以从历史记录回到最近的编辑状态。
可以删除当前语法并重新创建图表。
可以将编辑中的语法复制到 README 或规格文档。
03 HOWTO
在右侧预览栏确认 Mermaid 的绘制结果，并在分享前切换主题。无法绘制时，错误内容也会显示在这里。
可以改变背景和线条颜色，选择适合共享位置的显示效果。
可以确认输入的 Mermaid 语法是否绘制成预期图形。
无法绘制时，先查看错误消息再修正语法。
可以参考预览结果，回到编辑器调整语法。
04 HOWTO
使用预览上方的输出操作选择 SVG 或 PNG，并复制或下载绘制好的图。无法输出时，可查看错误并返回输入栏修正。
可在 SVG 和 PNG 之间切换，选择适合共享或粘贴位置的格式。
可以按当前选择的格式复制绘制好的图，并粘贴到文档或聊天中。
可以将绘制好的图保存为 SVG 或 PNG 文件。
可以复制生成图形所用的 Mermaid 语法，并与图片一起共享。
无法输出图形时，可以查看错误并返回输入栏修正。
注意事项
将使用前应先判断的重要点按原因归纳整理。
确认事项
如果一次加入太多元素，错误原因会更难定位。建议先从最小可用语法开始，再逐步增加节点或分支。
确认事项
即使是同一份 Mermaid 语法，不同主题下的背景与线条颜色也会不同。使用接近最终展示环境的主题，可减少返工。
注意
语法有误时，预览区域会显示错误信息。图表未能显示时，请先查看错误信息，修正语法后再试。
FAQ
这里先整理能帮助使用前判断的常见问题。
可以。支持 SVG 与 PNG，并提供复制与下载操作。
错误信息会显示在预览下方，编辑时可立即定位有问题的部分。
支持流程图、时序图、类图、ER 图、甘特图等 Mermaid 标准支持的图表类型。
Mermaid 官方文档中有各类图表的语法说明。可以在本页边写语法边确认效果。
切换主题可改变包括背景色在内的整体样式。可以比较不同主题下的显示效果。
可保存为 SVG 或 PNG 后分享，也支持复制到剪贴板。
下一步指南
这里整理了相关指南，便于继续操作时不迷失。
