5 分钟上手：粘贴 AI 回复，出图，下载

两种模式，先认清

• 模式一 · 代码出图：你从豆包、DeepSeek、Kimi、元宝拿到一段 Mermaid 代码（或整段回复），粘进编辑器，0.5 秒内渲染成图，换主题，下载 PNG、SVG、PDF、Word、PPT。布局由引擎算，改文字、加环节都是改代码。
• 模式二 · 自由画布：想用手摆的时候，把渲染好的图转进 Excalidraw 白板拖动、改字、手绘标注；也可以从空白画布直接画。转入是单向的，画布不回写代码。

这篇教程走的是模式一，也就是大多数人的主路径；画布单独有一篇自由画布。两种模式都免费、免登录、无水印，渲染与导出都在你的浏览器里完成。

第一步：打开编辑器，认一下界面

点顶栏的「编辑器」，或者直接在首页的粘贴框里粘贴（粘贴完会自动跳到编辑器）。编辑器打开时预填了一张流程图示例，界面分三块：

• 左边是代码。粘贴整段 AI 回复也是粘在这里；下方一行状态显示「已识别：流程图」这类结果，代码有错时这一行变成报错条。
• 右边是预览。滚轮缩放、拖拽平移，右下角有缩放按钮，双击空白处复位；流程图和思维导图可以双击节点直接改字。
• 预览上方一行工具：六套主题缩略图、「布局」（流程图的方向与间距）、「分享链接」、「下载 PNG」和它旁边的 ▾ 菜单。

顶栏右侧还有「画布」「打开文件」「云端」「帮助」和明暗切换。第一次直接打开编辑器时会有一次功能导览，逐个指给你看；以后想再看，点「帮助」→「功能导览」。

第二步：粘贴整段回复

在 AI 助手那边点回复下方的「复制」，回到编辑器，在左边代码区粘贴。不用手动把代码块剥出来：整段回复粘进去，会自动识别其中的 Mermaid 代码，前后的说明文字自动忽略，状态行会提示「已从回复中识别出流程图代码」。

手边没有回复的话，先用下面这段试试——点「在编辑器里打开」：

flowchart TD
    A[收到需求] --> B{需求明确吗?}
    B -- 明确 --> C[排期开发]
    B -- 不明确 --> D[补充调研]
    D --> B
    C --> E[提测验收]
    E --> F{验收通过?}
    F -- 通过 --> G[上线发布]
    F -- 不通过 --> C

还没有代码？状态行右侧的「还没有代码？」里有按图类型写好的提示词，复制发给 AI 助手就行，下一篇怎么让 AI 给出能直接渲染的代码细说。

第三步：选主题

预览上方点一下缩略图就换：亮色（默认，文档与 PPT 场景）、暗色、墨青（论文与技术文档）、朱砂（汇报）、靛蓝（商务）、玄墨（深色场景）。预览是什么样，导出的文件就是什么样，包括底色。选过一次会记住。

第四步：下载

点「下载 PNG」直接得到一张 2 倍分辨率、透明底的 PNG，放进任何页面都不带白框。要别的格式点旁边的 ▾：

• SVG：矢量，放大不糊，可以在 Illustrator、Figma 里再编辑；
• Word（docx）/ PPT（pptx）：内嵌高清图，文末附原始 Mermaid 代码，以后复制回来接着改；
• PDF：一页，页面尺寸随图走；
• 复制 PNG 到剪贴板：直接粘进聊天或文档，最省事；
• 菜单底部可以切倍率（×2 / ×3）和透明 / 带底色。

下载不需要登录，没有水印，也没有次数限制。细节见导出到 Word、PPT、PDF。

内容会丢吗

编辑器里的内容自动保存在这台设备的浏览器里，刷新、关掉再打开都会恢复（顶部会提示「已恢复上次编辑的内容」）。想在别的设备接着改，登录后把图保存到云端；不登录的话，图表内容不会上传。

手机上怎么用

手机浏览器打开同一个地址就能用。上半屏是预览，底部三个按钮：编辑（展开粘贴区）、主题、下载。粘贴整段回复后识别成功，抽屉会自动收起、预览放大；代码有错时抽屉保持展开。微信里下载受限，点右上角「⋯」选「在浏览器打开」再下载，或者用「复制 PNG 到剪贴板」。

接下来

• 下一篇：怎么让 AI 给出能直接渲染的代码
• 改字、加环节、修报错：改字、调布局、修报错
• 直接看你要画的图：流程图、思维导图、时序图、甘特图、论文技术路线图