SciFig
免费开始使用

免费 Mermaid 转 PNG 工具

粘贴 Mermaid 代码，在浏览器中渲染图表，再下载 PNG 或 SVG。把文字、箭头和分组完整保留在图片中，方便脱离代码编辑器分享。

请先在上方输入框里描述你要的内容。

获得 最高 150 免费积分|无需信用卡

通过邀请链接加入，首日最高可得 350 免费积分。

3 大出图引擎 · 500+ 模板标注全部可编辑 · 60+ 套配色方案可编辑 PPTX · 分层 SVG · 8K PNG / JPG

Mermaid 转 PNG 与 SVG

粘贴流程图、时序图等受支持的 Mermaid 源码，在浏览器本地渲染并导出。

源码最多 20,000 个字符，最多 150 条连接，图表单边最多 4096 像素。PNG 按所选倍率导出，最长边不超过 8192 像素。渲染在当前浏览器中完成。

免费 Mermaid 转 PNG 工具— 模板与示例

更新于

Mermaid 图表工具

免费 Mermaid 转 PNG 工具

把图表代码转换为清晰图片，自选背景和导出倍率。

Mermaid 转 PNG 是把文本形式的图表代码转换成适合文档和幻灯片的位图。 粘贴 Mermaid 代码，在浏览器中渲染图表，再下载 PNG 或 SVG。把文字、箭头和分组完整保留在图片中，方便脱离代码编辑器分享。

制作 Mermaid 图表
Mermaid 流程图：从研究问题依次连接实验、分析与科研图
  • 粘贴图表代码
  • 选择导出倍率
  • 使用透明背景
  • 导出渲染后的 SVG

Mermaid 图表功能

把图表代码转换为清晰图片，自选背景和导出倍率。

直接渲染 Mermaid 代码

从已有图表源码开始，SciFig 将节点、关系和标签渲染为可见预览。图片依据代码生成，保留源码定义的图表结构。使用流程图、时序图或类图，把文本形式的说明转为文档配图。

  • 粘贴图表代码
  • 预览连接的节点与标签
  • 保留子图和关系
渲染 Mermaid 代码

导出清晰的 PNG 图片

根据文档或幻灯片中的展示尺寸选择导出倍率，让标签更清晰。PNG 可用于接受图片但不支持 Mermaid 的场景。图表结构与文字一起保存在图片中，便于向协作者分享完整含义。

  • 选择导出倍率
  • 保留完整图表范围
  • 将位图放入幻灯片
准备 PNG 图片

为图表选择背景

透明背景适合放在带底色的幻灯片上，白色背景则让图片自成一体。根据使用位置选择背景，SciFig 会把这一设置应用到导出图片，保持相同的图表结构与内容。

  • 使用透明背景
  • 选择白色背景
  • 把结果放入幻灯片
设置背景

同时保留矢量版本

需要可缩放图表时下载 SVG，让线条和文字以矢量图内容保留；日常文档也可使用 PNG。两种输出都来自渲染后的 Mermaid 源码，方便同时保存可分享的图片和生成它的代码。

  • 导出渲染后的 SVG
  • 保留矢量线条
  • 一起保存源码与结果
导出 Mermaid 图表

如何制作图表

使用页内工具准备 Mermaid 图表并下载结果。

  1. 粘贴 Mermaid 源码

    在转换器中粘贴图表代码，从受支持的流程图、时序图或类图开始。把最终图片需要的标签和关系写入源码，这些语句将决定渲染后的结构。

  2. 渲染图表

    运行预览，查看源码中的节点、分组、连接和标签如何组成图形。如果源码存在语法错误，检查可见错误提示及对应代码，修正后重新渲染。确认需要的流程关系和文字完整显示，再选择后续导出设置。

  3. 选择背景与倍率

    根据图片的使用位置设置背景和导出倍率。透明背景适合有底色的幻灯片，白色背景让图片自成一体。提高 PNG 倍率可在保持比例的同时增加标签可用像素。

  4. 下载 PNG 或 SVG

    为幻灯片、报告或文档下载 PNG，需要矢量版本时选择 SVG。将 Mermaid 源码与导出文件放在一起，以后修改结构时可以从原代码继续。

Mermaid 图表用途

把材料中的说明转为带标签的 Mermaid 图表，让读者能直接看见关系。

Mermaid 流程图：从研究问题依次连接实验、分析与科研图

把工作流程放进报告

方法报告中可能已有 Mermaid 形式的流程代码。将源码转为 PNG，读者不用打开代码编辑器就能看懂决策节点。将图表与文档一起保存，流程变化时重新生成。

查看此示例
Mermaid 时序图：研究者添加源码、预览图形并导出 PNG

与协作者分享时序

用时序图说明每条消息由谁发出。渲染代码后导出完整交互，用于团队讨论。静态图片可以直接放进演示或会议文档，无需集成 Mermaid。

查看此示例
Mermaid 类图：Experiment 与 Figure 类及其字段、方法和连接关系

记录类之间的关系

技术附录可能需要一张类图，而不是代码截图。通过 Mermaid 渲染关系、标签和类的分区，再导出可缩放的 SVG 或方便插入文档的 PNG。

查看此示例
Mermaid 流程图：源码、透明 PNG 步骤与幻灯片背景之间的连接

让图表适配幻灯片

将透明 PNG 放在幻灯片背景上，保留图表标签与箭头。图表占据大部分页面时，可以提高导出倍率。需要改变结构时，修改原代码再生成新图即可。

查看此示例
Mermaid 工作流程：样品准备子图连接响应测量与实验条件比较

解释分组阶段

子图可在较大的工作流程中组织相关阶段。导出时保留分组边界和完整标签，帮助读者区分局部步骤与整体流程，适合涉及多个团队的程序说明。

查看此示例
Mermaid 流程图：从研究问题依次连接实验、分析与科研图

保留便于分享的项目配图

在项目文件夹中一并保存 Mermaid 源码、PNG 和 SVG。图片方便日常分享，源码简洁记录各项关系。如果需要从文字说明创建新的流程图，可以使用 SciFig FlowChart。

查看此示例

研究者如何使用 SciFig

我们的方法文档中有一段工作流程，一直保存在 Mermaid 文件里。我将 Mermaid 转 PNG，把相同的判断节点放进报告，不必再用另一个编辑器重画。源码与导出图片一起保存后，团队也明确了以后实验方案变化时，应从哪里修改流程。

Lena W.

剑桥大学｜科研软件工程师

免费工具

每一种科研插图，都有对应的工具

120 个专项生成器，覆盖你需要的各类科研插图——每个都会带着匹配的示例在对应工作台中打开。

插图、结构示意与概念图

60 个工具
化学结构式生成器 示例图化学结构式生成器图形摘要制作器 示例图图形摘要制作器受力图生成器 示例图受力图生成器电路图生成器 示例图电路图生成器AI 科研图像生成器 示例图AI 科研图像生成器可编辑 96 孔板 示例图可编辑 96 孔板路易斯结构式生成器 示例图路易斯结构式生成器DNA结构图生成器 示例图DNA结构图生成器接线图绘制工具 示例图接线图绘制工具管道仪表流程图工具 示例图管道仪表流程图工具科研海报生成器 示例图科研海报生成器支序图制作器 示例图支序图制作器食物网图制作器 示例图食物网图制作器医学插图生成器 示例图医学插图生成器PCR 示意图生成器 示例图PCR 示意图生成器PPT 文字转图示工具 示例图PPT 文字转图示工具有丝分裂图生成器 示例图有丝分裂图生成器AI 信息图生成器 示例图AI 信息图生成器解剖图生成器 示例图解剖图生成器动植物细胞对比 示例图动植物细胞对比动物细胞图生成器 示例图动物细胞图生成器抗体结构图 示例图抗体结构图细胞凋亡示意图 示例图细胞凋亡示意图细菌结构图生成器 示例图细菌结构图生成器建筑蓝图制作器 示例图建筑蓝图制作器玻尔模型制作器 示例图玻尔模型制作器卡尔文循环图生成器 示例图卡尔文循环图生成器碳循环图生成器 示例图碳循环图生成器细胞周期图生成器 示例图细胞周期图生成器细胞呼吸图生成器 示例图细胞呼吸图生成器补体系统示意图 示例图补体系统示意图CRISPR-Cas9 示意图 示例图CRISPR-Cas9 示意图DNA 复制图生成器 示例图DNA 复制图生成器电子排布图生成器 示例图电子排布图生成器电子传递链图生成器 示例图电子传递链图生成器基因调控图 示例图基因调控图糖酵解图生成器 示例图糖酵解图生成器图片转可编辑 SVG 示例图图片转可编辑 SVG免疫应答示意图 示例图免疫应答示意图三羧酸循环图生成器 示例图三羧酸循环图生成器实验装置图制作器 示例图实验装置图制作器减数分裂图生成器 示例图减数分裂图生成器分子轨道图生成器 示例图分子轨道图生成器氮循环图生成器 示例图氮循环图生成器家系图制作器 示例图家系图制作器磷脂结构图生成器 示例图磷脂结构图生成器磷循环图生成器 示例图磷循环图生成器光合作用图生成器 示例图光合作用图生成器系统发育树制作器 示例图系统发育树制作器物理矢量图绘制工具 示例图物理矢量图绘制工具植物细胞图生成器 示例图植物细胞图生成器蛋白质合成图生成器 示例图蛋白质合成图生成器庞纳特方格制作器 示例图庞纳特方格制作器光路图制作器 示例图光路图制作器科研配色生成器 示例图科研配色生成器信号通路图绘制工具 示例图信号通路图绘制工具电气单线图生成器 示例图电气单线图生成器T 细胞激活示意图 示例图T 细胞激活示意图水循环图生成器 示例图水循环图生成器Western blot 示意图生成器 示例图Western blot 示意图生成器

统计图表与科研绘图

28 个工具
伯德图生成器 示例图伯德图生成器蜘蛛网图制作器 示例图蜘蛛网图制作器Kaplan-Meier 生存曲线 示例图Kaplan-Meier 生存曲线多层饼图制作器 示例图多层饼图制作器钟形曲线生成器 示例图钟形曲线生成器甘特图生成器 示例图甘特图生成器箱线图生成器 示例图箱线图生成器森林图绘制 示例图森林图绘制火山图生成器 示例图火山图生成器帕累托图生成器 示例图帕累托图生成器散点图制作器 示例图散点图制作器热力图生成器 示例图热力图生成器AI 图表生成器 示例图AI 图表生成器对比图制作器 示例图对比图制作器桑基图生成器 示例图桑基图生成器雷达图生成器 示例图雷达图生成器直方图制作器 示例图直方图制作器柱状图生成器 示例图柱状图生成器坐标平面生成器 示例图坐标平面生成器点图生成器 示例图点图生成器IC50 计算与剂量反应曲线 示例图IC50 计算与剂量反应曲线图片DPI计算器 示例图图片DPI计算器横波图生成器 示例图横波图生成器折线图制作 示例图折线图制作数轴生成器 示例图数轴生成器图片出版检查 示例图图片出版检查供需曲线生成器 示例图供需曲线生成器瀑布图制作 示例图瀑布图制作

流程图、框架图与结构图

32 个工具
概念框架生成器 示例图概念框架生成器理论框架生成器 示例图理论框架生成器句法树生成器 示例图句法树生成器二歧检索表制作器 示例图二歧检索表制作器句子图解生成器 示例图句子图解生成器文字转示意图生成器 示例图文字转示意图生成器PRISMA 流程图生成器 示例图PRISMA 流程图生成器工作流程图生成器 示例图工作流程图生成器时间线生成器 示例图时间线生成器文献综合矩阵生成器 示例图文献综合矩阵生成器ER 图生成器 示例图ER 图生成器UML 图生成器 示例图UML 图生成器树形图生成器 示例图树形图生成器鱼骨图生成器 示例图鱼骨图生成器神经网络图生成器 示例图神经网络图生成器决策树生成器 示例图决策树生成器软件架构图生成器 示例图软件架构图生成器CONSORT 入组流程图生成器 示例图CONSORT 入组流程图生成器系统上下文图制作工具 示例图系统上下文图制作工具数据流图生成器 示例图数据流图生成器实验流程图制作 示例图实验流程图制作家系关系图生成器 示例图家系关系图生成器图形组织图生成器 示例图图形组织图生成器图片转流程图 示例图图片转流程图Mermaid 转 PNG 示例图Mermaid 转 PNG网络拓扑图生成器 示例图网络拓扑图生成器组织结构图制作器 示例图组织结构图制作器时序图生成器 示例图时序图生成器状态图生成器 示例图状态图生成器泳道图生成器 示例图泳道图生成器用例图生成器 示例图用例图生成器维恩图生成器 示例图维恩图生成器
浏览全部工具 →

Mermaid 图表常见问题

1.

2.

3.

4.

5.

6.

行动号召背景

Mermaid 图表

制作 Mermaid 图表

制作 Mermaid 图表

免费开始 · 无需信用卡 · 为研究者打造