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

最新推荐文章于 2025-06-27 17:52:08 发布
最新推荐文章于 2025-06-27 17:52:08 发布
阅读量5.4k 收藏 46
点赞数 13
CC 4.0 BY-SA版权
分类专栏： Deepseek 文章标签： Deepseek
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzddada/article/details/146207202

思维速览：

本文将详细介绍如何利用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 TD
  A([开始]) --> B[输入用户名和密码]
  B --> C{格式验证}
  C -->|验证失败| D[提示格式错误]
  C -->|验证通过| E[请求登录接口]
  E --> F{登录结果}
  F -->|成功| G[跳转到主页]
  F -->|失败| H[提示密码错误]
  G --> I([结束])
  H --> B
  D --> B

  style A fill:#4CAF50,color:white
  style I fill:#4CAF50,color:white
  style D fill:#FF5722,color:white
  style H fill:#FF5722,color:white
  style G fill:#2196F3,color:white

对应的流程图渲染效果：

在这里插入图片描述

三、常见图表类型及实例

1. 流程图 (Flowchart)

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

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

方向可以是：

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

在这里插入图片描述

2. 时序图 (Sequence Diagram)

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

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

在这里插入图片描述

3. 类图 (Class Diagram)

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

基本语法
classDiagram
    类A <|-- 类B
    类A : +属性1
    类A : +方法1()
  •  
示例
classDiagram
    Person <|-- Student
    Person <|-- Teacher
    Person : +String name
    Person : +int age
    Person : +void talk()
    Student : +int studentId
    Student : +void study()
    Teacher : +String subject
    Teacher : +void teach()
  •  

在这里插入图片描述

4. 状态图 (State Diagram)

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

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

在这里插入图片描述

5. 甘特图 (Gantt Chart)

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

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

在这里插入图片描述

6. 饼图 (Pie Chart)

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

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

在这里插入图片描述

四、高级技巧

1. 样式定制

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

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

在这里插入图片描述

2. 子图

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

graph TB
    subgraph 子系统1
        A[组件A] --> B[组件B]
    end
    subgraph 子系统2
        C[组件C] --> D[组件D]
    end
    B --> C

在这里插入图片描述

3. 注释和说明

在时序图中添加注释：

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

在这里插入图片描述

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

五、实际应用场景

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

在这里插入图片描述

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

在这里插入图片描述

小结

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

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

▍参考资料 ▍

DeepSeek进阶应用（一）：结合Mermaid绘图（流程图、时序图、类图、状态图、甘特图、饼图）
Code_流苏：在代码中寻诗意，在实践中觅真知
03-09 5326
纯干货，DeepSeek结合Mermaid绘制各类图（流程图、时序图、类图、状态图、甘特图、饼图）
DeepSeek+Mermaid：轻松实现可视化图表自动化生成（附实战演练）
邓邓子的博客
04-23 2034
本文聚焦 DeepSeek 与 Mermaid 的深度融合与应用。详细介绍了 DeepSeek 作为大语言模型在多领域的应用，尤其在代码编写中，可实现代码生成、优化、多语言转换、错误调试及文档生成等功能，以 Python 数据分析场景为例，展现其高效辅助能力。同时深入解析 Mermaid 基于文本语法绘制流程图、时序图等多种图表的特性。重点阐述了两者结合实现可视化图表自动化生成的原理与实操方法，通过多场景实战案例，为开发者提供从技术原理到落地应用的全攻略，助力提升工作效率与技术创新能力。
DeepSeek 配合 Mermaid，自动生成甘特图
Python数据挖掘
03-03 1520
Mermaid的特点是简洁的语法和跨平台兼容性，让用户可以通过简单的文本描述来创建多种类型的图表，我们常见的，甘特图，流程图，正态分布图，甚至桑基图都是可以的。今天跟大家分享下我们如何使用DeepSeek与Mermaid来实现快速的生成图表，操作也非常的简单，只需要准备好自己的数据源即可，我们就以下面的数据为例来演示下如何生成甘特图。首先可以在下点上传附件，附件上传后，给出指令生成甘特图，并且以Mermaid的格式输出，这个格式非常的重要，生成完毕后，在右上角直接粘贴即可。三、Mermaid生成图表。
DeepSeek + Mermaid编辑器——常规绘图
pi_pi_lin的博客
02-19 9557
打开 Draw.io：https://draw.io/点击“创建新绘图”：随意输入一个文件名，选择“空白框图”—— 最后点“创建”：进来后，点“+”——“高级”——“Mermaid”：下面是生成的思维导图，右侧可以修改思维导图中的文字和样式：点击“文件”——“导出为”，就可以下载了。
Mermaid保姆级教程：文本秒变流程图/甘特图，开发文档效率翻倍
最新发布
xiami_world的博客
06-27 1371
本文将带你深入理解Mermaid的核心价值，并逐步解析其基础语法，助你快速实现“零代码”专业绘图。
markdown绘图插件----mermaid简介
weixin_33901641的博客
10-22 5740
作者：黄永刚 mermaid简介 当撰写文档的时候，对于流程图的生成大多使用Visio等繁重的工具，没有一种轻便的工具能够画图从而简化文档的编写，就像markdown那样。 mermaid解决这个痛点，这是一个类似markdown语法的脚本语言，通过JavaScript实现图表的生成。 先来看个例子: 1.流程图(fl...
deepseek + mermaid 自动绘制流程图
细节处有神明的博客
02-13 7192
Mermaid 是一种轻量级的图表标记语言，允许用户通过简单的文本语法定义各种类型的图表，包括流程图、序列图、甘特图等。graph TD;A[开始] --> B{决策};B --是--> C[执行任务];B --否--> D[结束];通过 DeepSeek 和 Mermaid 的配合使用，我们可以快速生成结构化流程图，并借助工具如 draw. Io 或 Obsidian Excalidraw 将其渲染为高质量的可视化图表。这种方法不仅提高了效率，还降低了手动绘制流程图的复杂性。
使用 DeepSeek 和 Mermaid 快速生成流程图等专业图
2501_90596733的博客
02-21 3630
DeepSeek 是一款强大的开源大语言模型，能够根据自然语言描述自动生成代码。我们可以利用它来快速生成 Mermaid 语法，从而减少手动编写的工作量。2. MermaidMermaid 是一种轻量级的图表标记语言，允许用户通过简单的文本语法定义各种类型的图表，包括流程图、序列图、甘特图等。它的语法简洁易用，支持跨平台兼容，并且能够动态更新图表，非常适合敏捷开发。通过 DeepSeek 和 Mermaid 的结合使用，我们可以快速生成结构化的流程图等专业图，大大提高了工作效率。
基于DeepSeek和Mermaid的多种专业图表绘制：提升文档质量和工作效率的实用指南
04-10
内容概要：本文详细介绍了如何利用DeepSeek结合Mermaid语法绘制各类专业图表，包括流程图、时序图、类图、状态图、甘特图和饼图。Mermaid是一种基于JavaScript的图表绘制工具，允许用户使用类似Markdown的文本语法...
IDE/Mermaid + VSCode + Deepseek 生成可视化流程图和UML图
river.qu
02-26 5234
Mermaid 是一个基于JavaScript的图表和图表工具，在大语言模型的加持下，其优势被加倍凸显出来。本文详细讲解了在 VSCode 平台安装和使用 Mermaid 的方式方法。并结合大语言模型如，DeepSeek、ChatGPT 的使用，粗浅地探讨了 Mermaid 在可视化生成过程中，尤其是在软件设计和开发过程中的重要作用。
Markdown 使用技巧之利用 Mermaid 进行绘制流程图
独泪了无痕
05-30 4802
Markdown 的原生语法不支持绘制图形，但通过 Mermaid 扩展，我们可以将一些格式化的文字渲染成我们需要的图形。Mermaid 是一个类似 Markdown 的开源脚步语言，它能够根据输入的语句自动生成合适的图像，方便于 Markdown 文档撰写者通过文本方式生成图形的扩展工具。相比 Visio 它要轻很多，几行文字便可生成一幅完整且美观的流程图。
Mermaid画图教程（一）
weixin_44360592的博客
11-06 9162
文章目录References流程图-Flowchart流程图方向图形形状及连接方式自定义风格使用关键字style声明成一个类多次使用/子图绑定事件饼图-pie顺序图-sequenceDiagram类图-class diagrams类之间的关系类注释状态图-State diagrams一个例子看所有并发实体关系图用户旅程图甘特图 References mermiad画图例子 流程图-Flowchart语法说明 顺序图-Sequence diagrams语法说明 类图-Class diagrams语法说明 状态
Mermaid画流程图、序列图、饼图、甘特图(实例讲解)
ixiaoyang的专栏
10-22 5259
本文将介绍如何学习使用Mermaid画图。传统的可视化绘图工具，每次使用都要以图片的形式进行编辑，不便于微调，在不同应用之间切换也比较麻烦。Mermaid语法简单，改动较小，绘图更高效，更适合程序员使用。下面使用实例展示一下流程图、序列图、饼图、甘特图的绘图过程。
Deepseek 快速生成流程图的三种方法:附详细步骤
热门推荐
m0_61361390的博客
02-17 3万+
deepseek 快速生成流程图
DeepSeek+Mermaid：AI时代流程图绘制的终极搭档，3分钟搞定复杂逻辑！
EnjoyEDU的博客
04-11 1722
DeepSeek与Mermaid的结合，标志着流程图绘制从「手工劳动」迈入「智能生成」时代。无论是技术文档、项目管理还是业务流程设计，这对黄金搭档都能帮你快速实现逻辑可视化。立即尝试，体验AI带来的效率跃迁！
Mermaid使用教程（绘制各种图）
江月的博客
01-19 1万+
接下来，做一个小小的总结：我们讨论了使用 Mermaid 来生成不同类型的图表。Mermaid 是一个 JavaScript 库，它允许用户使用 Markdown 语法来创建和渲染流程图、序列图、甘特图和 Git 提交历史图等。流程图：使用graph关键字来定义流程图，并通过箭头 (-->) 来表示流程中的步骤和它们之间的关系。序列图：也使用graph关键字，但通常指定方向（如LR表示从左到右）。序列图用于显示对象之间的交互，箭头表示消息传递。甘特图。
Deepseek+Mermaid 打造图表的高效组合
SAYF001的博客
03-31 1491
Deepseek+Mermaid 打造图表的高效组合
deepseek+mermaid【自动生成流程图】
2301_76682353的博客
03-01 8986
一般就是缺少双引号“”，也可以再丢给deepseek，让她给你加上再。丢给deepseek代码，或题目要求。注意若未生成，可能是代码存在错误。生成mermaid代码。
Mermaid绘制UML图教程
踏雨歌青春，诗酒趁年华
02-14 6880
本文介绍如何使用Mermaid绘制UML图。Mermaid是一款简单而强大的图形描述语言，通过简单的文本语法，用户可以绘制各种类型的图表。它适用于各种场景，包括流程图、时序图、甘特图等。使用Mermaid，你可以更轻松地表达和分享你的图形设计。
Mermaid的正确语法是怎么样的
02-26
<think>嗯，用户问的是Mermaid的正确语法，我需要先回忆一下Mermaid的基本结构和常用图表类型的语法。首先，Mermaid是一个基于Markdown的图表生成工具，支持多种图表类型，比如流程图、时序图、类图、状态图、甘特图等。用户可能想知道如何正确编写这些图表的代码，或者常见的语法规则。 接下来，我需要确定用户的具体需求。他们可能是在学习使用Mermaid，或者在做文档时需要快速查阅语法。用户提到“正确语法”，可能之前遇到了错误，需要纠正，或者想确保自己写的是正确的。另外，用户可能希望得到一些示例，帮助他们理解不同图表的写法。 我应该先介绍Mermaid的基本结构，比如使用```mermaid代码块包裹，然后分图表类型举例说明。比如流程图、时序图、甘特图这些比较常用的类型。每个例子给出代码和说明，这样用户可以直接复制使用。同时，需要注意中文的说明，确保用户能理解每个部分的作用。 可能还需要提到一些常见的问题，比如缩进、箭头类型、节点的命名规则，以及如何避免语法错误。例如，在流程图中，节点ID和显示文本的关系，箭头后的方向符号。在时序图中，参与者的顺序和消息的传递方式。此外，不同图表类型之间的语法差异，比如类图使用classDef定义样式，而甘特图使用section等。 用户可能还关心如何在线测试Mermaid语法，推荐官方编辑器或支持Mermaid的Markdown工具，比如Typora、VS Code插件等。这样可以让他们实际尝试，查看生成效果。 最后，总结一下，确保涵盖主要图表类型和基本语法结构，给出足够的示例和注意事项，帮助用户快速上手并避免常见错误。需要保持回答的结构清晰，分点说明，便于用户理解和查阅。</think>Mermaid 是一个基于文本的图表生成工具，通过简单的语法可以快速绘制流程图、时序图、甘特图等。以下是常见图表类型的语法示例和关键规则： --- ### **1. 基础结构** 所有 Mermaid 图表需包裹在代码块中，标记语言类型为 `mermaid`： ````markdown ```mermaid [图表类型定义] [具体语法] ``` ```` --- ### **2. 常用图表语法** #### **流程图 (Flowchart)** ```mermaid graph TD A[开始] --> B{条件判断} B -->|是| C[执行操作] B -->|否| D[结束] C --> D ``` **语法规则**： - `graph TD` 定义纵向流程图，`graph LR` 为横向 - 节点：`A[文本]`（方框）、`B{文本}`（菱形条件）、`C(文本)`（圆角框） - 箭头：`-->`（直线箭头）、`-- 文本 -->`（带描述的箭头） --- #### **时序图 (Sequence Diagram)** ```mermaid sequenceDiagram participant 用户 participant 系统 用户->>系统: 发送请求 系统-->>用户: 返回响应 ``` **语法规则**： - `participant` 定义参与者 - `->>` 实线箭头，`-->>` 虚线箭头，`->x` 表示异步消息 --- #### **甘特图 (Gantt Chart)** ```mermaid gantt title 项目计划 section 阶段A 任务1 :a1, 2023-10-01, 7d 任务2 :after a1, 3d section 阶段B 任务3 :2023-10-11, 5d ``` **语法规则**： - `section` 定义任务分组 - 任务格式：`任务名 :id, 开始时间, 持续时间` --- #### **类图 (Class Diagram)** ```mermaid classDiagram class 用户 { +String name +void login() } 用户 <|-- 管理员 : 继承 ``` **语法规则**： - `+` 表示 public，`-` 表示 private - 关系符号：`<|--`（继承），`*--`（组合），`-->`（关联） --- ### **3. 通用规则** 1. **缩进**：部分图表（如甘特图）依赖缩进表示层级 2. **注释**：用 `%%` 添加注释（不会渲染） 3. **样式自定义**：支持通过 `style` 修改颜色、边框等 ```mermaid graph LR A[红色节点] --> B style A fill:#f00,color:white ``` --- ### **4. 在线测试工具** - 官方体验：https://mermaid.live/ - VS Code 插件：安装 `Mermaid Markdown Syntax Highlighting` 可直接预览 如果需要更具体的图表类型（如状态图、饼图等），可以进一步说明！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值