MarkDown 绘图小技巧

无标签

发布日期: 2023-07-31

更新日期: 2023-08-27

文章字数: 1.2k

阅读时长: 4 分

阅读次数:

MarkDown 语法在记笔记、写文章等方面越来越受到更多人的喜欢，掘金、CSDN 等平台的文章内容就是 MarkDown 语法格式。

MarkDown 编译器可以把引用的语法对应成相应的 HTML 标签，不同的插件对应的语法也不太一样，今天不说基础，说一下使用 MarkDown 怎么画出常用的流程图。

1. 样式流程图（graph）

流程图是工作学习中使用最为频繁的图形，一些简单的流程图可以直接使用 MarkDown 来实现了。

1.1 定义流程图类型

流程图使用时，要使用 MarkDown 中的源代码格式，且代码格式为 mermaid 类型才可以正常编译。

源代码中绘图时，需要使用 graph 关键词作为开始标志，之后设置图的延申方向
- TB/TD(top bottom / top down)：从上至下；BT：从下至上
- RL(right left)：从右至左；LR：从左至右

编码内容

实际效果

graph TB
mermaid --> graphTB

1.2 节点类型和样式

节点类型：流程图中的节点通过使用不同的括号来代表不同的形状

默认为矩形（不加任何括号）：A
矩形节点：B[矩形]
圆角矩形节点：C(圆角矩形)
圆形节点：D((圆形))
非对称节点：E >非对称]
菱形节点：F{菱形}

编码

效果

graph BT
A 
B[B]
C(C)
D((D))
E>E]
F{F}

1.3 节点连线类型

连线类型：流程图中节点之间使用线条连接，线条的类型也有很多种

箭头连接：A –> B
开放连接（无箭头）：A — B
虚线箭头连接：A .-> B 或 A -.-> B
虚线连接：A .- B 或 A -.- B
粗线箭头连接：A ==> B
粗线开放连接（无箭头）：A === B
带标签虚线箭头连接： A -.text.-> B
带标签开放连接（无箭头）：A –text— B

编码

效果

graph LR
A --> B
A --- B
A .-> B
A -.- B
A ==> B
A === B
A -.to.-> B
A -.to.- B
A --to--> B
A --to--- B
A ==to===> B

2 时序图

时序图作为流程图的变形，也是比较常用的。

2.1 基本语法：

Title:标题 ：指定时序图的标题
Note [位置] 对象:描述 ：在对象的某一侧添加描述，direction 可以为 right of/left of/over ， 对象 可以是多个对象，以 , 作为分隔符
participant 对象 as 简称 ：创建一个对象
激活方块：
- 开始：activate [对象]
- 结束：deactivate [对象]
loop...end ：创建一个循环体（不确定怎么用？？）
对象A->对象B:描述
：绘制A与B之间的对话，以实线连接
- -> 实线实心箭头指向
- --> 虚线实心箭头指向
- ->> 实线小箭头指向
- -->> 虚线小箭头指向
loop … end 循环
alt … else … end 条件分支
opt … end 分支

2.2 时序图实现

使用mermaid格式进行解析，并使用sequenceDiagram 作为开始

编码

效果

sequenceDiagram 
对象A ->> 对象B:hello？
对象B -->> 对象A:yes

activate 对象A
对象A ->> 对象B:激活方块
对象B ->> 对象A:激活方块
对象A ->> 对象B:激活方块
deactivate 对象A

loop 循环流程
对象B -->> 对象A:循环
对象A -->> 对象B:循环
end

alt 条件1
对象A ->> 对象B:1
else 条件2
对象A ->> 对象B:2
end

opt 另外
对象A ->> 对象B:others
end

3 甘特图

甘特图虽然不太常用，但是在一些项目进度、工时排列等方面还是大有用处的。

3.1 基本语法

使用 mermaid 解析语言，在开头使用关键字 gantt 指明
deteFormat 格式 指明日期的显示格式
title 标题 设置图标的标题
section 描述 定义纵向上的一个环节
定义步骤：每个步骤有两种状态done（已完成）/ active（执行中）
- 描述: 状态,id,开始日期,结束日期/持续时间
- 描述: 状态[,id],after id2,持续时间
- crit ：可用于标记该步骤需要被修正，将高亮显示
- 如果不指定具体的开始时间或在某个步骤之后，将默认依次顺序排列

3.2 甘特图实现

编码

效果

gantt
    dateFormat YYYY-MM-DD
    title 甘特图

    section 设计
    需求: done,des1, 2021-09-22,1d
    原型: active,des2, 2021-09-23,1d
    UI: des3, after des2, 2d

    section 开发
    设计框架: crit, done, des4, 2021-09-25, 24h
    开发: active, des5, after des4, 3d
    假期: desc6, 2021-10-01, 7d