NewspaceGPT带你玩系列之美人鱼图表(流程图)

记住这个网址:https://newspace.ai0.cn

注册一个账号,用qq邮箱,然后登录

在这里插入图片描述

选一个可用的Plus,不要选3.5

探索GPT

在这里插入图片描述

今天的主角是

在这里插入图片描述

开始寻梦美人鱼图表

在这里插入图片描述
一起来学点英语吧。

Official GPT from the Mermaid team. Generate a Mermaid diagram or chart with text including flowcharts, sequence, mind map, state, git graph, C4, class, block, Gantt chart, timeline, Sankey, user journey, entity relationship, pie chart, requirement, quadrant chart, or XY chart diagrams.

美人鱼团队的官方GPT。生成包含文本的美人鱼图或图表,包括流程图、序列图、思维导图、状态图、数字图、C4、类、块图、甘特图、时间线、Sankey、用户旅程、实体关系、饼图、需求、象限图或XY图表。

Create a flowchart for making pizza. Add emoji.
Show me inheritance using a class diagram.
Make a sequence diagram for a barista ☕
Make a mindmap of various animals with emoji.

创建制作披萨的流程图。添加表情符号。
使用类图显示继承。
为咖啡师制作序列图☕
用表情符号制作各种动物的思维导图。

我选第一个试一下

在这里插入图片描述

问:重新回答上面的问题,一切都用汉语

以下是自动生成文档和图表


我们来创建一个制作披萨的流程图,并添加表情符号以增加视觉效果。流程图将包含以下步骤:

收集食材 🍅🧀🥬🍄
准备面团 🍞
加入酱料 🍅
添加配料 🍄🧀🥬
烘烤披萨 🍕
享用 🍽️
以下是这个流程图的Mermaid代码:

flowchart TD
    A[收集食材 🍅🧀🥬🍄] --> B[准备面团 🍞]
    B --> C[加入酱料 🍅]
    C --> D[添加配料 🍄🧀🥬]
    D --> E[烘烤披萨 🍕]
    E --> F[享用 🍽️]

现在我将渲染此流程图以验证其正确性。
在这里插入图片描述
你可以在MermaidChart编辑器上编辑和保存这个流程图。


在这里插入图片描述
这个编辑不太熟。我就不演示编辑了。 如果你感兴趣,可以研究一下。

重新生成一个流程图:生成一个网站登录的流程图

我们来创建一个网站登录的流程图。流程图包括以下步骤:

用户打开登录页面
用户输入用户名和密码
用户点击登录按钮
系统验证用户信息
如果验证成功,跳转到主页
如果验证失败,显示错误信息
以下是这个流程图的Mermaid代码:

flowchart TD
    A[打开登录页面] --> B[输入用户名和密码]
    B --> C[点击登录按钮]
    C --> D{系统验证用户信息}
    D -->|验证成功| E[跳转到主页]
    D -->|验证失败| F[显示错误信息]

现在我将渲染此流程图以验证其正确性。

已与“mermaidchart.com”对话

这是网站登录的流程图:

在这里插入图片描述

你可以在MermaidChart编辑器上编辑和保存这个流程图。


结论

关于流程图生成还是不错的,能生成,能修改。这就省了一大半的力气了。

在这里插入图片描述

关注我,不迷路,共学习,同进步

关注我,不迷路,共学习,同进步

Mer流程图是一种用于绘制流程图、状态图、时序图和甘特图的语法和库。它使用JavaScript进行本地渲染,并广泛集成于许多Markdown编辑器中。 Mermaid的基本语法可以通过以下示例来进行说明: ``` graph LR A --> B A --> C B --> D C --> D ``` 上述示例中,`graph LR`表示创建一个方向从左到右的流程图。`A`, `B`, `C`, `D`表示节点,`-->`表示节点之间的连接关系。根据上述示例,A节点连接到B和C节点,B和C节点再连接到D节点。 在使用Mermaid绘制流程图时,可以通过安装Vue组件`vue-mermaid`来方便地使用Mermaid库。首先,需要使用以下命令安装依赖: ``` npm install --save vue-mermaid ``` 然后,通过导入`vue-mermaid`组件并将其注册到Vue中,可以在组件中使用Mermaid流程图语法来绘制流程图。 总结起来,Mermaid流程图是一种使用特定语法和库来绘制流程图的方法,可以通过安装合适的工具和组件来使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [mermaid基本流程图](https://blog.csdn.net/fukangwei_lite/article/details/119191120)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Mermaid流程图](https://blog.csdn.net/weixin_38331049/article/details/119568081)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue-mermaid:Vue组件的美人鱼流程图](https://download.csdn.net/download/weixin_42109925/18271495)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

百锦再@新空间代码工作室

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值