MarkDown绘图小技巧

爪哇程序人生
1,305 阅读3分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

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

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

1. 样式流程图（graph）

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

1.1 定义流程图类型

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

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

编码

image.png

效果

graph TB
mermaid --> graphTB

1.2 节点类型和样式

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

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

编码

image.png

效果

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

编码

image.png

效果

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 作为开始

编码

image.png

效果

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 甘特图实现

编码

image.png

效果

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

4. 总结

对于markdown语法的使用还是有很多内容的，而且针对不同的markdown工具，其在实现上可以有所不同，即针对某些语法是无法正常解析的。

avatar
文章
阅读
粉丝