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

流程图

横向流程图

c 复制代码

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

效果图：

竖向流程图

c 复制代码

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

效果图：

完整流程图

c 复制代码

```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

Created with Raphaël 2.3.0 开始框判断框(是或否?) 子流程处理框输入输出框结束框 yes no

UML时序图

c 复制代码

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

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

甘特图

c 复制代码

```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

2024-03-11 2024-03-13 2024-03-15 2024-03-17 2024-03-19 2024-03-21 2024-03-23 2024-03-25 2024-03-27 2024-03-29 2024-03-31 市场调研知识储备与资料收集目标确定架构规划架构搭建代码编写后续规划任务功能检验后续开发任务性能检验检验报告休息调整规划搭建检验网站建设甘特图