2026 年 5 月 23 日
支持在浏览器标签中区分多个流程图
新增支持定义自定义图表名称，方便打开多个流程图后通过浏览器标签进行区分。
- 新增支持定义自定义图表名称。
- 方便通过浏览器标签区分多个流程图。
Mermaid 转 PNG 工具
使用浏览器本地工具将 Mermaid 图表转为高质量 PNG。粘贴代码即可预览流程图或时序图，选择主题、背景与导出倍率后下载，适用于文档、幻灯片与缺陷报告，无需把图表源码上传到转换服务器。
快速浏览器本地无需注册PNG 导出实时预览
Mermaid 代码
示例
预览
导出设置
主题
背景
倍率
更新日志
这里记录 Mermaid 转 PNG 工具最近上线的改动。
为什么使用这个 Mermaid 转 PNG 工具？
简单聚焦
专注于一件事：快速把 Mermaid 图表代码转换成可下载的 PNG 图片。
浏览器本地处理
Mermaid 渲染和 PNG 导出在浏览器中完成，核心流程不依赖服务端转换。
高清导出
支持 1x、2x、3x、4x 导出倍率，方便用于文档、幻灯片、报告和博客。
如何将 Mermaid 转为 PNG
1
将 Mermaid 代码粘贴到编辑器。
2
查看实时图表预览。
3
选择主题、背景、导出倍率和文件名。
4
点击下载 PNG。
位图导出需要接受的取舍
语法必须是合法 Mermaid
无效图表会显示渲染错误，请先按 Mermaid 语法修正再导出。
位图无法再当 Mermaid 编辑
PNG 是像素。若还需修改图表，请保留原始 Mermaid 文本。
超大图可能吃力
节点极多或导出倍率过高会拖慢低内存设备，可降低倍率或简化图表。
不是协作白板
评论、多人光标与云端图表库属于专门架构工具；本页聚焦快速导出。
无法运行 Mermaid 时，用 PNG 快照交付
什么时候该把 Mermaid 交成 PNG
Mermaid 转 PNG 面向无法执行 Mermaid 代码块的目标：许多聊天应用、较老的 Wiki、只收位图的幻灯片模板，以及会剥离实时图表语法的缺陷跟踪系统。粘贴合法 Mermaid、确认实时预览、选择主题与背景、设定导出倍率，然后下载 PNG，评审无需安装预览扩展。
请把原始 Mermaid 文本与 PNG 一并保存。位图只是快照；架构下周变更时应改文本再导出，而不是涂改像素。若目标允许矢量且需要印刷或缩放清晰度，请改用同站的 Mermaid 转 SVG。
3x–4x 高倍率有助于投影与高分屏幻灯片，但超大图加 4x 可能拖慢低内存标签页。渲染卡顿时简化节点或降到 2x。语法无效会显示渲染错误——先修代码再怀疑导出器。
主题、背景与透明幻灯片
浅色主题配白色或透明背景通常更适合打印讲义；深色主题适合贴进深色文档的截图。透明 PNG 能干净叠在品牌幻灯片母版上；不透明白底可避免部分邮件客户端出现怪棋盘预览。
同时处理多份流程图时为图表命名，便于在浏览器标签里区分时序图与 ER 图。核心渲染与下载路径使用浏览器内的 Mermaid 与 Canvas，下载 PNG 无需把源码上传到 DK-JS 服务器。
PNG 图表真正落地的工作流
文档与 README 配图
当仓库托管或 Wiki 需要位图而不是实时 Mermaid 渲染时，把流程图导出为 PNG。
幻灯片与干系人同步
把时序图或状态图放进演示文稿，方便未安装 Mermaid 预览扩展的观众阅读。
缺陷报告与架构说明
附上 ER 或类图的 PNG，让评审看到你意图中的同一快照。
博客与 Notion 页面
在无法执行 Mermaid 代码块的平台上发布图表图片。
新人入职材料
在入职 CMS 无法依赖实时 Mermaid 时，把静态系统图 PNG 与清单文档一起打包。
聊天里同步的故障时间线
导出精简的处置步骤流程图，无需插件即可贴进 Slack 或 Teams。
图表源码与浏览器标签
图表代码留在浏览器
核心流程的 Mermaid 渲染与 PNG 导出在客户端完成，下载 PNG 无需把源码上传到 DK-JS 服务器。
若粘贴专有架构文本，请在可信设备上操作并在结束后清理。
Mermaid 转 PNG 常见问题
Mermaid 转 PNG 是把文本形式的 Mermaid 图表代码转换成 PNG 图片文件，便于在文档、幻灯片、网站和报告中使用。
不会。核心渲染和 PNG 导出流程使用 Mermaid 与 Canvas 在浏览器中完成。
可以。下载前选择透明背景即可导出透明 PNG。
目标是支持常见 Mermaid 图表，包括流程图、时序图、类图、状态图、ER 图、甘特图、思维导图和饼图等。
目标只接受位图（许多聊天应用与部分 CMS）时选 PNG；需要无限缩放、偏矢量排版或印刷清晰度时，使用 Mermaid 转 SVG。
核心渲染与 PNG 下载在浏览器中完成。避免在公用电脑的图表里粘贴机密，需要干净素材时优先下载而不是截图。