Ctrl K
Mermaid 渲染器 · 使用说明
Mermaid 渲染器把文本代码实时画成图表：流程图、时序图、甘特图、状态图、类图都支持，改一行代码图立即更新。渲染结果可导出 SVG 矢量图或两倍清晰度的 PNG，直接用于文档、Wiki 与汇报材料。mermaid 体积较大，仅在首次渲染时从 CDN 懒加载，其余全部本地完成，图表代码与内容不会上传。写技术文档时配合 Markdown 预览使用更顺。
示例
输入
graph LR 用户 -->|提交工单| 网关 网关 --> 校验 校验 -->|通过| 处理
输出
渲染出一张从用户到处理的横向流程图，可下载 SVG / PNG
如何使用
- 在左侧粘贴或编写 Mermaid 代码
- 稍等片刻，右侧实时渲染出图表
- 导出 SVG 或 PNG，插入文档或发送给同事
小贴士
- graph LR / TD 控制方向，时序图用 sequenceDiagram
- 渲染报错时检查关键字拼写与箭头写法
- dark 主题适合深色幻灯片，导出 PNG 自带 2 倍清晰度
常见问题
Mermaid 渲染器会上传我的图表吗？
不会。渲染在你的浏览器里完成，图表代码不会上传；mermaid 库本身（约 1 MB）只在首次渲染时从 CDN 懒加载，加载后完全离线运行，与 Markdown 预览 一样纯本地。
为什么第一次渲染要等几秒？
mermaid 库体积较大（约 1 MB），首次渲染需要从 CDN 下载一次，之后浏览器会缓存；本站坚持「大依赖懒加载」，不渲染图表就一个字节都不下载，首屏速度不受影响。
支持哪些图表类型？
支持 mermaid 的主流图型：流程图（graph）、时序图（sequenceDiagram）、类图（classDiagram）、状态图（stateDiagram）、甘特图（gantt）、饼图（pie）等；个别实验性图型以 mermaid 版本支持为准。
渲染报错了怎么排查？
常见原因是关键字拼写、箭头写法或节点名含特殊字符；报错信息会原样展示在预览区上方，按提示修正即可。节点文字建议用引号包裹含括号或冒号的文本。
导出的 SVG / PNG 用在哪？
SVG 矢量图适合放进文档与网页，无限缩放不糊；PNG 按 2 倍尺寸导出，适合插入 PPT、聊天窗口与工单。想整篇文档一起导出，可用 Markdown 转 PDF / 长图。