Markdown中Mermaid绘图指南绘制图表的工具非常多这里简单介绍下markdown如何通过Mermaid绘图插件来绘制图表。Mermaid是一款基于javascript的图表绘制工具几乎所有支持Markdown语法的编辑器都支持mermaid无需三方渲染插件仅用简单文本语法就能生成流程图饼图时序图等专业图表。核心语法结构# 代码块语言mermaid# 图表类型pie,或者flowchart,或者sequenceDiagram,必填图表类型 布局可选如flowchart LR表示横向布局 节点1[节点内容]关系符号 节点2[节点内容]节点2[节点内容]关系符号 节点3[节点内容]# 可继续添加更多节点与关系关键说明代码块语言必须选择「mermaid」这是CSDN渲染Mermaid的核心前提选择其他语言如markdown、python会直接导致渲染失败图表类型为必填项不同图表的类型关键词不同后续会详细讲解节点内容需用「\」包裹关系符号需符合对应图表的语法规范不可随意编写节点与关系前建议用4个空格或1个Tab缩进避免语法错乱提升代码可读性。CSDN适配注意事项#禁止使用中文符号所有符号引号、逗号、冒号、括号必须使用英文符号中文引号「#34;#34;」、中文逗号「」会直接导致渲染失败#避免多余空行图表内容中节点与节点之间可留1个空行但不可留多个连续空行否则会导致图表显示错乱#不依赖外部依赖CSDN已内置最新版Mermaid渲染引擎无需手动引入任何脚本、样式复制代码后直接保存即可渲染#标题格式规范图表标题需紧跟图表类型格式为「图表类型 title 标题内容」不可单独一行写标题如pie title 市场份额不可拆分两行。语法速查语法类型语法格式说明节点A[内容][]矩形节点A(内容)()圆角矩形A{内容}{}菱形判断节点流程图关系符号A -- B实线箭头—无箭头实线-.-虚线箭头粗线箭头– 文本 --带文本连接文本两边有空格—|文本|带文本连接–o末端圆形–x末端打叉–双向箭头o–o双向圆形x–x双向打叉-发送消息–返回消息时序图关系符号A–B虚线无箭头A-B实线无箭头A-B实线有箭头A-B:文本实线有箭头带文本Note left/right of A:文本A左侧/右侧悬浮文本流程图布局LR横向-默认横向TD纵向布局标题图表类型 title 标题内容pie title 饼图标题饼图内容“分类名称”:数值“香蕉”:20无需加%饼图pie title 饼图示例香蕉:20苹果:40橘子:4040%40%20%饼图示例香蕉苹果橘子流程图flowchart LR 开始(开始)--进入厨房 进入厨房--准备食材--起锅烧火 起锅烧火--水开{水开}水开--是--烧菜 水开--否--继续等准备食材是否开始进入厨房起锅烧火水开烧菜继续等时序图sequenceDiagram 浏览器-服务器:第一次登录 服务器-浏览器:返回SessionID Note left of 浏览器:存储到本地浏览器(4KB)浏览器-服务器:第二次登录SessionID 服务器-数据库:查询session库 Note right of 数据库:验证合法性 数据库--服务器:返回sessionID 服务器-浏览器:返回登录结果 Note left of 浏览器:根据结果跳转数据库服务器浏览器数据库服务器浏览器存储到本地浏览器(4KB)验证合法性根据结果跳转第一次登录返回SessionID第二次登录SessionID查询session库返回sessionID返回登录结果