mermaid.live等流程图免费导出工具 mermaideditor.app/zh/

先说核心真相

官方 https://mermaid.live/ 本身完全免费，导出PNG/SVG/PDF没有任何付费门槛，不会收费 。

你感觉"要收费"只有两种真实原因，不是网站收费：

国内网络访问不全，导出按钮点不动、渲染服务加载失败（最常见）；
你之前打开过 mermaid.ai / mermaidonline.live 这类商业付费站，混淆了域名，弹窗付费记忆叠加了。

一、mermaid.live 导出正确操作（无付费）

页面右上角 Actions 下拉菜单（不是Share、不是Pro弹窗）
菜单里三个免费下载项：
- Download PNG
- Download SVG（矢量图推荐）
- Download PDF
Pro弹窗只是AI绘图、云端存储、多人协作增值功能，完全不影响基础导出，关掉弹窗就能正常下载，不用付费。

二、国内打不开导出按钮的修复方案（必试）

强制刷新页面：Ctrl+Shift+R，清空浏览器缓存；
切换浏览器：Edge/Chrome无痕模式打开；
超大流程图（你这张scatter_nd）先加上布局配置，减轻渲染压力，避免导出卡死：

渲染错误: Mermaid 渲染失败: Parse error on line 2: graph TD# 你的流程图代码 ----------^ Expecting 'SEMI', 'NEWLINE', 'EOF', 'AMP', 'START_LINK', 'LINK', 'LINK_ID', got 'UNICODE_TEXT'

三、国内零门槛、导出完全免费替代（不用翻墙，无付费弹窗）

方案1：国内中文在线编辑器（首选，速度最快）

https://mermaideditor.app/zh/

纯国内站点，中文界面，导出PNG/SVG/PDF全部免费无水印；
粘贴你的完整代码直接渲染，没有任何付费弹窗干扰。

方案2：Draw.io（老牌开源绘图，永久免费）

https://app.diagrams.net/

左侧「更多形状」开启Mermaid插件；
粘贴代码渲染；
文件→导出，所有格式免费，适合二次编辑图表。

方案3：本地离线方案（完全不依赖网络，零收费）

VS Code
安装插件：Markdown Preview Mermaid Support
新建.md，包裹```mermaid代码，预览页面右键直接保存图片。
Obsidian笔记
安装Mermaid插件，本地渲染导出，无任何限制。

方案4：极简在线工具 webtoolz.dev/mermaid

纯前端本地渲染，不上传代码，一键导出SVG/PNG，全程无广告无付费。

总结

官方live不存在导出收费，卡住是网络问题；不想折腾直接用国内中文编辑器 mermaideditor.app/zh/，复制代码就能免费下载大图。

你正在寻找可以在线绘制流程图并直接保存为PNG图片 的网站，而且不希望是SVG格式 。我为你整理了几个支持此功能的在线流程图工具，以及它们的导出方法和特点。我会用表格汇总它们的主要信息，然后详细说明如何导出PNG，最后根据不同需求给些选择建议。

🖼️ 支持导出PNG的在线流程图工具

工具名称	主要特点	免费额度/限制	PNG导出特点	适用场景
ProcessOn	国产老牌，模板丰富，支持多人协作，有AI生成功能	免费用户可创建9个文件	支持高清PNG 导出，可勾选透明背景	中文环境、团队协作、需快速套用模板
Draw.io (diagrams.net)	完全免费，无需注册，开源，功能强大，数据安全（默认本地保存）	无任何限制	支持PNG 、JPG 、PDF 、SVG等多种格式导出	追求免费无限制、注重数据隐私、熟悉英文界面
迅捷画图	国产，操作简便，模板库庞大（1600+），自动对齐排版功能实用	免费用户有一定限制，具体可查看官网	支持图片、PDF等格式一键导出	新手入门、需要自动排版辅助、偏好中文界面
GraphvizOnline	代码驱动，通过DOT语言绘制，适合程序员，自动布局效果佳	完全免费，无需注册	支持PNG 、SVG 、PDF等格式导出	喜欢用代码绘图、绘制复杂系统架构图、追求自动化布局
Mermaid Live Editor	代码驱动，语法简洁，实时预览，支持手绘风格等特效	完全免费，无需注册	支持PNG 、SVG 、PDF等格式导出	喜欢用代码绘图、在Markdown文档中嵌入流程图、追求创意风格

📋 如何导出为PNG图片

下面我以常用的工具为例，说明导出PNG的具体步骤。核心操作路径 通常是："文件" (File) → "导出" (Export) 或 "下载为" (Download As) → 选择 "PNG" 格式。

1. ProcessOn 导出PNG

完成流程图编辑后，点击左上角 "文件" 菜单。
选择 "导出" 或 "下载为"。
在弹出的选项中，选择 "PNG图片" 格式。
- 高清模式：建议勾选此选项以获得更清晰的图片。
- 透明背景：如果你希望流程图背景透明（方便贴在其他图片或PPT上），可以勾选此选项。
点击确定，即可下载PNG文件。

2. Draw.io (diagrams.net) 导出PNG

绘制完成后，点击左上角 "文件" (File) 菜单。
选择 "导出为" (Export As)。
从子菜单中选择 "PNG" 格式。
在弹出的对话框中，可以调整边距 （建议选中"调整页面大小"）和缩放比例（默认即可，或设置为200%以获得更高清图片）。
点击 "导出" (Export)，即可保存PNG文件。

3. GraphvizOnline / Mermaid Live Editor 导出PNG

这两款是代码驱动的工具，导出方式非常相似：

在左侧代码编辑器输入或编写好你的流程图代码（DOT语言或Mermaid语法）。
右侧会自动实时预览生成的流程图。
点击工具栏上的 "Download" 或 "导出" 按钮。
在弹出的菜单中选择 "PNG" 格式，即可下载图片。

💡 PNG导出小技巧：

提升清晰度 ：在导出前，适当放大画布（例如在Draw.io中缩放至150%-200%），然后再进行导出，可以有效提升导出图片的清晰度。

透明背景：大部分工具都支持在导出PNG时设置背景为透明。如果你需要将流程图叠加在其他背景上使用，这个选项非常实用。

选择合适区域：如果流程图很大，只导出选中部分（通常通过"文件" -> "导出选定内容为"操作）可以更灵活地控制输出内容。

🎯 如何选择适合你的工具

你可以根据下面的决策图来快速找到最适合你的那款工具：
#mermaid-svg-Pn0NyZFDkmECLnVx{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-Pn0NyZFDkmECLnVx .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-Pn0NyZFDkmECLnVx .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-Pn0NyZFDkmECLnVx .error-icon{fill:#552222;}#mermaid-svg-Pn0NyZFDkmECLnVx .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Pn0NyZFDkmECLnVx .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-Pn0NyZFDkmECLnVx .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Pn0NyZFDkmECLnVx .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Pn0NyZFDkmECLnVx .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-Pn0NyZFDkmECLnVx .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Pn0NyZFDkmECLnVx .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Pn0NyZFDkmECLnVx .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Pn0NyZFDkmECLnVx .marker.cross{stroke:#333333;}#mermaid-svg-Pn0NyZFDkmECLnVx svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Pn0NyZFDkmECLnVx p{margin:0;}#mermaid-svg-Pn0NyZFDkmECLnVx .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Pn0NyZFDkmECLnVx .cluster-label text{fill:#333;}#mermaid-svg-Pn0NyZFDkmECLnVx .cluster-label span{color:#333;}#mermaid-svg-Pn0NyZFDkmECLnVx .cluster-label span p{background-color:transparent;}#mermaid-svg-Pn0NyZFDkmECLnVx .label text,#mermaid-svg-Pn0NyZFDkmECLnVx span{fill:#333;color:#333;}#mermaid-svg-Pn0NyZFDkmECLnVx .node rect,#mermaid-svg-Pn0NyZFDkmECLnVx .node circle,#mermaid-svg-Pn0NyZFDkmECLnVx .node ellipse,#mermaid-svg-Pn0NyZFDkmECLnVx .node polygon,#mermaid-svg-Pn0NyZFDkmECLnVx .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Pn0NyZFDkmECLnVx .rough-node .label text,#mermaid-svg-Pn0NyZFDkmECLnVx .node .label text,#mermaid-svg-Pn0NyZFDkmECLnVx .image-shape .label,#mermaid-svg-Pn0NyZFDkmECLnVx .icon-shape .label{text-anchor:middle;}#mermaid-svg-Pn0NyZFDkmECLnVx .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-Pn0NyZFDkmECLnVx .rough-node .label,#mermaid-svg-Pn0NyZFDkmECLnVx .node .label,#mermaid-svg-Pn0NyZFDkmECLnVx .image-shape .label,#mermaid-svg-Pn0NyZFDkmECLnVx .icon-shape .label{text-align:center;}#mermaid-svg-Pn0NyZFDkmECLnVx .node.clickable{cursor:pointer;}#mermaid-svg-Pn0NyZFDkmECLnVx .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-Pn0NyZFDkmECLnVx .arrowheadPath{fill:#333333;}#mermaid-svg-Pn0NyZFDkmECLnVx .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Pn0NyZFDkmECLnVx .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Pn0NyZFDkmECLnVx .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Pn0NyZFDkmECLnVx .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-Pn0NyZFDkmECLnVx .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Pn0NyZFDkmECLnVx .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-Pn0NyZFDkmECLnVx .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Pn0NyZFDkmECLnVx .cluster text{fill:#333;}#mermaid-svg-Pn0NyZFDkmECLnVx .cluster span{color:#333;}#mermaid-svg-Pn0NyZFDkmECLnVx div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Pn0NyZFDkmECLnVx .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-Pn0NyZFDkmECLnVx rect.text{fill:none;stroke-width:0;}#mermaid-svg-Pn0NyZFDkmECLnVx .icon-shape,#mermaid-svg-Pn0NyZFDkmECLnVx .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Pn0NyZFDkmECLnVx .icon-shape p,#mermaid-svg-Pn0NyZFDkmECLnVx .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-Pn0NyZFDkmECLnVx .icon-shape .label rect,#mermaid-svg-Pn0NyZFDkmECLnVx .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Pn0NyZFDkmECLnVx .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-Pn0NyZFDkmECLnVx .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-Pn0NyZFDkmECLnVx :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 图形化操作/中文界面
是
否/偏好新手
代码驱动/自动布局
是
否/喜欢简洁语法

需手绘风格
追求完全免费

无限制/数据隐私
开始选择流程图工具
使用偏好?
考虑 ProcessOn 或迅捷画图
需团队协作?

海量模板?
推荐 ProcessOn
推荐迅捷画图
考虑 GraphvizOnline 或 Mermaid
编程背景?

喜欢DOT语法?
推荐 GraphvizOnline
推荐 Mermaid Live Editor
强烈推荐 Draw.io
开始使用

📌 补充说明

ProcessOn 和 迅捷画图 是国产软件 ，中文支持完善 ，有大量精美的模板和示例 ，非常适合新手快速上手 和日常办公 使用。ProcessOn的协作功能也很强大。
Draw.io 是一款开源免费 的工具，功能强大且无任何限制 ，但界面是英文的。它的数据默认保存在本地 （或你指定的Google Drive/OneDrive），安全性高 ，适合对数据隐私敏感 或追求自由的用户。
GraphvizOnline 和 Mermaid Live Editor 更适合程序员 或喜欢用代码描述逻辑 的用户。它们通过文本生成图表 ，修改逻辑非常方便，且自动布局 效果通常很好，尤其适合绘制复杂的系统架构图 或算法流程图 。Mermaid的语法更简洁，且支持在Markdown文档中直接渲染 ，深受技术文档写作者喜爱。
希望这些信息能帮你找到称手的工具！如果你对某款工具有更深入的疑问，或者遇到了具体的操作问题，随时可以再问我。

导出为png, 前面几个工具大部分只能导出svg ，不好用

确实，Draw.io 导入 Mermaid 文本后导出 PNG 经常出问题------要么排版错乱，要么中文显示异常，要么导出的 PNG 模糊。

以下是真正能稳定把 Mermaid 文本转成高清 PNG 的方案：

1. Mermaid CLI（最靠谱）

bash 复制代码

# 安装
npm install -g @mermaid-js/mermaid-cli

# 你的流程图保存为 flowchart.mmd，然后：
mmdc -i flowchart.mmd -o output.png -b transparent -s 2

-s 2 生成 2 倍高清图，-b transparent 透明背景。这是官方工具，渲染最准。

4. Kroki 在线 API（无需安装任何东西）

bash 复制代码

# 把 mermaid 文本 base64 + deflate 编码后请求
curl https://kroki.io/mermaid/png \
  -d "diagram=$(cat flowchart.mmd | python3 -c 'import sys,base64,zlib;print(base64.urlsafe_b64encode(zlib.compress(sys.stdin.read().encode(),9)).decode())')" \
  --output output.png

或者直接用我上面写的 Python 代码生成也行。

5. VS Code + Markdown PDF（最简单）

安装插件 Markdown Preview Mermaid Support
写个 .md 文件，里面放你的 mermaid 代码块
安装 Markdown PDF 插件
右键 → Markdown PDF: Export (png) ------ 但注意这个有时候也会截不全

总结：最稳的是 Mermaid CLI ，如果你没装 Node.js，用 Playwright 截图 或 Kroki API 也可以。需要我直接帮你把你那个 ScatterNd 的 Mermaid 文本生成 PNG 吗？