免费的源码分享网站ui设计网站

---

如何使用 AI 生成软件类图表

ChatGPT 大语言模型不能直接生成各类图表。但是可以通过生成图表相关的代码来渲染或者转换成图表。

Mermaid 就是其中之一。我们可以让ChatGPT生成Mermaid语法的代码，在使用JS工具进行图表的渲染。

什么是 Mermaid

Mermaid 是一个基于 JavaScript 的图表工具，可渲染 Markdown 启发的文本定义以动态创建和修改图表。

Mermaid 的图片如何保存？

mermaid.live

网站：https://mermaid.live/edit

Draw.io

网站：https://app.diagrams.net/

导入mermaid：

导出png等格式：

Mermaid可以画什么图？

流程图

官方文档：流程图语法 | Mermaid 中文网 (nodejs.cn)

Prompt (问题)：

给我画一个《使用Redis、Token 进行SSO单点登录》流程图，需要标准的mermaid格式。

生成结果：

WangAI 案例分享：https://ai.wmhwiki.cn/share/6c3524c72fad975b68f6154a5a5cea3c

时序图 / 序列图

官方文档：序列图 | Mermaid 中文网 (nodejs.cn)

Prompt (问题)：

**使用标准的 mermaid 格式，**画出一个《在线购物系统》的时序图，有用户，商家，管理员三个角色

生成结果：

WangAI 案例分享：https://ai.wmhwiki.cn/share/f00bd6aed413542a0fca8cd128a8eb03

类图

官方文档：类图 | Mermaid 中文网 (nodejs.cn)

Prompt (问题)：

**使用标准的 mermaid 格式，**绘制出一个类图。

表述如下：微信支付是一种非常方便的电子支付方式。顾客购买完商品后，卖家计算总价，并出示二维码（二维码由图片和账号组成）。顾客扫码后，输入支付金额，并点击支付。如果微信余额足够，则余额支付，如果余额不足，则调用银行支付接口，从银行卡支付。顾客输入正确密码。

生成结果：

WangAI 案例分享：https://ai.wmhwiki.cn/share/08909f879c4a54528ff03503bfbd1634

状态图

官方文档：状态图 | Mermaid 中文网 (nodejs.cn)

Prompt (问题)：

**使用标准的 mermaid 格式，**用状态图描述一个请假流程

少于等于 3 天的请假申请，辅导员审批就可以了，超过 3 天的请假还需系主任审批。

生成结果：

WangAI 案例分享：https://ai.wmhwiki.cn/share/4c546f1b3727c04cd0a7401a22635c97

甘特图

官方文档：甘特图 | Mermaid 中文网 (nodejs.cn)

Prompt (问题)：

某项目开发小组拟开发一个软件系统，进度安排如下：可行性分析半个月；需求分析一个月；概要设计在需求分析进展一半后开始进行，持续两个月；详细设计在概要设计完成后开始，持续两个月；编码工作在详细设计进展一个半月后开始，持续一个月，测试工作与编码工作同时进行，持续一个半月。

使用标准的 mermaid 格式，绘制该系统进度安排的甘特图。

生成结果：

WangAI 案例分享：https://ai.wmhwiki.cn/share/f12411337f4d1f48f9da9319ffc23f9b

实体关系图 / ER图

官方文档：实体关系图 | Mermaid 中文网 (nodejs.cn)

Prompt (问题)：

使用标准的 mermaid 格式，绘制ER图。

某企业有几家餐厅，每个餐厅经营多种食品，每种食品可在多家餐厅制作，每间餐厅可以为制作的不同食品进行自主定价,每家餐厅聘用多名职员,每位职员只能在一家餐厅工作，每位职员在不同的餐厅打工有聘用期和工资，每间餐厅有一个经理，每个经理只能管理一间餐厅。
餐厅的属性有餐厅编号、餐厅名、地址；
食品的属性有食品编号、食品名；
职工的属性有职工编号、职工名、职位和性别。

生成结果：

WangAI 案例分享：https://ai.wmhwiki.cn/share/dad53b37010c47d4817cbf19364d4c7d