Mermaid 在线渲染与自由画布：粘贴 AI 回复出图，导出 Word、PPT、PNG
在豆包、DeepSeek、Kimi、元宝里让它画流程图，拿到的往往是一段 Mermaid 代码。图搭子有两种用法：把回复整段粘进来，自动识别代码、渲染成图、导出文件；想手摆的时候，把图转进自由画布拖动、改字、手绘标注，也可以从空白画布直接开始。两种模式都免费、免登录。
粘贴 AI 回复，自动出图
整段粘贴，自动识别其中的 Mermaid 代码，0.5 秒内渲染成图；换主题、改文字，下载 PNG、SVG、PDF、Word、PPT。
拖动、改字、手绘标注
把渲染好的图转进原样嵌入的 Excalidraw 白板：流程图、时序图、类图、状态图、ER 图拆成可拖动的图元，其余类型整图转入；也可以从空白画布开始画。
想把图转进来：先在编辑器里出图，再点顶栏「画布」。
两种模式怎么配合
代码是唯一的真相，画布是单向门：先用代码出图，需要手摆时再转进画布。
先代码，再画布
让 AI 出 Mermaid 代码，在编辑器里渲染、换主题、修报错、用 AI 修复。布局由引擎算，改文字、加环节都是改代码，所以能反复重排。
转入之后各走各的
画布上的改动不会写回代码，改代码也不影响画布。「回到代码」随时回去，画布内容留在本机；想跟上最新代码，用画布菜单里的「重新转入」替换整个画布。
两边都能出文件
编辑器和画布各有自己的下载：PNG、SVG、PDF、Word、PPT，画布还能存 .excalidraw 文件，以后再打开继续画。渲染与导出都在浏览器本地完成。
代码出图：三步
- 第 1 步
在 AI 里要一段代码
对你常用的 AI 助手说「请用 Mermaid 代码画一张××图」。按图类型写清楚语法关键字，回复能直接渲染的比例高得多。
- 第 2 步
整段复制，粘贴进来
点回复下方的「复制」整段复制即可，不用手动剥代码块，前后的说明文字会自动忽略。粘贴后 0.5 秒内出图。
- 第 3 步
选主题，下载
六套主题即时切换。点「下载 PNG」，或展开菜单选 SVG、PDF、Word、PPT，也可以直接复制到剪贴板；想手摆就点「画布」转进自由画布。
新手教程
第一次用？四篇连读，从拿到代码到导出文件，约 15 分钟。也可以按场景直接看：流程图、思维导图、时序图、甘特图、论文技术路线图、自由画布、分享与云端、draw.io 互通。
- 第 1 篇 · 约 5 分钟5 分钟上手：粘贴 AI 回复，出图，下载第一次用图搭子看这篇：两种模式是什么、编辑器里各个位置是干什么的、从粘贴到下载 PNG / Word 的最短路径，以及手机上怎么用。
- 第 2 篇 · 约 4 分钟怎么让 AI 给出能直接渲染的 Mermaid 代码提示词怎么写回复才能一次渲染成功：点明图类型的语法关键字、要求只输出代码块、节点文字用中文；各家网页端「复制」按钮给的是什么，以及拿到回复后怎么粘。
- 第 3 篇 · 约 4 分钟改字、调布局、修报错拿到图之后怎么改：预览里双击改字、「布局」改方向与间距、在代码里加环节与换形状；代码报错时看报错条、跳到行、用 AI 修复；不想碰代码时的 AI 美化。
- 第 4 篇 · 约 3 分钟导出到 Word、PPT、PDF，或复制到剪贴板五种格式各适合什么、倍率与透明底怎么选、Word / PPT 文件里有什么、以后怎么改；在微信里下载不了怎么办；多张图一次打包。
自由画布能做什么
画布就是原样嵌入的 Excalidraw（MIT 开源白板）：工具栏一字排开，中文用手写体，字体从本站加载。
五种图拆成图元
流程图、时序图、类图、状态图、ER 图转入后，节点、连线、文字各自独立：可以拖动、改字、删除、新增。
其余整图转入
甘特图、饼图、思维导图、时间线等按当前主题渲染成一张图片放进画布，可以摆放、缩放、在旁边标注。
手绘与素材库
矩形、圆、箭头、连线、文字、手绘、图片、橡皮；常用图形存进素材库复用，也能打开别人的 .excalidraw 文件。
只存本机
画布内容保存在这台设备的浏览器里，不上传、不进云端保存、不进分享链接；超过 4 MB 会提示下载 .excalidraw 文件留档。
粘贴来源与导出格式
粘贴来源（实测）
豆包、DeepSeek、Kimi、元宝网页端「复制」按钮复制出来的整段回复。三种形态都能识别：带 mermaid 标记的代码块、无语言标记的代码块、不带代码块标记的裸代码。其他来源只要回复里有 Mermaid 代码，同样按这三种形态识别。
导出格式
- PNG（×2 / ×3，透明或带底色）、SVG
- PDF（高清位图，页面尺寸随图走）
- Word（docx）、PPT（pptx）：内嵌高清图，文末附原始代码，回来继续改
- 复制 PNG 到剪贴板，直接贴进聊天或文档
- 自由画布的下载是同一组格式（PNG、SVG、PDF、Word、PPT），另加 .excalidraw 文件
六套主题永远免费，主色可自定义
亮色、暗色，加四套中文审美主题。预览是什么样，导出的文件就是什么样；点一张即可在编辑器里应用。轻会员可以改一个主色，整套配色自动生成。
支持的图表类型
以及 ER 图、时间线、用户旅程图、象限图、Git 分支图等 Mermaid 支持的其他类型。
图表模板库
泳道图、组织架构图、时序图、论文技术路线图、甘特图……每类几套现成的 Mermaid 模板，改文字就能用，免费导出 PNG、Word、PPT。
还能做什么
draw.io 互通
导出 .drawio 文件，在 draw.io 里双击继续改；打开 .drawio、.drawio.svg 文件或粘贴文件内容，取回其中的 Mermaid 代码。免费。
分享链接与分享页
「分享链接」把代码和主题压进网址 # 后面，不经过服务器；登录后还能生成带密码、有效期、打开次数的分享页，跟随云端最新版本。免费。
云端保存
邮箱验证码或 Google 登录后把图保存到云端、在别的设备打开，免费 20 张；只有你主动保存时才上传。
轻会员增值项
自定义主题色、批量 / 打包导出、×4 超高清 PNG、每月 300 次 AI 修复 / 美化、云端不限张数与 30 天历史版本。
免费与本地处理
- 渲染与全部格式导出（PNG、SVG、PDF、Word、PPT）：免费、免登录、无水印、不限次
- 渲染与导出都在你的浏览器本地完成；不登录的话，图表内容不会上传
- 自动保存在本机，刷新不丢，下次打开自动恢复
- AI 修复与 AI 美化是可选项：只有你点击时，当前代码才会发送给 AI 引擎处理一次，不存储；免费额度每天 5 次，两者共用
- 登录（邮箱验证码或 Google 账号）后可以把图保存到云端、在别的设备打开；只有你主动保存时才上传，免费可存 20 张
- 自由画布与 draw.io 互通同样免费、免登录；画布内容只保存在本机
常见问题
- Mermaid 代码从哪里来？
- 在你常用的 AI 助手里说「请用 Mermaid 代码画一张××图」，把它的回复整段粘贴到图搭子即可，会自动识别其中的代码。上面「三步出图」里有可复制的提示词模板。
- 支持粘贴哪些 AI 的回复？
- 实测支持豆包、DeepSeek、Kimi、元宝网页端「复制」按钮复制出来的整段回复：带 mermaid 标记的代码块、无语言标记的代码块、以及不带代码块标记的裸代码都能识别，前后的说明文字自动忽略。
- 支持哪些图表类型？
- Mermaid 支持的类型都能渲染，包括流程图、时序图、类图、状态图、ER 图、甘特图、饼图、思维导图、时间线等。
- 代码报错怎么办？
- 报错会翻译成中文并标出行号，点「跳到第 N 行」直接定位修改，修好前预览会保留上一次成功的图。也可以点报错条里的「AI 修复」：采纳前会显示改动对比并先在本地校验能否渲染，免费额度每天 5 次。
- 图表内容会上传服务器吗？
- 渲染与导出都在浏览器本地完成，不登录的话图表内容不会上传。两种情况会把当前代码发到服务器：点「AI 修复」或「AI 美化」时发送给 AI 引擎处理一次、不存储；登录后主动「保存到云端」时，这张图的代码、主题和名称会保存在服务器上，随时可以删除。
- 导出到 Word 或 PPT 后还能改吗？
- Word、PPT 里嵌入的是高清图片，不能在 Office 里双击编辑；文件末尾附了原始 Mermaid 代码，复制回图搭子改好再导出一次即可。
- 手机上能用吗？
- 可以。手机浏览器打开同样能粘贴、渲染、下载；在微信里下载受限时，点右上角「在浏览器打开」再导出。
- 怎么把图发给别人一起改？
- 点预览上方的「分享链接」：图的代码和主题会压缩进网址 # 后面的部分，不经过服务器，对方打开就能看到同一张图并继续改。登录后还可以生成分享页：短链接跟随云端最新版本，可设密码、有效期，可撤销。也可以直接发导出的文件：Word、PPT 文末都附有原始代码。
- 云端保存是什么？必须登录吗？
- 不必须。不登录也能渲染、导出、自动保存在本机。登录（邮箱验证码或 Google 账号）后可以把图保存到云端、在别的设备打开，免费可保存 20 张。登录入口只在编辑器的「云端」按钮里，不会打断粘贴和导出。
- 能不能手动拖动节点、在图上加标注？
- 可以。点顶栏「画布」把当前图转进自由画布：流程图、时序图、类图、状态图、ER 图会拆成可拖动、可改字的图元，其余类型整图转入后可以摆放和标注。转入是单向的，画布上的改动不写回代码；画布有自己的下载（PNG、SVG、PDF、Word、PPT、.excalidraw），内容只保存在本机。也可以从首页「打开画布」直接从空白开始。
- 能和 draw.io 互通吗？
- 能。下载菜单里选「.drawio」导出，用 draw.io（diagrams.net）打开后双击图即可继续编辑 Mermaid 源码；反过来，用「打开文件」选 .drawio 或 .drawio.svg 文件，或者直接把文件内容粘贴进来，会取回其中的 Mermaid 代码。