DeepSeek结合Mermaid绘图(流程图、时序图、类图、状态图、甘特图、饼图)转载

devtools/2025/3/16 0:25:27/

思维速览:

本文将详细介绍如何利用DeepSeek结合Mermaid语法绘制各类专业图表,帮助你提高工作效率和文档质量。

▍DeepSeek入门使用请看:deepseek保姆级入门教程(网页端使用 + 本地客户端部署 + 使用技巧)

DeepSeek官网: DeepSeek

一、Mermaid简介

Mermaid是一个基于JavaScript的图表绘制工具,它允许用户使用类似于Markdown的文本语法创建和修改图表

Mermaid官网:Mermaid | Diagramming and charting tool

在这里插入图片描述

Mermaid在线编辑器:Online FlowChart & Diagrams Editor - Mermaid Live Editor

在这里插入图片描述

最大的优势在于不需要专业的图形设计软件,就能通过简单的代码创建出清晰、专业的图表。

二、DeepSeek与Mermaid结合的优势

  • 简单易用:无需安装额外软件,直接在DeepSeek对话中编写代码
  • 即时反馈:代码编写完成后即可查看渲染效果
  • 多种图表支持:流程图、时序图、类图等多种类型全覆盖
  • 易于修改:只需调整代码即可更新图表,无需重新绘制

markdown中使用mermaid绘图,写好语句后要用:

```mermaid + ```包裹写好的语句,之后会显示渲染后的图的效果
  • 1

例如:我让DeepSeek使用Mermaid绘制一个流程图示例

在这里插入图片描述

Mermaid语句内容是这样的:

graph TDA([开始]) --> B[输入用户名和密码]B --> C{格式验证}C -->|验证失败| D[提示格式错误]C -->|验证通过| E[请求登录接口]E --> F{登录结果}F -->|成功| G[跳转到主页]F -->|失败| H[提示密码错误]G --> I([结束])H --> BD --> Bstyle A fill:#4CAF50,color:whitestyle I fill:#4CAF50,color:whitestyle D fill:#FF5722,color:whitestyle H fill:#FF5722,color:whitestyle G fill:#2196F3,color:white

对应的流程图渲染效果:

在这里插入图片描述

三、常见图表类型及实例

1. 流程图 (Flowchart)

流程图是最常用的图表类型之一,适合展示算法、业务流程或决策过程

基本语法
graph 方向节点1[文本] --> 节点2[文本]

方向可以是:

  • TB - 从上到下
  • TD - 从上到下(与TB相同)
  • BT - 从下到上
  • RL - 从右到左
  • LR - 从左到右
示例
graph TDA[开始] --> B{是否有问题?}B -->|是| C[解决问题]B -->|否| D[完成]C --> DD --> E[结束]
  •  

在这里插入图片描述

2. 时序图 (Sequence Diagram)

时序图用于展示对象之间的交互,特别适合表达系统组件间的通信流程

基本语法
sequenceDiagram参与者A->>参与者B: 消息内容参与者B-->>参与者A: 返回内容
  •  
示例
sequenceDiagram用户->>+前端: 发起请求前端->>+后端API: 传递数据后端API->>+数据库: 查询数据数据库-->>-后端API: 返回结果后端API-->>-前端: 返回处理后的数据前端-->>-用户: 展示结果
  •  

在这里插入图片描述

3. 类图 (Class Diagram)

类图用于展示系统中的类以及它们之间的关系,是面向对象设计的重要工具。

基本语法
classDiagram类A <|-- 类B类A : +属性1类A : +方法1()
  •  
示例
classDiagramPerson <|-- StudentPerson <|-- TeacherPerson : +String namePerson : +int agePerson : +void talk()Student : +int studentIdStudent : +void study()Teacher : +String subjectTeacher : +void teach()
  •  

在这里插入图片描述

4. 状态图 (State Diagram)

状态图用于描述系统或对象在不同状态之间的转换

基本语法
stateDiagram-v2[*] --> 状态1状态1 --> 状态2: 触发条件状态2 --> [*]
示例
stateDiagram-v2[*] --> 待处理待处理 --> 处理中: 开始处理处理中 --> 已完成: 处理完毕处理中 --> 异常: 出现问题异常 --> 处理中: 解决问题已完成 --> [*]
  •  

在这里插入图片描述

5. 甘特图 (Gantt Chart)

甘特图用于项目管理,展示任务的开始、结束时间和持续时间

基本语法
gantttitle 项目名称dateFormat YYYY-MM-DDsection 阶段名任务名 :task-id, 开始日期, 持续时间
示例
gantttitle 网站开发项目计划dateFormat YYYY-MM-DDsection 规划阶段需求分析    :a1, 2023-06-01, 7d概要设计    :a2, after a1, 5dsection 开发阶段详细设计    :b1, after a2, 10d编码实现    :b2, after b1, 15dsection 测试阶段单元测试    :c1, after b2, 5d集成测试    :c2, after c1, 5d系统测试    :c3, after c2, 5dsection 部署阶段发布准备    :d1, after c3, 3d上线部署    :d2, after d1, 2d

在这里插入图片描述

6. 饼图 (Pie Chart)

饼图用于展示数据的比例关系

基本语法
pietitle 标题"分类1" : 数值1"分类2" : 数值2
示例
pietitle 项目资源分配"前端开发" : 35"后端开发" : 30"数据库" : 15"测试" : 10"部署运维" : 10

在这里插入图片描述

四、高级技巧

1. 样式定制

在流程图中,你可以通过以下方式自定义节点样式:

graph TDA[普通节点] --> B(圆角节点)B --> C{条件节点}C -->|是| D((圆形节点))C -->|否| E>标签节点]

在这里插入图片描述

2. 子图

使用subgraph创建子图,对相关节点进行分组:

graph TBsubgraph 子系统1A[组件A] --> B[组件B]endsubgraph 子系统2C[组件C] --> D[组件D]endB --> C

在这里插入图片描述

3. 注释和说明

在时序图中添加注释:

sequenceDiagramAlice->>Bob: 发送请求Note right of Bob: Bob思考中Bob-->>Alice: 发送响应

在这里插入图片描述

4.常见问题与解决方案
  1. 图表不显示:确保语法正确,特别是缩进和标点符号
  2. 布局混乱:尝试调整方向(TD/LR等)或减少节点数量
  3. 文本溢出:缩短节点文字或使用换行符<br/>
  4. 箭头样式错误:检查箭头语法,如-->-->>-.-> 等

五、实际应用场景

1.软件开发文档
graph LRsubgraph 前端层A[用户界面] --> B[业务逻辑]endsubgraph 服务层C[API网关] --> D[微服务1]C --> E[微服务2]endsubgraph 数据层F[主数据库] --> G[读库1]F --> H[读库2]endB --> CD --> FE --> F

在这里插入图片描述

2.业务流程分析
graph TDA[客户下单] --> B{库存检查}B -->|有库存| C[创建订单]B -->|无库存| D[通知缺货]C --> E[支付处理]E -->|支付成功| F[准备发货]E -->|支付失败| G[取消订单]F --> H[物流配送]H --> I[订单完成]

在这里插入图片描述

小结

通过DeepSeek结合Mermaid语法,我们可以轻松创建各种专业图表,提高工作效率和文档质量。无论是软件开发、项目管理还是系统设计,这种方式都能帮助我们更清晰地表达和理解复杂信息。

希望本文能对你有所帮助,让我们一起用Mermaid在DeepSeek中创建更多精美实用的图表!

参考资料 ▍

  • Mermaid官方文档:Mermaid | Diagramming and charting tool
  • Markdown与Mermaid结合使用指南

http://www.ppmy.cn/devtools/167406.html

相关文章

利用selenium调用豆包进行自动化问答以及信息提取

利用python 使用 selenium调用豆包进行自动化问答以及信息提取整理 使用方法&#xff1a; 打开网页之后有40秒等待时间 此时进行登录登录之后随便输入一个问题进行问答&#xff0c;进入对话界面自动执行对话测试 # -*- coding: utf-8 -*- from selenium import webdriver fro…

VisionPro中IPO工具详解

预处理工具的算法 图像增强 加减常量&#xff1a;通过为灰度图像中每个像素的灰度值添加正值或负值&#xff0c;使用图像变得更亮或更暗乘以常量&#xff1a;将图像的每个像素值乘以一个常数&#xff0c;可调整图像的亮度和对比度均衡&#xff1a;通过直方图均衡方法增强图像对…

拦截网页中的 Fetch 和 XMLHttpRequest 请求方式方法

拦截网页中的 Fetch 和 XMLHttpRequest 请求&#xff0c;并捕获它们的响应体内容。通过这种方式&#xff0c;你可以在控制台中查看这些请求的响应数据&#xff0c;或者进一步处理这些数据&#xff08;例如发送到后台或存储起来&#xff09;。 以下是代码的逐行解释&#xff1a…

MySQL 与 MongoDB 的区别

文章目录 前言一、如何选择二、索引总结 前言 在当今数据驱动的世界中&#xff0c;数据库技术扮演着至关重要的角色&#xff0c;它们为应用程序提供了存储、管理和检索数据的基础设施。MySQL 和 MongoDB 作为两种广泛使用的数据库管理系统&#xff0c;分别代表了关系型数据库&…

视频编码中视频帧的类型解析

在视频编码领域&#xff0c;视频帧类型的划分是理解视频压缩、传输以及播放机制的关键基础。视频本质上是由一系列连续的图像帧组成&#xff0c;通过快速播放这些帧&#xff0c;利用人眼的视觉暂留现象产生动态影像的效果。而不同类型的视频帧在编码过程中有着各自独特的作用和…

大数据-spark3.5安装部署之standalone模式

真实工作中还是要将应用提交到集群中去执行&#xff0c;Standalone模式就是使用Spark自身节点运行的集群模式&#xff0c;体现了经典的master-slave模式。集群共三台机器&#xff0c;具体如下 u22server4spark&#xff1a; master worker u22server4spark2&#xff1a; worke…

C++ 中的 RTTI(Run-Time Type Information,运行时类型识别)

我来为你详细讲解 C 中的 RTTI&#xff08;Run-Time Type Information&#xff0c;运行时类型识别&#xff09;&#xff0c;并结合你提供的参考内容进行分析和说明。 什么是 RTTI&#xff1f; RTTI 是 C 提供的一种机制&#xff0c;允许程序在运行时识别对象的类型信息。它主要…

富文本编辑器(Rich Text Editor,RTE)

富文本编辑器&#xff08;Rich Text Editor&#xff0c;RTE&#xff09;是现代Web应用中常见的工具&#xff0c;允许用户创建和编辑带有丰富格式的文本内容。为了更深入地理解富文本编辑器的工作原理和实现方式&#xff0c;我们可以结合代码进行分析。以下将从几个关键方面展开…