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

🌟前言:
在软件开发、项目管理和系统设计等领域，图表是表达复杂信息的有效工具。随着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://mermaid.js.org/

在这里插入图片描述

Mermaid在线编辑器：https://mermaid.live/edit

在这里插入图片描述

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

二、DeepSeek与Mermaid结合的优势

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

markdown中使用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://mermaid-js.github.io/mermaid/
  • Markdown与Mermaid结合使用指南

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/31117.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

海康线扫相机平场矫正教程

海康线扫相机平场矫正教程

0、平场矫正前的准备确认 1、白纸准备 确保视野中有一张平整且无折痕的白纸&#xff0c;使其完全铺满相机的整个视野。 2、行高设置 将行高参数设定为 2048。 3、灰度值控制 相机端图像的灰度值应维持在 120 - 180 这个区间内。同时&#xff0c;最亮像素点与最暗像素点的灰度…
阅读更多...
数智读书笔记系列015 探索思维黑箱：《心智社会：从细胞到人工智能，人类思维的优雅解读》读书笔记

数智读书笔记系列015 探索思维黑箱：《心智社会：从细胞到人工智能，人类思维的优雅解读》读书笔记

引言 《The Society of Mind》&#xff08;《心智社会》&#xff09;的作者马文・明斯基&#xff08;Marvin Minsky&#xff09;&#xff0c;是人工智能领域的先驱和奠基者之一 &#xff0c;1969 年获得图灵奖&#xff0c;被广泛认为是对人工智能领域影响最大的科学家之一。他…
阅读更多...
游戏引擎学习第148天

游戏引擎学习第148天

回顾并规划今天的工作 没有使用引擎&#xff0c;也没有任何库支持&#xff0c;只有我们自己&#xff0c;编写游戏的所有代码&#xff0c;不仅仅是小小的部分&#xff0c;而是从头到尾。现在&#xff0c;我们正处于一个我一直想做的任务中&#xff0c;虽然一切都需要按部就班&a…
阅读更多...
bug-Ant中a-select的placeholder不生效（绑定默认值为undefined）

bug-Ant中a-select的placeholder不生效（绑定默认值为undefined）

1.问题 Ant中使用a-select下拉框时&#xff0c;placeholder设置输入框显示默认值提示&#xff0c;vue2ant null与undefined在js中明确的区别&#xff1a; null&#xff1a;一个值被定义&#xff0c;定义为“空值” undefined&#xff1a;根本不存在定义 2.解决 2.1 a-select使…
阅读更多...
DeepSeek教我写词典爬虫获取单词的音标和拼写

DeepSeek教我写词典爬虫获取单词的音标和拼写

Python在爬虫领域展现出了卓越的功能性&#xff0c;不仅能够高效地抓取目标数据&#xff0c;还能便捷地将数据存储至本地。在众多Python爬虫应用中&#xff0c;词典数据的爬取尤为常见。接下来&#xff0c;我们将以dict.cn为例&#xff0c;详细演示如何编写一个用于爬取词典数据…
阅读更多...
springboot-自定义注解

springboot-自定义注解

1.注解的概念 注解是一种能被添加到java代码中的【元数据&#xff0c;类、方法、变量、参数和包】都可以用注解来修饰。用来定义一个类、属性或一些方法&#xff0c;以便程序能被捕译处理。 相当于一个说明文件&#xff0c;告诉应用程序某个被注解的类或属性是什么&#xff0c…
阅读更多...
低代码开发直聘管理系统

低代码开发直聘管理系统

低代码 DeepSeek 组合的方式开发直聘管理系统&#xff0c;兼职是开挂的存在。整个管理后台系统 小程序端接口的输出&#xff0c;只花了两个星期不到。 一、技术栈 后端&#xff1a;SpringBoot mybatis MySQL Redis 前端&#xff1a;Vue elementui 二、整体效果 三、表结…
阅读更多...
【面试】Kafka

【面试】Kafka

Kafka 1、为什么要使用 kafka2、Kafka 的架构是怎么样的3、什么是 Kafka 的重平衡机制4、Kafka 几种选举过程5、Kafka 高水位了解过吗6、Kafka 如何保证消息不丢失7、Kafka 如何保证消息不重复消费8、Kafka 为什么这么快 1、为什么要使用 kafka 1. 解耦&#xff1a;在一个复杂…
阅读更多...
文件操作详解（万字长文）

文件操作详解（万字长文）

C语言文件操作 一、为什么使用文件&#xff1f;二、文件分类三、文件的打开和关闭四、文件的顺序读写4.1fputc4.2fgetc4.3fputs4.4fgets4.5 fprintf4.6 fscanf4.7 fwrite4.8 fread 五、文件的随机读写5.1 fseek5.2 ftell和rewind六、文件读取结束的判定七、文件缓冲区 一、为什…
阅读更多...
突破极限！蓝耘通义万相2.1引爆AI多模态新纪元——性能与应用全方位革新

突破极限！蓝耘通义万相2.1引爆AI多模态新纪元——性能与应用全方位革新

云边有个稻草人-CSDN博客 目录 一、 引言 二、 蓝耘通义万相2.1版本概述 三、 蓝耘通义万相2.1的核心技术改进 【多模态数据处理】 【语音识别与文本转化】 【自然语言处理&#xff08;NLP&#xff09;改进】 【跨平台兼容性】 四、 蓝耘注册 部署流程—新手也能轻松…
阅读更多...
力扣-股票买入问题

力扣-股票买入问题

dp dp元素代表最大利润 f[j][1] 代表第 j 次交易后持有股票的最大利润。在初始状态&#xff0c;持有股票意味着你花钱买入了股票&#xff0c;此时的利润应该是负数&#xff08;扣除了买入股票的成本&#xff09;&#xff0c;而不是 0。所以&#xff0c;把 f[j][1] 初始化为负…
阅读更多...
ubuntu22.04本地部署OpenWebUI

ubuntu22.04本地部署OpenWebUI

一、简介 Open WebUI 是一个可扩展、功能丰富且用户友好的自托管 AI 平台&#xff0c;旨在完全离线运行。它支持各种 LLM 运行器&#xff0c;如 Ollama 和 OpenAI 兼容的 API&#xff0c;并内置了 RAG 推理引擎&#xff0c;使其成为强大的 AI 部署解决方案。 二、安装 方法 …
阅读更多...
Unity开发——CanvasGroup组件介绍和应用

Unity开发——CanvasGroup组件介绍和应用

CanvasGroup是Unity中用于控制UI的透明度、交互性和渲染顺序的组件。 一、常用属性的解释 1、alpha&#xff1a;控制UI的透明度 类型&#xff1a;float&#xff0c;0.0 ~1.0&#xff0c; 其中 0.0 完全透明&#xff0c;1.0 完全不透明。 通过调整alpha值可以实现UI的淡入淡…
阅读更多...
LVGL直接解码png图片的方法

LVGL直接解码png图片的方法

通过把png文件解码为.C文件&#xff0c;再放到工程中的供使用&#xff0c;这种方式随时速度快&#xff08;应为已经解码&#xff0c;代码中只要直接加载图片数据显示出来即可&#xff09;&#xff0c;但是不够灵活&#xff0c;适用于哪些简单又不经常需要更换UI的场景下使用。如…
阅读更多...
【算法day5】最长回文子串——马拉车算法

【算法day5】最长回文子串——马拉车算法

最长回文子串 给你一个字符串 s&#xff0c;找到 s 中最长的 回文 子串。 https://leetcode.cn/problems/longest-palindromic-substring/description/ 算法思路&#xff1a; class Solution { public:string longestPalindrome(string s) {int s_len s.size();string tmp …
阅读更多...
JavaWeb-HttpServletRequest请求域接口

JavaWeb-HttpServletRequest请求域接口

文章目录 HttpServletRequest请求域接口HttpServletRequest请求域接口简介关于请求域和应用域的区别 请求域接口中的相关方法获取前端请求参数(getParameter系列方法)存储请求域名参数(Attribute系列方法)获取客户端的相关地址信息获取项目的根路径 关于转发和重定向的细致剖析…
阅读更多...
Dify 本地部署教程

Dify 本地部署教程

目录 一、下载安装包 二、修改配置 三、启动容器 四、访问 Dify 五、总结 本篇文章主要记录 Dify 本地部署过程，有问题欢迎交流~ 一、下载安装包 从 Github 仓库下载最新稳定版软件包，点击下载~，当然也可以克隆仓库或者从仓库里直接下载zip源码包。 目前最新版本是V…
阅读更多...
css错峰布局/瀑布流样式（类似于快手样式）

css错峰布局/瀑布流样式（类似于快手样式）

当样式一侧比较高的时候会自动换行&#xff0c;尽量保持高度大概一致&#xff0c; 例&#xff1a; 一侧元素为5&#xff0c;另一侧元素为6 当为5的一侧过于高的时候&#xff0c;可能会变为4/7分部dom节点 如果不需要这样的话删除样式 flex-flow:column wrap; 设置父级dom样…
阅读更多...
Docker入门篇1：搜索镜像、拉取镜像、查看本地镜像列表、删除本地镜像

Docker入门篇1：搜索镜像、拉取镜像、查看本地镜像列表、删除本地镜像

大家好我是木木&#xff0c;在当今快速发展的云计算与云原生时代&#xff0c;容器化技术蓬勃兴起&#xff0c;Docker 作为实现容器化的主流工具之一&#xff0c;为开发者和运维人员带来了极大的便捷 。下面我们一起开始入门第一篇&#xff1a;搜索镜像、拉取镜像、查看本地镜像…
阅读更多...
利用pdf.js+百度翻译实现PDF翻译，创建中文PDF

利用pdf.js+百度翻译实现PDF翻译，创建中文PDF

基于JavaScript的PDF文档解析与智能翻译系统开发实践 一、功能预览 1.1 PDF加载 1.2 PDF翻译 二、系统架构设计 2.1 PDF智能翻译系统架构设计 层级模块名称功能描述技术实现呈现层Canvas渲染器PDF文档可视化渲染PDF.js + 动态视口计算 + 矩阵变换
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023