利用GPT写Mermaid代码生成流程图

初识Mermaid

Mermaid(美人鱼)是一种简单且易于使用的开源工具,它允许用户使用类似于Markdown的语法创建各种类型的图表和图形。它是一个流行的轻量级工具,特别适用于在文档、博客、演示文稿和代码注释中创建图表。

Mermaid支持多种图表类型,包括流程图、序列图、甘特图、类图、状态图、饼图等。通过简单的文本输入,您可以描述图表中的元素和它们之间的关系,然后Mermaid会将其转换成漂亮的图表。

使用Mermaid,您可以:

- 创建流程图,表示进程或算法的步骤和决策流程。

- 绘制序列图,表示系统中不同组件或角色之间的交互过程。

- 制作甘特图,以可视化项目计划和时间表。

- 绘制类图,表示面向对象系统中类与类之间的关系。

- 创建状态图,表示系统或对象在不同状态之间的转换。

- 制作饼图,以可视化数据的比例和百分比。

Mermaid的语法简洁易懂,且易于上手。您只需在支持Mermaid的编辑器或平台中编写相应的代码,即可生成漂亮的图表。由于其便捷性和灵活性,Mermaid被广泛用于软件开发、技术文档、项目管理和教学等领域。

总之,Mermaid是一个强大且免费的工具,可以帮助您以简单的文本方式创建各种类型的图表,使您的内容更具可视化效果和吸引力。

支持Mermaid的软件

Mermaid是一个纯前端的JavaScript库,因此它可以在许多支持JavaScript的平台和编辑器中使用。以下是一些支持Mermaid的常见软件和平台:

Visual Studio Code:VS Code是一个流行的代码编辑器,有很多Mermaid的插件可供选择,可以在编辑Markdown文件时直接使用Mermaid语法创建图表。
Typora:Typora是一款支持实时预览的Markdown编辑器,它内置了Mermaid支持,可以在Markdown文件中创建和查看Mermaid图表。
Jupyter Notebook:Jupyter Notebook是一种交互式计算环境,可以在Markdown单元格中使用Mermaid语法绘制图表。
GitHub和GitLab:GitHub和GitLab都支持在Markdown文件中使用Mermaid语法绘制图表。在这些平台上,您可以使用Mermaid语法在README文件或Wiki页面中创建图表。
Docusaurus:Docusaurus是一个用于构建技术文档网站的工具,它支持在文档中使用Mermaid语法绘制图表。
GitBook:GitBook是另一个用于创建电子书和技术文档的工具,它也支持在文档中使用Mermaid语法创建图表。
OBSidian:OBSidian是一款用于个人知识管理的应用程序,它支持在Markdown笔记中使用Mermaid语法绘制图表。
Confluence:Confluence是一个企业知识管理工具,它支持在页面上使用Mermaid语法创建图表。

独立的Mermaid在线编辑器:除了以上的软件和平台,还有一些独立的在线编辑器,专门用于编辑和预览Mermaid图表。您可以在浏览器中访问这些编辑器,无需安装任何软件即可使用Mermaid。

请注意,要在支持Mermaid的软件中使用Mermaid图表,确保您已正确配置Mermaid库的引用。有些软件可能需要您手动启用Mermaid支持或安装相应的插件。

1 在线 Mermaid 编辑器

https://www.mermaidchart.com/app/projects/20820e5a-224e-4bfb-ae84-eb14ebb6bbeb/diagrams/249d6af3-479a-4c13-a151-08798e6f8140/version/v0.1/edit

2 文档:https://mermaid.js.org/syntax/flowchart.html?

Mermaid支持的图

Mermaid支持的图包括:

流程图(Flowchart):用于描述算法、工作流程、决策过程等。
时序图(Sequence Diagram):用于表示对象之间的交互顺序和时间顺序。
甘特图(Gantt Chart):用于展示项目的计划进度和时间安排。
类图(Class Diagram):用于描述类之间的关系和属性。
实体关系图(Entity Relationship Diagram,简称ER图):用于表示数据库中实体和它们之间的关系。
用户旅程图(User Journey Diagram):用于展示用户在使用产品或服务时的体验过程。
部署图(Deployment Diagram):用于描述系统中不同组件和节点之间的部署关系。
状态图(State Diagram):用于表示对象或系统在不同状态下的转换和行为。
饼图(Pie Chart):用于展示数据的相对比例。
柱状图(Bar Chart):用于展示数据的数量或大小比较。
折线图(Line Chart):用于展示数据随时间或其他变量的变化趋势。
雷达图(Radar Chart):用于比较多个维度的数据。
极地区域图(Polar Area Chart):用于展示数据在不同维度上的分布情况。
散点图(Scatter Plot):用于表示两个变量之间的相关关系。
通用图表(Generic Diagram):Mermaid还提供了一种通用的图表类型,可以根据需要自定义图表样式和结构。

这些图表类型使得Mermaid成为一个功能强大的工具,可以用于在各种文档和平台中创建各种类型的图表,方便地展示和分享信息。使用Mermaid语法编写这些图表非常直观和简洁,使得图表的创建过程更加高效和便捷。

Mermaid语法

注释为:

%% 注释

插入为:(以下的例如只列举代码)

```mermaid

代码

```

<body>
  <div class="mermaid">
   代码
  </div>
</body>

1 流程图(Flowchart)

A
B
C
D

2 时序图(Sequence Diagram)

Alice Bob John 你好 John,你好吗? 检查健康状况 loop [健康检查] John在思考\n这个问题 我很好! 你呢? 我也很好! Alice Bob John

3 甘特图(Gantt Chart)

2023-07-20 2023-07-21 2023-07-22 2023-07-23 2023-07-24 2023-07-25 2023-07-26 2023-07-27 2023-07-28 2023-07-29 任务1 任务2 任务3 任务4 项目A 项目B 项目计划

4 类图(Class Diagram)

Animal
- name: 字符串
+eat()
Dog
+bark()
Cat
+meow()

5 实体关系图(Entity Relationship Diagram,简称ER图)

CUSTOMER ORDER DELIVERY-ADDRESS INVOICE ORDER-ITEM PRODUCT-CATEGORY PRODUCT places uses liable for receives covers includes contains ordered in

6 用户旅程图(User Journey Diagram)

登录
登录
登录页面->>认证
登录页面->>认证
认证-->>登录成功
认证-->>登录成功
登录成功->>主页
登录成功->>主页
浏览
浏览
主页->>产品列表
主页->>产品列表
产品列表->>产品详情
产品列表->>产品详情
产品详情->>主页
产品详情->>主页
结账
结账
主页->>购物车
主页->>购物车
购物车->>结算页面
购物车->>结算页面
结算页面->>支付
结算页面->>支付
支付-->>支付成功
支付-->>支付成功
支付成功->>主页
支付成功->>主页
用户旅程图

7 部署图(Deployment Diagram)

服务器 2
服务器 1
App3
App4
DB2
App1
App2
DB1

8 状态图(State Diagram)

打开
关闭
关闭
打开

9 饼图(Pie Chart)

45% 30% 25% 苹果 香蕉 樱桃

10 通用图表(Generic Diagram)

A
B
C
D

利用GPT写Mermaid代码生成流程图

1 生成示例

采购部门
市场部门
技术部门
生产部门
行政部门
财务部门
总经理
汇报
指导
协调
协调
技术支持
市场需求
采购需求
支持
支持
协作
协作
协作
反馈
资源需求
招聘
招聘
考勤情况
绩效目标
评估
产品需求
生产情况
生产情况
质量问题
质量问题
技术支持
市场需求
市场需求
销售情况
销售情况
售后支持
售后支持
采购需求
采购需求
订单进度
库存信息
库存信息
采购计划
供应商管理
采购订单管理
物资库存管理
市场调研
销售管理
售后服务
产品研发管理
外协管理
技术文档管理
生产计划
生产进度跟踪
生产质量管理
招聘管理
培训管理
考勤管理
绩效考核
财务核算
资金管理
费用管理
财务报表
总经理
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

唐锦嵩

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

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

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

打赏作者

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

抵扣说明:

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

余额充值