前言

日常工作中，常常需要画各种图表，利用专业的画图的工具如 Visio 等当然能画出我们想要的图表。但是我们只是想要简单的图表时，也可以通过借助 Markdown 相关语法实现，大大提高效率。

时序图（Sequence Diagrams）

村雨 -> 村雨遥: 你好, 村雨遥！
Note right of 村雨遥: 思考！
村雨遥 --> 村雨: 你好，村雨，很高兴与你合作！

img

流程图（Flowcharts）

img

img

Mermaid 图

准备知识

节点图形

格式 形状
id[text] 矩形
id(text) 圆角矩形
id((text)) 圆形
id>text] 向右旗帜状
id{text} 菱形

连接线

格式 效果
A-->B 实线，箭头，无文字
A---B 实线，无箭头，无文字
A--文字---B 实线，无箭头，文字
A--文字-->B 实线，箭头，文字
A-.->B 虚线，箭头，无文字
A-.文字.->B 虚线，箭头，文字
A==>B 大箭头，无文字
A==文字==>B 大箭头，文字

时序图（Sequence Diagrams）

sequenceDiagram
    Manu->>Tim: Hello Tim, how are you?
    alt is sick
    Tim->>Manu: Not so good :(
    else is well
    Tim->>Manu: Feeling fresh like a daisy
    end
    opt Extra response
    Tim->>Manu: Thanks for asking
    end

流程图（Flowcharts)

  • 流程图图表方向
图表方向 含义
TB/TD 从上到下
BT 从下到上
RL 从右到左
LR 从左到右 
graph TD
A[开始] -->B[出示证件]
    B --> C{是否是学生}
    C -->|是| D[5 折]
    C -->|否| E[全票]
    D --> F[结束]
    E --> F[结束]

甘特图（Gantt Charts）

gantt
    title 甘特图
    dateFormat  YYYY-MM-DD
    section Section
    项目确定           :a1, 2020-01-01, 30d
    可行性分析     :after a1  , 20d
    section Another
    需求分析     :2020-01-12  , 12d
    项目实施      : 24d

类图（Class Diagrams）

classDiagram
	Animal <|-- Dog
	Animal <|-- Cat
	Animal <|-- Wolf
	
    Animal : +int age
	Animal : +String name
	Animal : +String color
	Animal : +isMammal()
	Animal : +getColor()
	
	class Dog{
		+Stirng type
		+bark()
	}
	
	class Cat{
		+String eyesColor
		+catchMouse()
	}
	
	class Wolf{
		+String area
		+kill()
	}

状态图（State Diagrams）

stateDiagram
	[*] --> 保持
	保持 --> [*]
	
	保持 --> 移动
	移动 --> 保持
	移动 --> 加速
	加速 --> [*]

饼图（Pie Charts）

img

关注公众号，获取最新文章更新
公众号