Markdown 时序图、流程图、甘特图

发表于 | 分类于 | 浏览量:

作为一名程序猿，平时少不了要画各种时序图、流程图。

最开始画流程图用的微软的visio，收费而且不好用，稍微复杂点的一调整半个小时过去了…

后面有用过ProcessOn，一款免费在线作图工具，支持实时协作，体验比visio好点，但调整也相当费事。

直到开始用Markdown，才终于不用Ctrl + ↑↓←→了。

推荐用Typora编辑器，已内置插件支持Sequence、Flowchart、Gantt等，只需要开启即可。

如果你用的不是Typora也没有关系，这篇文章有说明它用的哪些JS插件。这些插件都是开源的，有详细的说明文档。有道云笔记是支持Sequence的，估计用的同样的插件，语法几乎一样。

废话不多说，看下效果图

时序图

标记分类

- 代表实线，表示主动发送消息
– 代表虚线，表示返回消息
> 代表实心箭头，表示同步消息
>> 代码非实心箭头，表示异步消息

是不是看上去挺复杂？其实Markdown内容很简单，调整位置也相当方便，剪切粘贴即可。

Markdown内容如下:

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
title: This is a sequence diagram
participant Browser
participant Box
participant Cloud
participant Celery
participant OSS
Browser -> Box: 1.get upload policy
Note over Box: GET /api/upload_policy/file
Box -> Cloud: get oss policy by cloud
Note over Cloud: POST /api/oss/policy
Cloud -> OSS: get policy
OSS --> Cloud: return policy
Cloud --> Box: return oss upload policy
Box --> Browser: return upload policy
Browser -> OSS: 2.upload file
OSS ->> Cloud: 3.upload file finish, oss callback cloud
Note over Cloud: POST /api/oss_callback
Cloud -> Box: notify box file upload completed
Note over Box: POST /api/notify/file_uploaded
Note right of Box: Box record data
Box -> Cloud: call cloud api, add celery task
Note Over Cloud: POST /api/file/jobs
Cloud -> Celery: add celery task
Cloud --> Box: return 200 ok
Note right of Cloud: update box data
Box --> Cloud: return 200 ok
Cloud --> OSS: return 200 ok
OSS --> Browser: return upload finished
Celery -> Celery: worker do something
Note left of Celery: step 1
Note left of Celery: step 2
Note left of Celery: step 3
Celery -> Box: 4.do something over, notify box
Note over Box: POST /api/file/status
Note right of Box: step 1
Note right of Box: step 2
Note right of Box: step 3
Box --> Celery: return 200 ok

流程图、甘特图与时序图类似，参考文档已经说的很详细了，这里就不举例了。

参考资料:
Draw Diagrams With Markdown