CSDN、markdown环境下如何插入各种图（流程图，时序图，甘特图）

news2025/2/19 6:33:36

流程图

横向流程图

```mermaid
graph LR
    A[方形] --> B{条件a}
    B -->|满足| C(圆角)
    B -->|不满足| D(圆角)
    C --> E[输出结果1]
    D --> E

效果图：

在这里插入图片描述

竖向流程图

```mermaid
graph TD
    C{条件a} --> |a=1| A[方形]
    C --> |a=2| F[竖向流程图]
    A --> B(圆角)
    B --> D[结果1]
    F --> E[结果2]

效果图：
在这里插入图片描述

完整流程图

```mermaid
flowchat
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框

st->cond
cond(yes)->sub1->op->io->e
cond(no)->op(right)->io->e

UML时序图

```mermaid
sequenceDiagram
Title: 标题：项目合作沟通
项目经理->>技术专家: 这个技术难题能解决吗?（请求）
Note right of 技术专家: 技术专家有丰富的行业经验
Note left of 项目经理: 项目经理负责项目整体推进
技术专家-->>项目经理: 可以解决(响应)
技术专家->>测试人员: 你那边测试环境准备好了吗
测试人员-->>项目经理: 技术专家问我测试环境情况了
项目经理->>技术专家: 确定能彻底解决吗？
Note over 测试人员,技术专家: 测试人员和技术专家协同工作
participant 产品经理
Note right of 产品经理: 产品经理等待各方消息推进产品规划

甘特图

```mermaid
gantt
dateFormat  YYYY-MM-DD
title 网站建设甘特图
section 规划
市场调研                      :done,    plan1, 2024-03-10,2024-03-12
目标确定                      :active,  plan2, 2024-03-13, 2d
架构规划                     :         plan3, after plan2, 4d
后续规划任务                     :         plan4, after plan3, 3d
section 搭建
知识储备与资料收集                      :crit, done, 2024-03-10,36h
架构搭建                             :crit, done, after plan2, 3d
代码编写                                 :crit, active, 4d
后续开发任务                              :crit, 6d
休息调整                                   :3d
section 检验
功能检验                              :active, check1, after plan3, 4d
性能检验                               :after check1  , 24h
检验报告                               : 60h