没想到吧，Markdown 还能这么玩！
点击上方【村雨遥】添加关注
目录
- 前言
- 时序图（Sequence Diagrams）
- 流程图（Flowcharts）
- Mermaid 图
- 准备知识
- 时序图（Sequence Diagrams）
- 流程图（Flowcharts)
- 甘特图（Gantt Charts）
- 类图（Class Diagrams）
- 状态图（State Diagrams）
- 饼图（Pie Charts）
前言
日常工作中，常常需要画各种图表，利用专业的画图的工具如 Visio 等当然能画出我们想要的图表。但是我们只是想要简单的图表时，也可以通过借助 Markdown 相关语法实现，大大提高效率。
时序图（Sequence Diagrams）
村雨 -> 村雨遥: 你好, 村雨遥！
Note right of 村雨遥: 思考！
村雨遥 --> 村雨: 你好，村雨，很高兴与你合作！
流程图（Flowcharts）
st=>start: 开始
op=>operation: 出示证件
cond=>condition: 是否是学生？
e=>end: 结束
st->op->cond
cond(yes)->e
cond(no)->op
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）
pie
title 操作系统份额
"Windows" : 70
"MacOS" : 15
"Linux" : 8
"Others" : 7
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-09-27，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录