Mermaid 图表渲染
Mermaid 代码即贴即渲染成图表，一键导出高清 PNG，四套主题。
使用说明
这个工具解决什么问题
让 AI 画流程图、时序图,它输出的几乎都是 Mermaid 代码——然后呢?VS Code 要装插件,线上渲染器国内访问飘忽,截图又糊。这个工具补上最后一环:粘贴代码立即出图,四套主题一键换色,直接导出高清 PNG 贴进公众号和文档。AI 生成图表的完整闭环,从此不缺渲染这一环。
核心能力
即贴即渲染:flowchart、时序图、饼图、甘特图、思维导图等主线类型全覆盖。四套主题:默认、中性、暗色、森林,一键换配色。高清导出:1x/2x/3x PNG,白色或透明背景,与 SVG 预览导出工具同一管线。错误友好:语法错误清洗成一行可读提示,贴错内容(如 SVG)会明确指路。懒加载:mermaid 库只在渲染时加载,不拖慢页面。
AI 助手生成图表：在补充说明里描述想要的图(流程/时序/层级),生成的 Mermaid 代码一键填入代码框立即渲染;左侧已有代码时按「按需求修改」处理,未涉及部分保持原样。走你保存的模型端点。
使用建议
让 AI 生成图表后第一时间贴进来验收,语法错误直接改代码重试;公众号配图选 2x 白底;配色不满意切主题,不用改代码;需要精修时下载 SVG 源码进矢量编辑器。
常见问题
哪些图表类型支持渲染?
覆盖 Mermaid 主线类型:流程图(flowchart/graph)、时序图(sequenceDiagram)、类图、状态图、ER 图、甘特图、饼图、用户旅程图、思维导图(mindmap)、时间线、gitGraph、象限图等。输入会先做类型预检,贴错内容(如 SVG)会明确指路对应工具。
渲染报错说语法失败,怎么排查?
报错信息已清洗成一行可读文字,多数会指出出错行号与期望的符号。高频坑有三个:节点文字含特殊字符要用引号包起来(如 A["文本(带括号)"])、箭头写法混用(-- > 与 ->) 、注释没加 %% 前缀。对照报错行修正即可。
导出的 PNG 如何用于公众号与文档?
默认 2x 白底,直接插入正文即可;需要叠加素材选透明背景;大幅面或要裁剪选 3x。Mermaid 是矢量渲染后位图化,文字与线条锐利不糊,比屏幕截图清晰得多。
渲染在本地进行吗,图表数据会上传吗?
完全在浏览器本地渲染,图表代码与数据零上传。mermaid 库在首次渲染时才从站点下载并缓存,之后离线打开页面也能用。