PaperPlot 如何用自然语言生成可编辑的 Mermaid 图表？

PaperPlot 的 Chart Maker 可以先根据自然语言生成 Mermaid 草稿，再切换到 Mermaid syntax 模式修改节点、关系、标签和布局。使用时先选图表类型，把描述压缩到当前 8 行、192 个字符的输入限制内，生成后通过实时预览检查结构，最后下载高分辨率 PNG。

PaperPlot 的完整生成流程

1. 打开 Chart Maker。
2. 从下拉列表选择需要的图表类型。
3. 在 Text input 模式输入自然语言描述。
4. 点击生成 Mermaid 草稿。
5. 查看预览并切换主题。
6. 进入 Mermaid syntax 模式精确修改代码。
7. 确认结果后下载 PNG。

页面把自然语言定位为结构起点，把 Mermaid 代码定位为可维护结果。AI 生成不是终点，后续编辑和验证仍然必要。

为什么必须先选图表类型

同一段文字可以用不同图表表达。登录流程可以是流程图，也可以是时序图；订单生命周期可以是流程图，也可以是状态图。先选类型能限制 AI 的推断范围。

目标	推荐类型	输入重点
业务步骤与判断	Flowchart	步骤、条件、分支和终态
系统调用顺序	Sequence diagram	参与者、消息和响应
对象结构	Class diagram	类、属性和关系
状态变化	State diagram	状态、事件和转换
数据模型	Entity relationship diagram	实体、键和基数
项目计划	Gantt chart	阶段、日期和依赖

PaperPlot 当前选择器还列出思维导图、时间线、架构图、看板、雷达图等多种类型。是否适用应由信息关系决定，而不是只看模板效果。

如何在 192 个字符内写清需求

输入空间有限时，删除背景叙述和形容词，只保留图表结构。可以采用“对象；关系；异常；布局”的顺序。

Flowchart: user submits order; validate stock; if unavailable end;
if available create payment; success confirms order; failure releases stock;
left to right.

这类短描述包含主体动作、两个判断结果和布局方向。不要浪费字符写“beautiful”“professional”等无法验证的装饰要求。

不同图表的短提示模板

流程图

Flowchart: receive ticket; classify severity; critical pages on-call;
normal enters queue; resolve, verify, close; rejection returns to resolve.

时序图

Sequence: User->Web login; Web->Auth verify; Auth->DB lookup;
success returns token; failure returns 401.

状态图

Order states: pending->paid->processing->shipped->delivered;
pending or paid can become cancelled; refund follows cancellation after paid.

实体关系图

ER: Organization has many Users; User has many Orders;
Order has many Items; Item references one Product; show PK and FK.

短提示仍要使用明确动词与数量关系。只列名词会让 AI 猜测连接方向。

生成草稿后先检查什么

• 图表声明是否与所选类型一致。
• 输入中的所有关键对象是否出现。
• 箭头方向和消息顺序是否正确。
• 判断节点是否包含完整出口。
• 是否存在孤立节点或无法结束的路径。
• AI 是否添加了输入中没有的业务规则。

预览可拖动并支持鼠标滚轮缩放，复杂图表应检查四周边界和细小标签，而不是只看默认缩放状态。

如何切换到 Mermaid syntax 模式

生成后选择 Mermaid syntax，即可查看和编辑底层文本。修改会进入实时预览，因此适合小步调整。

flowchart LR
    A[Submit order] --> B{Stock available?}
    B -- No --> C([Out of stock])
    B -- Yes --> D[Create payment]
    D --> E{Payment successful?}
    E -- Yes --> F[Confirm order]
    E -- No --> G[Release stock]
    G --> H([Payment failed])

直接编辑代码时，一次只改一个节点或一组连线，并在预览恢复后再继续。

如何修改节点标签

节点 ID 和显示标签应分开理解：

    E{Payment successful?}

E 是其他连线引用的稳定 ID，花括号中的文字是显示标签。改文案时尽量保留 ID，避免同时修改多条连接。

需要输出中文标签时，可以直接替换显示文字：

    E{支付成功？}

如何增加遗漏的异常分支

若草稿只有成功路径，可以在代码中补充分支：

    D --> E{Payment result}
    E -- Success --> F[Confirm order]
    E -- Failed --> G[Release stock]
    E -- Timeout --> I[Query payment status]
    I --> E

循环必须有外部终止条件。示例只展示结构，生产流程还应规定查询次数、间隔和最终状态。

如何调整阅读方向

流程图声明中的方向决定基础布局：

• flowchart TD：从上到下。
• flowchart LR：从左到右。

长而线性的流程通常适合横向，分支较多的决策树通常适合纵向。切换后用拖动和缩放检查是否出现交叉或裁切。

如何使用子图整理复杂结构

flowchart LR
    subgraph Client[Client]
        A[Submit order]
        H[Show result]
    end

    subgraph Backend[Backend]
        B{Stock available?}
        C[Create payment]
        D[Confirm order]
    end

    A --> B
    B -- Yes --> C
    C --> D
    D --> H

子图应用于系统、团队或阶段边界。不要仅为排版把逻辑上无关的节点放在一起。

生成效果不正确时如何处理

结构整体偏离时，回到 Text input 改写自然语言并重新生成；只有局部错误时，继续编辑 Mermaid 代码更高效。

改写输入时优先增加：

• 明确的图表类型。
• 动作顺序。
• 判断条件及所有出口。
• 节点之间的数量关系。
• 必须保留或禁止添加的内容。

不要反复提交完全相同的提示期待稳定得到不同结构。输出是 AI 草稿，清晰约束比无目的重试更有效。

主题应该何时调整

先确认结构，再选择主题。过早调整颜色容易让用户把注意力放在外观上，忽略错误连线。

主题验收应检查文字与背景对比、判断节点区分度、暗色或浅色页面适配，以及最终 PNG 中颜色是否一致。

当前导出能力是什么

PaperPlot 当前页面说明，Chart Maker 的导出选项是高分辨率 PNG。虽然 Mermaid 代码本身可以在其他工具中渲染为 SVG，但不能把这一点写成 PaperPlot 当前页面直接支持 SVG 导出。

需要 SVG 时，可复制 Mermaid 源码，在明确支持 SVG 的 Mermaid 编辑器中重新渲染和导出，并单独验收结果。

如何验收导出的 PNG

1. 用本地图像查看器打开文件。
2. 在 100% 比例检查节点文字和箭头。
3. 检查四周是否有裁切。
4. 确认长标签没有溢出节点。
5. 放入目标文档，检查缩放后的可读性。
6. 确认文件对应最终 Mermaid 代码版本。

如何保存可维护的源文件

PNG 适合展示，不适合维护。正式使用时应把 Mermaid 代码保存为文本，并记录用途、修改日期和关联需求。

docs/
  diagrams/
    order-flow.mmd
    order-flow.png
    README.md

需求变化时先修改 .mmd 源码，再重新生成图片，避免直接在旧 PNG 上涂改。

隐私与内容边界

自然语言会交给 AI 服务生成草稿，因此不要输入密码、令牌、个人信息、客户数据或未公开系统地址。内部架构和业务流程还应遵循组织对第三方 AI 工具的使用规定。

生成结果可能包含 AI 自行补充的节点。导出或共享前，应由了解业务的人确认所有内容。

常见问题

为什么超过 8 行后无法完整输入？

当前 Text input 有 8 行和 192 字符限制。删去背景叙述，只保留对象、关系、异常和布局，或把大图拆成多个子任务。

可以直接粘贴 Mermaid 代码吗？

可以切换到 Mermaid syntax 模式输入或粘贴代码，并使用实时预览检查。

为什么预览很小？

复杂图表可通过拖动和滚轮缩放查看。若文字仍不可读，应简化结构或拆分图表。

PaperPlot 可以直接导出 SVG 吗？

当前页面列出的导出格式只有高分辨率 PNG。SVG 可在其他支持该格式的 Mermaid 工具中从源码生成。

总结

PaperPlot 的合理用法是先选择图表类型，在 8 行、192 字符内用动作和关系描述核心结构，生成 Mermaid 草稿后切换到语法模式精确修正。实时预览负责发现布局问题，源码负责维护节点和逻辑，最终下载高分辨率 PNG，并单独保存 Mermaid 文本作为可编辑版本。