markdown绘图----Mermaid_markdown 美人鱼-CSDN博客

本文链接：https://blog.csdn.net/qq_23091073/article/details/108393727

前言

之前一直使用plantuml，Graphviz来绘图，这两个工具可以直接使用文本生成图形。但是在写markdown文档时，经常要先生成图片，再上传插入到文档中，有点麻烦。后来发现一个Typora和csdn都支持的工具mermaid。
mermaid(美人鱼), 是一个类似 Graphviz ，用文本语法来描述各种图(流程图、时序图、甘特图)的工具，可以在markdown文档中嵌入一段 mermaid 文本来生成 SVG 形式的图片。

官方文档:https://mermaid-js.github.io/mermaid/#/
在线工具:https://mermaidjs.github.io/mermaid-live-editor/

使用

mermaid最新版支持以下8种图，如果使用typora不能显示，需要更新最新版

1. 饼图

 pie
     title 请假类型
     "年假" : 42
     "事假" : 50
     "婚假" : 3
     "其他" :  5

2. 序列图

sequenceDiagram
	title: TCP三次握手
	客户端 ->> 服务器: 发送SYN=J
	note over  服务器: 收到客户端SYN信号
	服务器 ->> 客户端:返回SYN=K,ACK=J+1
	note over 客户端: 收到服务器信号
	客户端 ->> 服务器:回复ACK=K+1

3. 流程图

graph LR
   START([开始]) --> A[员工发起请假]
   A -->B{部门经理审批}
   B-->|同意|C{大于3天}
   B-->|拒绝|F[发送拒绝邮件通知]
   C -->|是|D{总经理审批}
   D -->|同意|G[同意邮件通知]
   D -->|拒绝|F
   C -->|否|G
   F -->END([结束])
   G-->END

4. 类图

 classDiagram
	Animal <|-- Duck
	Animal <|-- Fish
	Animal <|-- Zebra
	Animal : +int age
	Animal : +String gender
	Animal: +isMammal()
	Animal: +mate()
	class Duck{
		+String beakColor
		+swim()
		+quack()
	}
	class Fish{
		-int sizeInFeet
		-canEat()
	}
	class Zebra{
		+bool is_wild
		+run()
	 }

5. ER图

实体关系模型（或 ER 模型）描述了特定知识领域中感兴趣的相互关联的事物。基本 ER 模型由实体类型（对感兴趣的事物进行分类）组成，并指定实体之间可能存在的关系
在这里绘制ER图不支持中文

erDiagram
   user||--o{ order: place 
    order||--|{ product : contains
    user}|..|{ delivery-address : uses

Value (left)	Value (right)	含义
\|o	o\|	0或1
\|\|	\|\|	1
}o	o{	0或多
}\|	\|{	1或多

6. 甘特图

甘特图是一种条形图，最初由卡罗尔·阿达米茨基于1896年开发，1910年代由亨利·甘特独立开发，它说明了项目进度和完成任何项目所花的时间。甘特图说明了terminal元素 and summary元素的开始日期到完成日期之间的天数

 gantt
       dateFormat                YYYY-MM-DD
       title                     工作计划表
      
       section 实践课程
       项目设计				:done, des1, 2020-05-08, 2020-05-13
       问卷设计              :active,  des2, 2020-05-11, 3d
       试访            			: des3, after des1, 3d
       问卷确定             	: des4, 2020-05-15, 1d
		实地执行				: des5, 2020-05-16, 2020-05-26
		数据录入				: des6, after des5, 4d
		数据分析				: des7, after des6, 2020-06-03
		报告提交				: des8, after des7, 5d

7. 用户旅程图

用户旅程图以高度详细的方式描述不同用户在系统、应用程序或网站内完成特定任务所采取的步骤。此技术显示当前（原样）的用户工作流，并揭示未来工作流的改进区域

journey
	title 我的一天
	section 去工作
		泡茶: 5: 我
		上楼: 3: 我
		工作: 1: 我, 猫
	section 回家
		下楼: 5: 我
		坐下: 5: 我

8. 状态图

状态图是一种用于计算机科学和相关领域的图表，用于描述系统的行为。状态图要求描述的系统由有限数量的状态组成;有时，确实是这样，但在其他时候，是一个合理的抽象。
Mermaid 中状态图语法和plantuml一致,具体细节可以查看文档

  stateDiagram-v2
    state fork_state <<fork>>
      [*] --> fork_state
      fork_state --> State2
      fork_state --> State3

      state join_state <<join>>
      State2 --> join_state
      State3 --> join_state
      join_state --> State4
      State4 --> [*]