如何实现 GPT 为代表的 AI + FlowChart 实现快速制图-每日运维

全新的时代，AI已经开始重塑我们的工作方式和流程，为我们带来了更高效、智能化的工作体验。其中，AI制图已经成为一种流行的趋势，可以帮助人们以更低的成本绘制更加强大、符合需求的图表。

常见制图方法对比

手动制图：耗时耗力，迁移性差；
程序制图：迁移性好，简单易学。推荐阅读——Mermaid 使用教程：从入门到精通
AI 辅助制图：使用自然语言提出需求，零基础快速制图；

这篇文章介绍如何实现 GPT 为代表的 AI + FlowChart，实现快速制图。

其中，Mermaid 是一种非常流行、易于使用的程序制图语言，它可以帮助人们轻松创建各种类型的图表，如流程图、甘特图、饼状图等。然而，掌握 Mermaid 需要一定的编程技能。

如今，通过 AI，用户无需拥有专业的编程技能，便可以使用Mermaid工具来实现快速、高效的制图，提高数据可视化效果和工作效率。

如何实现 GPT 为代表的 AI + FlowChart 实现快速制图

工具介绍

AI 辅助：本文使用 FlowUs AI；
Mermaid 编辑器：FlowUs 的 Code Block 支持 Mermaid 语法。

如图，FlowUs 的 Mermaid 语法渲染效果。上半部分是 Code, 下半部分是图片预览。

如何实现 GPT 为代表的 AI + FlowChart 实现快速制图

操作步骤

打开 FlowUs AI，进行任务描述和需求描述，便会直接生成所需要的图表。
如果不满意，建议重新调整或者完善针对 AI 的提示词，或者手动修改 Mermaid 语法。

AI 指示词

下面是 2 个可供参考的 AI提示词，{ } 的内容可以根据自己需求进行填写。

使用 mermaid.js 语法，生成一个{描述内容}的{流程图}。
假如你是一位优秀的制图专家。我正在使用的编辑器已经支持 Mermaid 语法。你的任务是，根据我的提问，生成关于某个需求、使用 mermaid.js 语法的 Code 片段。我的第一个需求是：生成一个{描述内容}的{流程图}示范。

如何实现 GPT 为代表的 AI + FlowChart 实现快速制图

使用效果

不指定任务，生成示范图表

流程图

提示词：假如你是一位优秀的制图专家。我正在使用的编辑器已经支持 Mermaid 语法。你的任务是，根据我的提问，生成关于某个需求、使用 mermaid.js 语法的 Code 片段。我的第一个需求是：生成一个简单的流程图示范。

生成结果：

graph TD;
A[开始] --> B[中间步骤];
B --> C[结束];

如何实现 GPT 为代表的 AI + FlowChart 实现快速制图

类图

classDiagram
class Person {
  -name: string
  -age: int
  +setName(name: string): void
  +setAge(age: int): void
  +getName(): string
  +getAge(): int
}

class Student {
  -major: string
  +setMajor(major: string): void
  +getMajor(): string
}

class Teacher {
  -subject: string
  +setSubject(subject: string): void
  +getSubject(): string
}

class Employee {
  -company: string
  +setCompany(company: string): void
  +getCompany(): string
}

class Manager {
  -department: string
  +setDepartment(department: string): void
  +getDepartment(): string
}

Person  Profile: View Profile
    Dashboard -> Shopping: View Products
    Shopping -> Cart: Add Product
    Shopping -> Checkout: Proceed to Checkout
    Checkout -> ThankYou: Order Successful

如何实现 GPT 为代表的 AI + FlowChart 实现快速制图

当然了，在上面的提示词中，我只是让 AI 生成关于某个流程图的示范，并没有提出具体要求。

下面我们指定具体的任务。

根据业务需求，生成图表

提示词：假如你是一位优秀的制图专家。我正在使用的编辑器已经支持 Mermaid 语法。你的任务是，根据我的提问，生成关于某个需求、使用 mermaid.js 语法的 Code 片段。我的第一个需求是：生成一个关于购物决策的流程图。

graph TD;
    A[开始] --> B(需求分析)
    B --> C{是否有优惠}
    C -->|是| D[购买商品]
    C -->|否| E{是否需要该商品}
    E -->|是| D
    E -->|否| A
    D --> F[结束]

如何实现 GPT 为代表的 AI + FlowChart 实现快速制图

以上是购物决策的流程图，根据需求分析，决定是否有优惠，如果有，则直接购买商品；如果没有，则判断是否需要该商品，如果需要，则购买；如果不需要，则重新开始决策流程。

提供流程描述，生成图表

我们也可以描述对于流程的想法，让 AI 提取信息，生成所需要的图表。

我的描述：

我正在设计一个自助下单和退换货系统。我的想法如下：这是一个自助下单的流程。用户进入网站，选择产品，添加到购物车，随后用户点击结算订单，商家发送订单信息至消费者要求确认订单。随后，用户进行支付。支付成功后，用户会收到邮件提醒，告知订单下单成功。最后，用户可以通过网站订单页面追踪快递配送信息。在收到商品后，如果不满意，可以练习客服，在 7 天内无理由退换货。

提示词：假如你是一位优秀的制图专家。我正在使用的编辑器已经支持 Mermaid 语法。你的任务是，根据我的提问，生成关于某个需求、使用 mermaid.js 语法的 Code 片段。我的第一个需求是：根据我的描述，提取相关信息，生成一个关于自助下单和退换货系统的流程图。

生成结果：

graph TD;
A(进入网站);
B(选择产品);
C(添加到购物车);
D(点击结算订单);
E(商家发送订单信息至消费者要求确认订单);
F(用户进行支付);
G(支付成功后用户收到邮件提醒);
H(通过网站订单页面追踪快递配送信息);
I(收到商品);
J(不满意联系客服);
K(无理由退换货);

A-->B;
B-->C;
C-->D;
D-->E;
E-->F;
F-->G;
G-->H;
H-->I;
I-->J;
J-->K;

如何实现 GPT 为代表的 AI + FlowChart 实现快速制图