DeepSeek进阶应用（一）：结合Mermaid绘图（流程图、时序图、类图、状态图、甘特图、饼图）

devtools/2025/3/10 17:11:44/

🌟前言:
在软件开发、项目管理和系统设计等领域，图表是表达复杂信息的有效工具。随着AI助手如DeepSeek的普及，我们现在可以更轻松地创建各种专业图表。

名人说：博观而约取，厚积而薄发。——苏轼《稼说送张琥》
创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）

目录

    • 一、Mermaid简介
    • 二、DeepSeek与Mermaid结合的优势
    • 三、常见图表类型及实例
      • 1. 流程图 (Flowchart)
        • 基本语法
        • 示例
      • 2. 时序图 (Sequence Diagram)
        • 基本语法
        • 示例
      • 3. 类图 (Class Diagram)
        • 基本语法
        • 示例
      • 4. 状态图 (State Diagram)
        • 基本语法
        • 示例
      • 5. 甘特图 (Gantt Chart)
        • 基本语法
        • 示例
      • 6. 饼图 (Pie Chart)
        • 基本语法
        • 示例
    • 四、高级技巧
      • 1. 样式定制
      • 2. 子图
      • 3. 注释和说明
      • 4.常见问题与解决方案
    • 五、实际应用场景
      • 1.软件开发文档
      • 2.业务流程分析
    • 小结

很高兴你打开了这篇博客，更多好用的软件工具，请关注我、订阅专栏《实用软件与高效工具》，内容持续更新中…

思维速览：

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

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

DeepSeek官网： https://www.deepseek.com/

一、Mermaid简介

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

Mermaid官网：https://AID.html" title=mermaid>mermaid.js.org/

在这里插入图片描述

Mermaid在线编辑器：https://AID.html" title=mermaid>mermaid.live/edit

在这里插入图片描述

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

二、DeepSeek与Mermaid结合的优势

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

markdown中使用AID.html" title=mermaid>mermaid绘图，写好语句后要用：

```AID.html" title=mermaid>mermaid + ```包裹写好的语句，之后会显示渲染后的图的效果

例如：我让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官方文档：https://AID.html" title=mermaid>mermaid-js.github.io/AID.html" title=mermaid>mermaid/
  • Markdown与Mermaid结合使用指南

很感谢你能看到这里，如果你有哪些想学习的AI，欢迎在评论区分享！
创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）


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

相关文章

【技术干货】三大常见网络攻击类型详解：DDoS/XSS/中间人攻击，原理、危害及防御方案

【技术干货】三大常见网络攻击类型详解：DDoS/XSS/中间人攻击，原理、危害及防御方案

1. DDoS攻击 1.1 什么是DDoS攻击&#xff1f; DDoS&#xff08;Distributed Denial of Service&#xff0c;分布式拒绝服务攻击&#xff09;通过操控大量“僵尸设备”&#xff08;Botnet&#xff09;向目标服务器发送海量请求&#xff0c;耗尽服务器资源&#xff08;带宽、CPU…
阅读更多...
Spring Boot 项目中 Redis 常见问题及解决方案

Spring Boot 项目中 Redis 常见问题及解决方案

目录 缓存穿透缓存雪崩缓存击穿Redis 连接池耗尽Redis 序列化问题总结 1. 缓存穿透 问题描述 缓存穿透是指查询一个不存在的数据&#xff0c;由于缓存中没有该数据&#xff0c;请求会直接打到数据库上&#xff0c;导致数据库压力过大。 解决方案 缓存空值&#xff1a;即使…
阅读更多...
计算机视觉算法实战——老虎个体识别（主页有源码）

计算机视觉算法实战——老虎个体识别（主页有源码）

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​ ​​​ 1. 领域介绍 老虎个体识别是计算机视觉中的一个重要应用领域&#xff0c;旨在通过分析老虎的独特条纹图案&#xff0c;自动识别和区…
阅读更多...
基于Asp.net的零食购物商城网站

基于Asp.net的零食购物商城网站

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…
阅读更多...
Linux系统编程--线程同步

Linux系统编程--线程同步

目录 一、前言 二、线程饥饿 三、线程同步 四、条件变量 1、cond 2、条件变量的使用 五、条件变量与互斥锁 一、前言 上篇文章我们讲解了线程互斥的概念&#xff0c;为了防止多个线程同时访问一份临界资源而出问题&#xff0c;我们引入了线程互斥&#xff0c;线程互斥其实…
阅读更多...
16 HarmonyOS NEXT UVList组件开发指南(三)

16 HarmonyOS NEXT UVList组件开发指南(三)

温馨提示&#xff1a;本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦&#xff01; HarmonyOS NEXT UVList组件开发指南(三) 第三篇&#xff1a;UVList组件使用方法与实际应用 1. 基础使用方法 1.1 引入组件 使用UVList组件前&a…
阅读更多...
代码随想录第五十天| 图论理论基础

代码随想录第五十天| 图论理论基础

图论理论基础 这篇我们将正式开始学习图论&#xff01; 在代码随想录中&#xff0c;图论相关的算法题目将统一使用ACM模式。为什么要使用ACM模式呢&#xff1f; 图的基本概念 在二维坐标中&#xff0c;两点可以连成线&#xff0c;多个点连成的线就构成了图。 当然&#xff0…
阅读更多...
【数据可视化之点位分布图】用图标、颜色、大小讲好数据故事！

【数据可视化之点位分布图】用图标、颜色、大小讲好数据故事！

信息爆炸的时代&#xff0c;数据可视化的核心不再是简单的图表堆砌&#xff0c;而是如何用视觉语言讲好一个故事。点位分布图作为地理数据的“空间叙事者”&#xff0c;以直观的表达和丰富的视觉信息&#xff0c;成为城市规划、环境监测、交通管理、水利水务等领域的决策利器。…
阅读更多...
最新文章

Copyright @ 2022~2023