引言：
你相信吗？AI大语言模型可以帮你画流程图，甚至画原型图。
AIGC生成流程图.png
生成式AI自2022年年底开始，逐渐成为了全球热门话题，同时也成了各个企业角逐的新兴领域。
LLM大语言模型发展迅速，变化太快了。大家都在热议LLM大语言模型，热议AIGC。有的人感叹其强大，有的人觉得“不明觉厉”，还有的人觉得“然并卵”，还有许许多多的人一无所知。
LLM大语言模型很强大，AIGC很热门，但是，于我们而言，如果不知道怎么使用，就只能望洋兴叹了。
作为一名产品经理，如果你还不知道有生成式AI、LLM大语言模型、AIGC、GPT这种“物种”的存在，那就赶紧去了解了解，并好好使用一番。
LLM大语言模型赋能的AIGC，你可以试试用其来帮助自己完成产品方案设计。
本文以画流程图为例，介绍一下，产品经理如何利用AIGC来帮助自己梳理业务流程。
使用到的工具：
1、国内大语言模型：ChatGML
2、Mermaid
3、PlantUML
一、需求描述
正如每一位产品经理都需要向需求方了解业务需求一样，大语言模型也需要你清晰的向其描述你的需求，你期待的结果。
不过本文只是为了介绍通过AIGC来画业务流程图，因此，至于怎么清晰地向大模型描述需求，不做详细说明。
以登录注册的需求为例。要求大模型生成登录注册的业务流程图：
提问：
你是一个产品经理，非常熟悉互联网产品设计。请设计一个登录注册的业务流程图
该问题是不具体的，因此，大语言模型按照自己的理解，梳理了登录注册的业务流程图。
> 作为一个产品经理，设计一个登录注册的业务流程图，我们需要考虑用户的体验流程，同时确保流程的安全性和便捷性。以下是一个基础的登录注册业务流程图的步骤：
>
>
> +----------------+ +----------------+ +----------------+
> | | | | | |
> | 游客访问网站 | | 游客访问网站 | | 游客访问网站 |
> | | | | | |
> +-------+--------+ +-------+--------+ +-------+--------+
> | | |
> | 1. 导航到注册页面 | | 1. 导航到登录页面
> | | |
> +-------v--------+ | | +-------v--------+
> | 注册引导页面 |<----------+ | | 登录页面 |
> +-------+--------+ | | +-------+--------+
> | | |
> | 2. 输入注册信息 | | 2. 输入登录信息
> | | |
> +-------v--------+ | | +-------v--------+
> | 验证信息页面 |<----------+ | | 验证信息页面 |
> +-------+--------+ | | +-------+--------+
> | | |
> | 3. 发送验证邮件/短信 | | 3. 验证登录信息
> | | |
> +-------v--------+ | | +-------v--------+
> | 验证完成页面 |<----------+ | | 登录成功 |
> +-------+--------+ | | +-------+--------+
> | | |
> | 4. 注册成功 | | 4. 登录成功
> | | |
> +-------v--------+ | | +-------v--------+
> | 个人中心页面 |<----------+ | | 首页 |
> +-------+--------+ | | +-------+--------+
> | | |
> | 5. 进入应用 | | 5. 进入应用
> +-------+--------+ +-------+--------+ +-------+--------+
> | 游客状态 | | 已注册状态 | | 已登录状态 |
> +-------+--------+ +-------+--------+ +-------+--------+
> | | |
> | 6. 返回首页或继续浏览 | | 6. 返回首页或继续浏览
> | | |
> +-------v--------+ | | +-------v--------+
> | 网站首页链接 |<----------+ | | 登录注册链接 |
> +-------+--------+ | | +-------+--------+
>
> 这个流程图包括以下几个关键步骤：
>
> 1. 游客访问网站：用户来到网站首页，可以选择注册或登录。
> 2. 注册引导：用户选择注册，被引导至注册引导页面。
> 3. 输入注册信息：用户在注册引导页面上填写用户名、密码、邮箱等信息。
> 4. 验证信息：系统对用户输入的注册信息进行验证，可能包括发送验证邮件或短信。
> 5. 注册成功：验证通过后，用户被引导至验证完成页面，注册成功。
> 6. 登录引导：用户选择登录，被引导至登录页面。
> 7. 输入登录信息：用户在登录页面上填写用户名和密码。
> 8. 验证登录信息：系统对用户输入的登录信息进行验证。
> 9. 登录成功：验证通过后，用户被引导至验证信息页面，登录成功。
> 10. 进入应用：用户可以选择进入个人中心或直接访问网站的其他部分。
>
> 在设计流程时，需要考虑到用户的易用性和安全性。例如，注册和登录的表单设计要简单明了，密码强度要有最低要求，同时要提供找回密码的功能。对于验证步骤，可以通过发送邮件或短信来降低恶意注册和登录的风险。此外，流程中应当设置适当的跳转和提示，增强用户体验。
ChatGML生成的流程图
这流程图看着有模有样的，不过和我们平时画的流程图还是相差比较大的。作为一名非程序员出身的产品经理，这种流程图实在不太适合我们看。
## 二、使用Mermaid来生成流程图
### 2.1 通过Mermaid来生成流程图
前面只是让大语言模型生成流程图，并没有明确地让其用什么方式来生成流程图。
现在，我们接着让其以Mermaid的方式来生成流程图：
提问：
请使用mermaid的形式来生成。
该提问的描述增加了生成流程图的方式，相对于前面的提问，稍微具体了一些。
这时候ChatGML换了一种方式来生成流程图：
> 当然，以下是使用Mermaid语法生成的登录注册业务流程图：
>
>
> flowchart LR
> A[游客访问网站] --> B(注册引导页面)
> B --> C{是否已注册}
> C -->|是| D[个人中心页面]
> C -->|否| E[注册引导页面]
> E --> F{输入注册信息}
> F --> G{验证信息}
> G --> H{发送验证邮件/短信}
> H --> I[验证完成页面]
> I --> J{注册成功}
> J --> K{进入应用}
> A --> L[登录引导页面]
> L --> M{输入登录信息}
> M --> N{验证登录信息}
> N --> O[验证信息页面]
> O --> P{登录成功}
> P --> Q{返回首页或继续浏览}
> Q --> R{网站首页链接}
> Q --> S{登录注册链接}
>
> 为了生成这个流程图，你需要使用支持Mermaid语法的编辑器或者在线工具，比如Typora、StackEdit或者其他Markdown编辑器，并且这些编辑器需要安装了Mermaid插件。你也可以直接在支持Mermaid的在线流程图生成网站上输入上述代码来生成流程图。
好吧，作为一名产品经理，这些类似代码的东西，我们也还是看不懂。
好在，ChatGML提到了“为了生成这个流程图，你需要使用支持Mermaid语法的编辑器或者在线工具，比如Typora、StackEdit或者其他Markdown编辑器，并且这些编辑器需要安装了Mermaid插件。你也可以直接在支持Mermaid的在线流程图生成网站上输入上述代码来生成流程图。”
下面，我使用Typora的方式来将上面的那些代码解析出来：
`mermaid
flowchart LR
A[游客访问网站] --> B(注册引导页面)
B --> C{是否已注册}
C -->|是| D[个人中心页面]
C -->|否| E[注册引导页面]
E --> F{输入注册信息}
F --> G{验证信息}
G --> H{发送验证邮件/短信}
H --> I[验证完成页面]
I --> J{注册成功}
J --> K{进入应用}
A --> L[登录引导页面]
L --> M{输入登录信息}
M --> N{验证登录信息}
N --> O[验证信息页面]
O --> P{登录成功}
P --> Q{返回首页或继续浏览}
Q --> R{网站首页链接}
Q --> S{登录注册链接}
Typora展示Mermaid流程图
得到的流程图如下：
注册登录流程图
这流程图，看着和我们平时使用Visio或其他流程图工具画的流程图是不是很接近了？
### 2.2 了解Mermaid
Mermaid是一种简单的类似 Markdown 的脚本语言，通过 JavaScript 编程语言，将文本转换为图片，从而实现使用文本和代码创建可视化流程图或者其他图表。
从Mermaid官网可以看到，其支持流程图、序列图、类图、状态图、实体关系图、甘特图、饼图、象限图、思维导图、时间轴、桑基图等可视化图形/图表。
序列图（时序图）
类图
甘特图
思维导图
如果你对Mermaid感兴趣，可以到他们官网了解：<https://mermaid.js.org/syntax/mindmap.html>
如果你没有Typora，也可以直接使用官方的在线编辑器来使用：<https://mermaid.live/>
我们日常工作一般不会使用这种方式来画流程图，效率太低了。不过对于对文本内容友好的大语言模型，由大语言模型生成代码，并通过Mermaid的编辑器展示出来，还是不错的。
## 三、通过PlantUML来生成流程图
### 3.1 通过PlantUML来生成流程图
除了Mermaid，还有另外一种方式可以通过代码的方式来生成流程图的——PlantUML。
接着前面注册登录的例子，继续让ChatGML通过PlantUML的方式来生成：
<pre class="brush:plain;toolbar:false">提问：
请使用plantuml的形式返回
ChatGML生成了：
> 使用PlantUML语法来描述登录注册的业务流程图，可以如下所示：
>
>
> <pre class="brush:python;toolbar:false">@startuml
> actor "用户" as user
>
> rectangle "游客状态" {
> note over user "访问网站首页"
> }
>
> rectangle "已注册状态" {
> note over user "访问网站"
> }
>
> rectangle "已登录状态" {
> note over user "访问网站"
> }
>
> user --> "导航到注册页面" : 选择注册
> "导航到注册页面" --> "输入注册信息" : 填写信息
> "输入注册信息" --> "验证信息" : 提交信息
> "验证信息" --> "发送验证邮件/短信" : 发送验证
> "发送验证邮件/短信" --> "验证完成页面" : 验证邮件/短信
> "验证完成页面" --> "注册成功" : 确认验证
> "注册成功" --> "进入应用" : 选择应用
>
> user --> "导航到登录页面" : 选择登录
> "导航到登录页面" --> "输入登录信息" : 填写信息
> "输入登录信息" --> "验证登录信息" : 提交信息
> "验证登录信息" --> "验证信息页面" : 验证信息
> "验证信息页面" --> "登录成功" : 确认验证
> "登录成功" --> "返回首页或继续浏览" : 选择操作
> "返回首页或继续浏览" --> "网站首页链接" : 返回首页
> "返回首页或继续浏览" --> "登录注册链接" : 继续浏览
>
> @enduml
>
> 这段代码定义了一个用户在网站上的状态转换和操作流程。用户可以从游客状态开始，选择注册或登录，经过一系列的操作后，可以转变为已注册或已登录状态。在每种状态下，用户都可以进行不同的操作，如返回首页、继续浏览或进行其他应用内的工作。
>
> 要生成这个流程图，你需要使用支持PlantUML的编辑器或者在线工具。你可以在支持PlantUML的在线流程图生成网站上输入上述代码来生成流程图。
根据提示，使用PlantUML在线工具来生成可视化的流程图：
好吧，报错了。
曾经使用ChatGPT来生成PlantUML的复杂的流程图，也会有这种报错的情况。当时反复修改了提示词让ChatGPT重新生成，还是不准确。今天，使用国产大语言模型ChatGML，稍微调整了一下提示词，重新生成的代码是没问题的：
<pre class="brush:python;toolbar:false">提问：
报错啦，请学习https://plantuml.com/zh/ 的文档，了解plantuml的语法后重新生成。
至于ChatGML有没有通过链接去学习PlantUML的文档就不得而知了，重新生成的代码是正常的：
> 非常抱歉，让我们重新尝试使用PlantUML语法来生成登录注册的业务流程图。根据PlantUML的文档，我们可以使用状态图(state diagram)来描述这个流程。以下是修正后的代码：
>
>
> <pre class="brush:python;toolbar:false">@startuml
> [*] --> Start
> Start --> UserInput : 游客访问网站
> UserInput --> RegistrationPage : 选择注册
> RegistrationPage --> UserFillsInfo : 输入注册信息
> UserFillsInfo --> Submit : 提交信息
> Submit --> Verification : 验证信息
> Verification --> VerificationEmail : 发送验证邮件/短信
> VerificationEmail --> VerificationCompleted : 验证完成页面
> VerificationCompleted --> RegistrationSuccess : 注册成功
> RegistrationSuccess --> ApplicationEntry : 进入应用
>
> Start --> UserInput : 游客访问网站
> UserInput --> LoginPage : 选择登录
> LoginPage --> UserFillsLoginInfo : 输入登录信息
> UserFillsLoginInfo --> LoginVerification : 验证登录信息
> LoginVerification --> LoginSuccess : 验证成功
> LoginSuccess --> ApplicationEntry : 进入应用
>
> ApplicationEntry --> HomePage : 返回首页
> ApplicationEntry --> ContinueBrowsing : 继续浏览
>
> @enduml
>
> 这段代码定义了一个状态图，描述了用户从访问网站开始，可以选择注册或登录，经过一系列的状态转换后，进入应用的过程。在注册流程中，用户需要填写注册信息，然后提交信息进行验证，验证通过后注册成功，并进入应用。在登录流程中，用户填写登录信息，经过验证后登录成功，并进入应用。应用入口后，用户可以选择返回首页或继续浏览。
>
> 你可以使用PlantUML的在线工具或者将这段代码复制到支持PlantUML的编辑器中，生成相应的流程图。
生成的流程图如下：
注册登录流程图
### 3.2 了解PlantUML
PlantUML是一个功能丰富的组件，可以快速、直接地创建各种图表。它允许用户用简单直观的语言起草UML图表，如序列图、用例图、类图等，同时还有非UML图表的支持，例如JSON数据、YAML数据、EBNF图表等。此外，PlantUML还提供了一些附加功能，如超链接和工具提示、富文本和数学表达式等，使得图表更具活力和信息量。它支持多种输出格式，包括PNG、SVG、LaTeX和ASCII艺术等。
PlantUML还有一个挺符合产品经理的子项目——Salt，因为它可以生成原型图。
Salt是PlantUML的一个子项目，专门用于设计图形界面或网页，包括网站线框、页面示意图和屏幕蓝图等。它对于开发人员、设计人员和用户体验专业人员来说非常有用，因为它可以帮助他们将概念结构与视觉设计相结合，强调功能性而非美观性。Wireframes在界面设计过程中起着核心作用，它们可以用来可视化界面元素和导航系统，促进协作，并适用于各种学科。Wireframes的保真度可以从低细节的草图到高细节的表现不等，对于原型设计和迭代设计至关重要。这个过程整合了从业务分析到用户研究等不同的专业知识，确保最终设计满足业务和用户的需求。
如果能结合“大语言模型+PlantUML+Salt”，并运用得好的话，这确实能提高了产品经理的工作效率，大大节省了做产品方案设计的时间。
遗憾的是，经过ChatGPT和ChatGML的多次测试，生成原型图的代码并不能运行，特别是一些复杂的界面。
如果能使用Salt的文档对大模型做微调训练，增加更多的样本数据，或许能够达到更好的结果。
PlantUML官网：<https://plantuml.com/zh/>
PlantUML在线使用：<https://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000>
## 四、总结
AIGC于产品经理而言，是一个可以提高工作效率的工具，但是其并非是万能的，AIGC可以提高工作效率，但是不能直接帮你生成完整可直接使用的产品方案。
在使用过程中，如果遇到答非所问的情况，可以尝试着换一个问法与其“交流”。如果不能一次性生成自己所需要的流程图或者文档，可以试着一步步与其“沟通”，逐步完成完整的文档编写或者流程图设计。
使用AIGC来辅助完成产品设计的这条路或许还长着，但是起码是能够看到希望的。先用起来，先满足局部需求，能带来的帮助或许有限，但终究是于我们有利的。
评论 (0)