使用AI创建流程图和图表的 3 种简单方法

你可能已经尝试过使用 LLMs 生成图像，但你有没有想过用它们来创建 流程图和图表？这些可视化工具对于展示流程、工作流和系统架构至关重要。
通常，在在线工具上手动绘制图表可能会耗费大量时间。但你知道吗？你可以使用 LLMs 通过简单的文本描述自动生成 这些图表，从而节省时间和精力！

在本文中，我们将介绍 3 种简单的方法 来利用 LLMs 创建流程图和图表，并提供实际示例和可用的提示词。让我们开始吧！

---

方法 1：使用 LLMs 生成 Mermaid 代码

Mermaid.js 是一个基于 JavaScript 的简单制图工具，它允许你使用类似 Markdown 的语法创建 流程图、序列图等。

Mermaid 语法基础

• graph TD / graph LR：定义图表方向（TD：自上而下，LR：从左到右）。
• 节点定义：
  • A[文本]：普通节点。
  • B{条件}：决策节点（菱形）。
  • C[文本]：另一个普通节点。
• 连接方式：
  • A --> B：从 A 到 B 的方向箭头。
  • B -- Yes --> C：带有条件标签的连接。

示例：用户登录流程

步骤 1：描述你的流程

提供清晰的描述，例如：

“创建一个用户登录流程的流程图。步骤包括：用户输入凭据，系统验证凭据，如果有效，则授予访问权限；如果无效，则显示错误信息。”

步骤 2：让 LLM 生成 Mermaid 代码

向 LLM（如 ChatGPT）提问，让它将你的描述转换为 Mermaid 语法。例如：

提示词（Prompt）：

“将以下流程转换为 Mermaid 流程图代码：[你的描述]”

LLM 可能会生成以下代码：

graph TD
A[用户输入凭据] --> B{系统验证凭据}
B -- 有效 --> C[授予访问权限]
B -- 无效 --> D[显示错误信息]

步骤 3：渲染图表

使用 Mermaid 兼容编辑器 可视化流程图，例如：

• Mermaid Live Editor
• VS Code + Mermaid 扩展

只需将代码粘贴到编辑器中，即可看到流程图！

---

方法 2：使用 LLMs 生成 PlantUML 代码

PlantUML 是一个广泛使用的 开源 UML 制图工具，支持 类图、序列图、活动图等。

PlantUML 语法基础

• @startuml / @enduml：标记代码的开始和结束。
• actor：定义角色（如用户或外部系统）。
• participant：定义参与者（如对象或系统）。
• ->：表示元素之间的交互。
• -->：表示返回消息或响应。

示例：在线购物流程

步骤 1：描述你的流程

“创建一个在线购物流程的序列图。步骤包括：用户添加商品到购物车，系统更新购物车，用户结账，系统处理付款，订单确认。”

步骤 2：让 LLM 生成 PlantUML 代码

提示词（Prompt）：

“将以下流程转换为 PlantUML 语法：[你的描述]”

LLM 可能会生成以下代码：

@startuml
actor 用户
participant "购物系统" as 系统用户 -> 系统: 添加商品到购物车
系统 --> 用户: 购物车已更新
用户 -> 系统: 结账
系统 -> 系统: 处理付款
系统 --> 用户: 订单已确认
@enduml

步骤 3：渲染图表

使用 PlantUML 兼容编辑器 可视化流程图，例如：

• PlantText
• VS Code + PlantUML 扩展

只需粘贴代码，即可生成 UML 图表！

---

方法 3：使用 LLMs 生成 Graphviz DOT 代码

Graphviz 是一个强大的图形可视化软件，使用 DOT 语言 来描述图表。它支持 流程图、网络图、层次结构等。

Graphviz DOT 语法基础

• digraph：表示有向图（即边具有方向）。
• ->：定义节点之间的关系。
• [label="..."]：为边添加标签。
• A [shape=box]：自定义节点或边的属性。

示例：决策流程

步骤 1：描述你的流程

“创建一个决策流程的流程图。步骤包括：开始，分析数据，如果数据有效，则继续；如果无效，则重试。”

步骤 2：让 LLM 生成 DOT 代码

提示词（Prompt）：

“将以下流程转换为 Graphviz DOT 代码：[你的描述]”

LLM 可能会生成以下代码：

digraph DecisionMaking {Start -> AnalyzeDataAnalyzeData -> Proceed [label="有效"]AnalyzeData -> Retry [label="无效"]
}

步骤 3：渲染图表

使用 Graphviz 兼容编辑器 可视化流程图，例如：

• WebGraphviz
• VS Code + Graphviz 扩展

粘贴代码，即可生成决策流程图！

---

提升图表创建效率的小贴士

✅ 提供详细描述：描述越清晰，LLM 生成的代码越准确。
✅ 不断优化：可以手动调整代码，优化图表结构。
✅ 结合多种工具：Mermaid 适合快速绘制，Graphviz 适合复杂结构。
✅ 自动化生成：可结合 Python 脚本自动生成图表，提高工作效率。

无论你选择 Mermaid、PlantUML 还是 Graphviz DOT，这些方法都能让制图变得更快、更简单、更高效！
快来尝试这些工具，找到最适合你的工作流吧！

---