flow-chart.io 如何从自然语言生成可编辑的 Mermaid、BPMN 和 UML 图表?

作者:袖梨 2026-09-13

flow-chart.io 可以把自然语言、文档或代码仓库上下文转换为可编辑的图表场景,再通过聊天增删、重命名、分组或重连元素。生成前应先按目标选择 Mermaid、BPMN 或具体 UML 类型;生成后保留项目或可重新导入的 JSON 作为完整编辑源,再按需要导出 Mermaid、SVG、PNG 或 PDF。

为什么要先选择图表语言

Mermaid、BPMN 和 UML 不是三种外观主题,而是服务于不同问题的表达方式:

类型适合表达核心元素
Mermaid 流程图文档中的流程、决策和轻量架构节点、边、标签、子图
BPMN跨角色业务过程与消息协作事件、任务、网关、池、泳道、消息流
UML 类图对象结构和类型关系类、属性、方法、继承、关联
UML 时序图参与者之间按时间发生的消息生命线、消息、返回、条件片段
UML 状态图对象生命周期状态、事件、转换、终态
UML 活动图活动、分支和并行控制动作、判断、分叉与汇合

如果只输入“画一个订单图”,AI 需要猜测用户想看业务审批、系统调用还是数据结构。先选域和表示法能减少这种歧义。

flow-chart.io 生成的是什么

当前产品页面说明,生成结果是 live scene graph,即实时场景图。节点、连接线、标签和泳道都是可移动、可改名、可换样式和可重连的对象,不是一张锁定的位图。

这意味着用户可以:

  • 点击节点修改名称或颜色。
  • 拖动元素重新布局。
  • 改变连接关系和分组。
  • 通过聊天继续增删或重构。
  • 查看版本差异并恢复早期草稿。
  • 导出为多种展示或交换格式。

从自然语言生成的五步流程

  1. 增强输入:提供一句话、文档、对话或仓库上下文。
  2. 选择图表域与表示法。
  3. 生成可编辑场景。
  4. 通过聊天、画布和检查建议细化。
  5. 比较版本并导出目标格式。

产品页面把这套过程概括为 Enhance、Generate、Refine、Review 和 Share。实际使用时,每一步都应有可验证的结果。

生成 Mermaid 流程图的提示词

Create a left-to-right Mermaid-compatible flowchart
for an order fulfillment process.

Start when payment is confirmed.
Check inventory, allocate stock, create a shipment,
send tracking information, and close when delivered.
If allocation fails, cancel fulfillment and start a refund.
Label every decision branch and keep all end states explicit.

Mermaid 适合可复制到 Markdown 或代码仓库的轻量图表。提示中应明确步骤、分支和方向,不必描述 BPMN 特有的池和消息事件。

生成 BPMN 图的提示词

Create a BPMN-inspired order return process.
Use separate pools for Customer and Merchant.
Merchant lanes: Support, Warehouse, Finance.

Start when the customer submits a return request.
Support validates eligibility.
An exclusive gateway routes approved or rejected requests.
Warehouse inspects returned goods.
Finance issues the refund after inspection.
Show message flows between Customer and Merchant.
End with Refunded or Rejected.

BPMN 提示应明确参与者、池、泳道、事件、任务、网关和消息流。只写步骤清单容易得到普通流程图,而不是有责任边界的业务过程。

BPMN 合规边界必须说明

当前官方页面明确表示,业务过程域可以生成受 BPMN 启发的池、泳道、任务、网关和消息流,自动检查属于尽力检查,不构成 BPMN 合规认证。

因此生成后要人工核对:

  • 开始、中间和结束事件是否使用正确语义。
  • 排他、并行和包容网关是否选对。
  • 顺序流是否只在同一池内使用。
  • 跨池交互是否使用消息流。
  • 每个网关出口是否有条件或默认路径。
  • 分叉与汇合是否匹配。

生成 UML 类图的提示词

Create a UML class diagram for a subscription system.
Classes: Organization, User, Plan, Subscription, Invoice.
An Organization has many Users and Subscriptions.
A Subscription belongs to one Plan and creates many Invoices.
Show primary identifiers, important attributes,
multiplicity, inheritance if any, and composition only where ownership is strict.

类图最容易出错的是基数与所有权。提示词要明确一对一、一对多、多对多、组合和普通关联,不能只列出类名。

生成 UML 时序图的提示词

Create a UML sequence diagram for OAuth login.
Participants: Browser, Web App, Authorization Server, API.
Show authorization request, redirect, code exchange,
token validation, API request, and response.
Include alternate fragments for denied consent and expired code.

时序图应强调消息顺序、同步或异步性质、返回值和异常片段。流程步骤正确但参与者错误,仍然会误导接口实现。

如何通过聊天继续修改

产品支持通过对话添加、删除、重命名、分组、重连和重设样式。指令应把对象、动作和不变项写清楚:

Rename “Auth” to “Authorization Server”.
Keep all existing connections and node types unchanged.
Add an exclusive gateway after “Validate request”.
Approved goes to “Create order”; rejected goes to “Notify customer”.
Move Support and Finance into separate Merchant lanes.
Do not change the Customer pool or message flows.

每轮只处理一类变化,修改后浏览版本差异,再决定保留或恢复。

如何利用版本历史

对话式编辑容易让局部修改影响其他结构。版本历史适合建立明确检查点:

  1. 生成初稿后保存“结构基线”。
  2. 补齐业务语义后保存“逻辑确认”。
  3. 完成布局和样式后保存“视觉确认”。
  4. 导出前保存“交付版本”。

版本名称应描述状态,不要只写“版本 1”“最终版 2”。

Mermaid 导出能保留什么

Mermaid .mmd 适合保存节点、关系和可渲染的文本结构,也便于放入代码仓库。但 flow-chart.io 的完整场景对象可能包含精确位置、特定形状、泳道细节或产品专属元数据,Mermaid 不一定能无损表达。

导出后应在独立 Mermaid 渲染器中检查:

  • 图表类型是否仍正确。
  • 节点和边是否完整。
  • 泳道是否被合理转换为子图。
  • BPMN 或 UML 专属语义是否被降级。
  • 标签、图标和样式是否丢失。

为什么还要保存 JSON

产品页将 JSON 描述为规范场景图并支持重新导入。若目标是在 flow-chart.io 中继续编辑,JSON 或项目本身比 Mermaid 更适合作为完整工作文件。

格式主要用途是否适合继续编辑
JSON保存和重新导入完整场景图最适合产品内继续编辑
Mermaid文本维护、文档与代码仓库适合可支持语义范围内编辑
SVG网页、设计和无损缩放适合矢量后期处理
PNG预览与广泛兼容不适合作为结构源文件
PDF打印和固定页面交付不适合作为主要编辑源

PNG 与 SVG 的导出细节

当前页面说明 PNG 支持 2 倍和 4 倍像素密度,SVG 为可缩放矢量格式。选择时应考虑目标:

  • 聊天、工单和普通文档优先 PNG。
  • 网页、印刷和大型展示优先 SVG。
  • 需要重回产品编辑时保留 JSON。
  • 需要版本评审时保留 Mermaid。

如何使用标准检查建议

产品页说明,AI audit advisor 会根据选定域提示潜在问题,例如 BPMN 网关出口无标签,或 C4 容器图缺少信任边界。完整审计能力可能与账号方案有关。

这些建议是辅助检查,不是认证。用户应:

  1. 确认提示针对正确图表域。
  2. 阅读建议对应的具体元素。
  3. 根据真实标准和项目约束判断是否修改。
  4. 修改后重新审查相关路径。
  5. 正式合规场景交由具备资质的人员确认。

从文档生成时要注意什么

粘贴文档前应先限定范围,否则 AI 可能把背景、需求、示例和未来计划混为一张图。提示中应说明:

  • 只使用哪些章节。
  • 哪些内容是现状,哪些是目标状态。
  • 未知关系应标记待确认。
  • 不得自行补充系统或角色。
  • 图表面向谁以及用于何种评审。

从代码仓库生成时要注意什么

产品提供 GitHub 扫描能力,用于让图表基于实际代码库。连接仓库前应确认授权范围、组织政策和最小权限,并检查:

  • 扫描的是正确分支和提交。
  • 生成图中的组件在代码中确实存在。
  • 运行时依赖没有仅凭静态导入被误判。
  • 配置生成的关系与生产环境一致。
  • 私有仓库内容不会被不当共享或导出。

如何验收不同类型的图

Mermaid

检查语法可渲染、节点 ID 唯一、分支完整,并在独立渲染器中打开导出文件。

BPMN

检查事件、任务、网关、池、泳道和消息流语义,不把自动检查当作 BPMN 2.0 认证。

UML

按具体类型检查:类图看基数与所有权,时序图看消息顺序,状态图看转换和终态,活动图看分叉与汇合。

敏感信息和共享边界

文档、仓库和架构图可能包含密钥、内网地址、客户信息或安全控制。上传或连接前应确认隐私政策、账号方案、组织授权和数据保留边界,并只提供完成图表所需的最小内容。

公开分享链接和导出文件前要再次脱敏。版本历史中的旧草稿也可能保留已经从当前图中删除的敏感节点。

常见问题

一段提示能否同时生成 Mermaid、BPMN 和 UML?

可以围绕同一业务分别生成,但不应期待三种表示完全等价。应为每种图明确目的、元素和验收标准。

导出 Mermaid 后还能完整恢复原场景吗?

不一定。Mermaid 可能无法保留全部场景图元数据。需要完整重新导入时应保存 JSON 或项目版本。

BPMN 自动检查通过是否代表合规?

不是。官方说明检查属于尽力而为,不提供合规认证,正式流程仍需人工审查。

哪个格式最适合 Git 管理?

Mermaid 文本最适合差异比较;JSON 更适合完整恢复场景,但差异可能更复杂。可同时保存两者并明确权威来源。

总结

flow-chart.io 的核心不是把提示词变成一张图片,而是生成可继续编辑和版本化的场景图。先按问题选择 Mermaid、BPMN 或具体 UML 类型,再用明确的对象、关系、分支和边界生成初稿,通过聊天与画布小步修改。交付时用 JSON 保留完整场景,用 Mermaid 支持文本维护,用 SVG、PNG 或 PDF 满足展示需求,并对 BPMN 合规与格式转换中的语义损失进行人工验证。

相关文章

精彩推荐