当前位置：首页 > news >正文

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

news 来源：原创 2025/9/18 4:39:36

你可能已经尝试过使用 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，这些方法都能让制图变得更快、更简单、更高效！
快来尝试这些工具，找到最适合你的工作流吧！

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

Mermaid 语法基础

示例：用户登录流程

步骤 1：描述你的流程

步骤 2：让 LLM 生成 Mermaid 代码

步骤 3：渲染图表

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

PlantUML 语法基础

示例：在线购物流程

步骤 1：描述你的流程

步骤 2：让 LLM 生成 PlantUML 代码

步骤 3：渲染图表

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

Graphviz DOT 语法基础

示例：决策流程

步骤 1：描述你的流程

步骤 2：让 LLM 生成 DOT 代码

步骤 3：渲染图表

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

相关文章：