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

流程图 横向流程图 ```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 Created with Raphaël 2.3.0 开始框 判断框(是或否?) 子流程 处理框 输入输出框 结束框 yes no UML时序图 ```mermaid sequenceDiagram Title: 标题：项目合作沟通 项目经理->>技术专家: 这个技术难题能解决吗?（请求） Note right of 技术专家: 技术专家有丰富的行业经验 Note left of 项目经理: 项目经理负责项目整体推进 技术专家-->>项目经理: 可以解决(响应) 技术专家->>测试人员: 你那边测试环境准备好了吗 测试人员-->>项目经理: 技术专家问我测试环境情况了 项目经理->>技术专家: 确定能彻底解决吗？ Note over 测试人员,技术专家: 测试人员和技术专家协同工作 participant 产品经理 Note right of 产品经理: 产品经理等待各方消息推进产品规划 #mermaid-svg-fM8xj0MqjNFdHcQc {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-fM8xj0MqjNFdHcQc .error-icon{fill:#552222;}#mermaid-svg-fM8xj0MqjNFdHcQc .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-fM8xj0MqjNFdHcQc .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-fM8xj0MqjNFdHcQc .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-fM8xj0MqjNFdHcQc .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-fM8xj0MqjNFdHcQc .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-fM8xj0MqjNFdHcQc .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-fM8xj0MqjNFdHcQc .marker{fill:#333333;stroke:#333333;}#mermaid-svg-fM8xj0MqjNFdHcQc .marker.cross{stroke:#333333;}#mermaid-svg-fM8xj0MqjNFdHcQc svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-fM8xj0MqjNFdHcQc .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-fM8xj0MqjNFdHcQc text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-fM8xj0MqjNFdHcQc .actor-line{stroke:grey;}#mermaid-svg-fM8xj0MqjNFdHcQc .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-fM8xj0MqjNFdHcQc .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-fM8xj0MqjNFdHcQc #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-fM8xj0MqjNFdHcQc .sequenceNumber{fill:white;}#mermaid-svg-fM8xj0MqjNFdHcQc #sequencenumber{fill:#333;}#mermaid-svg-fM8xj0MqjNFdHcQc #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-fM8xj0MqjNFdHcQc .messageText{fill:#333;stroke:#333;}#mermaid-svg-fM8xj0MqjNFdHcQc .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-fM8xj0MqjNFdHcQc .labelText,#mermaid-svg-fM8xj0MqjNFdHcQc .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-fM8xj0MqjNFdHcQc .loopText,#mermaid-svg-fM8xj0MqjNFdHcQc .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-fM8xj0MqjNFdHcQc .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-fM8xj0MqjNFdHcQc .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-fM8xj0MqjNFdHcQc .noteText,#mermaid-svg-fM8xj0MqjNFdHcQc .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-fM8xj0MqjNFdHcQc .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-fM8xj0MqjNFdHcQc .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-fM8xj0MqjNFdHcQc .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-fM8xj0MqjNFdHcQc .actorPopupMenu{position:absolute;}#mermaid-svg-fM8xj0MqjNFdHcQc .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-fM8xj0MqjNFdHcQc .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-fM8xj0MqjNFdHcQc .actor-man circle,#mermaid-svg-fM8xj0MqjNFdHcQc line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-fM8xj0MqjNFdHcQc :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 项目经理 技术专家 测试人员 产品经理 这个技术难题能解决吗?（请求） 技术专家有丰富的行业经验 项目经理负责项目整体推进 可以解决(响应) 你那边测试环境准备好了吗 技术专家问我测试环境情况了 确定能彻底解决吗？ 测试人员和技术专家协同工作 产品经理等待各方消息推进产品规划 项目经理 技术专家 测试人员 产品经理 标题：项目合作沟通 甘特图 ```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 #mermaid-svg-DsGbbHGfVh5pgrm9 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-DsGbbHGfVh5pgrm9 .error-icon{fill:#552222;}#mermaid-svg-DsGbbHGfVh5pgrm9 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-DsGbbHGfVh5pgrm9 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-DsGbbHGfVh5pgrm9 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-DsGbbHGfVh5pgrm9 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-DsGbbHGfVh5pgrm9 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-DsGbbHGfVh5pgrm9 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-DsGbbHGfVh5pgrm9 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-DsGbbHGfVh5pgrm9 .marker.cross{stroke:#333333;}#mermaid-svg-DsGbbHGfVh5pgrm9 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-DsGbbHGfVh5pgrm9 .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-DsGbbHGfVh5pgrm9 .exclude-range{fill:#eeeeee;}#mermaid-svg-DsGbbHGfVh5pgrm9 .section{stroke:none;opacity:0.2;}#mermaid-svg-DsGbbHGfVh5pgrm9 .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-DsGbbHGfVh5pgrm9 .section2{fill:#fff400;}#mermaid-svg-DsGbbHGfVh5pgrm9 .section1,#mermaid-svg-DsGbbHGfVh5pgrm9 .section3{fill:white;opacity:0.2;}#mermaid-svg-DsGbbHGfVh5pgrm9 .sectionTitle0{fill:#333;}#mermaid-svg-DsGbbHGfVh5pgrm9 .sectionTitle1{fill:#333;}#mermaid-svg-DsGbbHGfVh5pgrm9 .sectionTitle2{fill:#333;}#mermaid-svg-DsGbbHGfVh5pgrm9 .sectionTitle3{fill:#333;}#mermaid-svg-DsGbbHGfVh5pgrm9 .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-DsGbbHGfVh5pgrm9 .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-DsGbbHGfVh5pgrm9 .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-DsGbbHGfVh5pgrm9 .grid path{stroke-width:0;}#mermaid-svg-DsGbbHGfVh5pgrm9 .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-DsGbbHGfVh5pgrm9 .task{stroke-width:2;}#mermaid-svg-DsGbbHGfVh5pgrm9 .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-DsGbbHGfVh5pgrm9 .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-DsGbbHGfVh5pgrm9 .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-DsGbbHGfVh5pgrm9 .task.clickable{cursor:pointer;}#mermaid-svg-DsGbbHGfVh5pgrm9 .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-DsGbbHGfVh5pgrm9 .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-DsGbbHGfVh5pgrm9 .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-DsGbbHGfVh5pgrm9 .taskText0,#mermaid-svg-DsGbbHGfVh5pgrm9 .taskText1,#mermaid-svg-DsGbbHGfVh5pgrm9 .taskText2,#mermaid-svg-DsGbbHGfVh5pgrm9 .taskText3{fill:white;}#mermaid-svg-DsGbbHGfVh5pgrm9 .task0,#mermaid-svg-DsGbbHGfVh5pgrm9 .task1,#mermaid-svg-DsGbbHGfVh5pgrm9 .task2,#mermaid-svg-DsGbbHGfVh5pgrm9 .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-DsGbbHGfVh5pgrm9 .taskTextOutside0,#mermaid-svg-DsGbbHGfVh5pgrm9 .taskTextOutside2{fill:black;}#mermaid-svg-DsGbbHGfVh5pgrm9 .taskTextOutside1,#mermaid-svg-DsGbbHGfVh5pgrm9 .taskTextOutside3{fill:black;}#mermaid-svg-DsGbbHGfVh5pgrm9 .active0,#mermaid-svg-DsGbbHGfVh5pgrm9 .active1,#mermaid-svg-DsGbbHGfVh5pgrm9 .active2,#mermaid-svg-DsGbbHGfVh5pgrm9 .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-DsGbbHGfVh5pgrm9 .activeText0,#mermaid-svg-DsGbbHGfVh5pgrm9 .activeText1,#mermaid-svg-DsGbbHGfVh5pgrm9 .activeText2,#mermaid-svg-DsGbbHGfVh5pgrm9 .activeText3{fill:black!important;}#mermaid-svg-DsGbbHGfVh5pgrm9 .done0,#mermaid-svg-DsGbbHGfVh5pgrm9 .done1,#mermaid-svg-DsGbbHGfVh5pgrm9 .done2,#mermaid-svg-DsGbbHGfVh5pgrm9 .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-DsGbbHGfVh5pgrm9 .doneText0,#mermaid-svg-DsGbbHGfVh5pgrm9 .doneText1,#mermaid-svg-DsGbbHGfVh5pgrm9 .doneText2,#mermaid-svg-DsGbbHGfVh5pgrm9 .doneText3{fill:black!important;}#mermaid-svg-DsGbbHGfVh5pgrm9 .crit0,#mermaid-svg-DsGbbHGfVh5pgrm9 .crit1,#mermaid-svg-DsGbbHGfVh5pgrm9 .crit2,#mermaid-svg-DsGbbHGfVh5pgrm9 .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-DsGbbHGfVh5pgrm9 .activeCrit0,#mermaid-svg-DsGbbHGfVh5pgrm9 .activeCrit1,#mermaid-svg-DsGbbHGfVh5pgrm9 .activeCrit2,#mermaid-svg-DsGbbHGfVh5pgrm9 .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-DsGbbHGfVh5pgrm9 .doneCrit0,#mermaid-svg-DsGbbHGfVh5pgrm9 .doneCrit1,#mermaid-svg-DsGbbHGfVh5pgrm9 .doneCrit2,#mermaid-svg-DsGbbHGfVh5pgrm9 .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-DsGbbHGfVh5pgrm9 .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-DsGbbHGfVh5pgrm9 .milestoneText{font-style:italic;}#mermaid-svg-DsGbbHGfVh5pgrm9 .doneCritText0,#mermaid-svg-DsGbbHGfVh5pgrm9 .doneCritText1,#mermaid-svg-DsGbbHGfVh5pgrm9 .doneCritText2,#mermaid-svg-DsGbbHGfVh5pgrm9 .doneCritText3{fill:black!important;}#mermaid-svg-DsGbbHGfVh5pgrm9 .activeCritText0,#mermaid-svg-DsGbbHGfVh5pgrm9 .activeCritText1,#mermaid-svg-DsGbbHGfVh5pgrm9 .activeCritText2,#mermaid-svg-DsGbbHGfVh5pgrm9 .activeCritText3{fill:black!important;}#mermaid-svg-DsGbbHGfVh5pgrm9 .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-DsGbbHGfVh5pgrm9 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 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 市场调研 知识储备与资料收集 目标确定 架构规划 架构搭建 代码编写 后续规划任务 功能检验 后续开发任务 性能检验 检验报告 休息调整 规划 搭建 检验 网站建设甘特图