使用markdown来写文章,做笔记是非常方便的,这里记录一些高级用法,使用markdown画流程图、时序图、甘特图。

工具:Typora

UML时序图

hexo中需要配合使用hexo-filter-sequence以及hexo-filter-mermaid-diagrams插件支持渲染,具体参考:Hexo常用插件

1
2
3
npm install --save hexo-filter-mermaid-diagrams
npm install --save hexo-filter-sequence
npm install --save hexo-filter-flowchart

简单示例

源代码(反斜杠用于转义,实际不需要):

1
2
3
4
5
6
7
8
\`\`\`sequence
A->B: Hello B(请求)?
Note right of B: 对B的一些描述信息
Note left of A: 对A的一些描述
B-->A: I'm find(响应)!两杠是虚线
A->B: I'm really find.
B-B: I'm touch myself.
\`\`\`

效果:

复杂示例

源代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
\`\`\`sequence
Title: 使用:复杂使用
A->B: Hello B?(请求)
Note right of B: 对B的描述
Note left of A: 对A的描述(提示)
B-->A: I'm Find!(响应)
B->C: How are you?
C-->>A: B touch me
A->B: are you sure?
Note over C,B: We are friend
participant C
Note right of C: 没人陪我玩
\`\`\`

效果:

标准示例(使用mermaid标签)

以下是标准的UML时序图示例:

源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
\`\`\`mermaid
%% 时序图例子,-> 直线,-->虚线,->>实线箭头

sequenceDiagram

participant 张三

participant 李四

张三->王五: 王五你好吗?

loop 健康检查

王五->王五: 与疾病战斗

end

Note right of 王五: 合理 食物 <br/>看医生...

李四-->>张三: 很好!

王五->李四: 你怎么样?

李四-->王五: 很好!
\`\`\`

效果:

%% 时序图例子,-> 直线,-->虚线,->>实线箭头

sequenceDiagram

participant 张三

participant 李四

张三->王五: 王五你好吗?

loop 健康检查

王五->王五: 与疾病战斗

end

Note right of 王五: 合理 食物 
看医生... 李四-->>张三: 很好! 王五->李四: 你怎么样? 李四-->王五: 很好!

流程图

横向流程图

源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
\`\`\`mermaid
graph LR

A[方形] -->B(圆角)

B --> C{条件a}

C -->|a=1| D[结果1]

C -->|a=2| E[结果2]

F[横向流程图]
\`\`\`

效果:

graph LR

A[方形] -->B(圆角)

B --> C{条件a}

C -->|a=1| D[结果1]

C -->|a=2| E[结果2]

F[横向流程图]

纵向流程图

源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
\`\`\`mermaid
graph TD

A[方形] -->B(圆角)

B --> C{条件a}

C -->|a=1| D[结果1]

C -->|a=2| E[结果2]

F[竖向流程图]
\`\`\`

效果:

graph TD

A[方形] -->B(圆角)

B --> C{条件a}

C -->|a=1| D[结果1]

C -->|a=2| E[结果2]

F[竖向流程图]

标准流程图(flow)

源码:

1
2
3
4
5
6
7
8
9
10
11
\`\`\`flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
\`\`\`

效果:

甘特图

源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
\`\`\`mermaid
%% 语法示例

gantt

dateFormat YYYY-MM-DD

title 软件开发甘特图

section 设计

需求 :done, des1, 2018-01-06,2014-01-08

原型 :active, des2, 2018-01-09, 3d

UI设计 : des3, after des2, 5d

未来任务 : des4, after des3, 5d


section 开发

学习准备理解需求 :crit, done, 2018-01-06,24h

设计框架 :crit, done, after des2, 2d

开发 :crit, active, 3d

未来任务 :crit, 5d

耍 :2d



section 测试

功能测试 :active, a1, after des3, 3d

压力测试 :after a1 , 20h

测试报告 : 48h
\`\`\`

效果:

当前在hexo中渲染不出来,在Typora能展示如下,后续解决Hexo展示问题:

甘特图示例
甘特图示例

结束