用markdown画流程图和时序图

​ markdown 目前已经成为轻量级编辑器的代表，依靠markdown可以解决日常生活中写文档的基本需求，并且对于一些日常使用的流程图和序列图也有一定的支持！目前本人使用的是 Typora 写个人文章，在公司内用的是飞书文档，基本都是markdown语法！而使用目前比较好用的ProcessOn（网页版）、Visio/PowerPoint(microsoft) 、Draw.io(开源)使用下来的体验就是文章和流程图分离！也就是导致使用体验大打折扣，目前飞书文档支持的PlantUML很不错！我个人一般是PlantUML和Mermaid！

1. UML

1. 基本介绍

​ UML 是统一建模语言的简称，它是一种由一整套图表组成的标准化建模语言。UML用于帮助系统开发人员阐明，展示，构建和记录软件系统的产出。UML代表了一系列在大型而复杂系统建模中被证明是成功的做法，是开发面向对象软件和软件开发过程中非常重要的一部分。UML主要使用图形符号来表示软件项目的设计，使用UML可以帮助项目团队沟通、探索潜在的设计和验证软件的架构设计。以下我们将向您详细介绍什么是UML、UML的历史以及每个UML图类型的描述，辅之以UML示例。

2. 作用

1. 为用户提供现成的、有表现力的可视化建模语言，主要就是可视化，直观！！
2. 逻辑思维的整理吧，如果你可以画图清晰的表述出逻辑，那么一定方案可执行会很好！
3. 画图也是一门学问和技巧！

3. 分类

大概上有13种，下面我列出我们常用的！

1. 结构图

1. 类图 (Class Diagram)

2. 行为性图

1. 活动图 (Activity Diagram)

这里主要多了一个概念叫做泳道，泳道可以很好的隔离开流程！

2. 状态机图 (State Machine Diagram)

其实这个就和流程图！

3. 序列图 (Sequence Diagram)

2. 流程图 (Flow Chart)

markdown 支持流程图(Flow Chart) 是用的开源的 flowchart 语法进行的支持! 流程图一般是用来清晰的表达出流程逻辑的一个可视化工具，比如你要跟同事沟通一个技术方案，你文档文字写的满满的，但是导致有些专业性的隔阂或者你表述不清晰，导致同事很难理解你在说什么，这时候可能就需要流程图进行弥补下！

1. 简单语法介绍

流程图一般有几个关键的节点，也一般是开始和结束两个节点！其次是有多个不同类型的节点组成！具体可以看官方文档: flowchart

节点定义语法如 : 节点名称=>节点类型: 节点显示的内容[:> 超链接URL] 是空格敏感的！

1. 节点类型

节点类型主要有: 常用的其实就前5个

1. start (开始)

2. end （结束）

3. operation （操作节点，表示你要执行的步骤，比如平时顺序结构 步骤A->步骤B->步骤C）

4. condition （条件节点，表示判断条件）

5. inputoutput （输入输出节点，类似于前端的input框，输入个账户名称和密码之类的！）

6. subroutine（子流程，即表示一个流程，但是流程比较复杂，直接通过自流程代替，表示这块逻辑只是没有展开而已，其实很复杂！）

7. parallel （并行流，允许多个流程同时发生）

2. 流程控制

类型说明符:

1. 基本操作流: startVar(<direction>)->nextNode

2. direction 表示方位，有left、right、top、bottom

3. previousNode->endVar

4. operationVar(<direction>)->nextNode

5. inputoutputVar(<direction>)->nextNode

6. subroutineVar(<direction>)->nextNode

7. conditionalVar(yes, <direction>)->nextNode1

8. conditionalVar(no, <direction>)->nextNode2

9. parallel 控制流介绍

parallelVar(path1, <direction>)->nextNode1
parallelVar(path2, <direction>)->nextNode2
parallelVar(path3, <direction>)->nextNode3

10. condition 控制流介绍

# @ 表示覆写描述，比如正在这个line上描述的是true，@可以覆写描述为 正确
cond(true@正确)->io->e

3. 官方例子介绍

下图为官方介绍的流程图：

st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks

st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1

展示效果如下:

2. 简单例子介绍

例如一个网关发布(分级发布)的前置流程，主要就是用户选择发布版本，然后进行判断，提交发布信息的流程，流程图如下:

我觉得flowchart好处就是可以像写代码一样，清晰的描述流程图，要比 mermaid实用的多！

start=>start: 开始流程
end=>end: 结束
select_publish_version=>inputoutput: 输入/选择发布版本
op_start_publish=>operation: 点击开始发布
cond_publish_version=>condition: 判断版本是否
已经发布测试环境
op_throw_error=>operation: 抛出异常
(当前版本x.x.x未经过测试环境验证，不允许发布)
op_load_publish_list=>operation: 加载测试环境发布成功的工单
select_tlb_path=>inputoutput: 选择TLB发布集群以及分流策略
select_agw_env=>inputoutput: 选择AGW发布环境
op_submit=>operation: 提交发布信息

start->select_publish_version->op_start_publish->cond_publish_version
cond_publish_version(no@否)->op_throw_error->end
cond_publish_version(yes@是)->op_load_publish_list->select_tlb_path->select_agw_env->op_submit->end

3. PlantUML（UML）

markdown 支持时序图基本上用的都是 PlantUML ！ 目前飞书文档支持使用 PlantUML ，但是我个人使用的typora不支持，而且我的博客也不支持，所以目前主流的解决方案就是通过网站:https://g.gravizo.com/ 画 svg 实现！

不过可以配合 vscode进行使用！不过我觉得PlantUML渲染比较棒！

@startuml;
actor User;
participant "First Class" as A;
participant "Second Class" as B;
participant "Last Class" as C;
User -> A: DoWork;
activate A;
A -> B: Create Request;
activate B;
B -> C: DoWork;
activate C;
C --> B: WorkDone;
destroy C;
B --> A: Request Created;
deactivate B;
A --> User: Done;
deactivate A;
@enduml

4. Mermaid （UML）

1. 流程图(flowchart)

1. 头部需要定义 graph|flowchart [direction] ， 其中direction 主要由 LR 和 TB 组合上下左右！
2. 内容部分只需要定义流程即可
   1. a --> b --> c 表示 顺序引用
   2. a --> |注释|b 表示 a -> b 中间需要加注释
   3. a(show_name) 表示 a需要通过 show_name 进行展示，也就是节点内容
3. 单向箭头主要有 -->实线， -.-> 虚线，==> 加粗线； 双向箭头就是 <==>和…， 无箭头是 == ，很形象！
4. 节点可以通过 {condition name} 和 [operation name] 和 (start|end name) 和 ((multi condition name)) 进行渲染形状！
5. 和上面我们讲的 flowchart区别就是他不需要再去定义节点了！但是这个流程图定义的并不严格！

1. 普通流程图

例子1:

graph LR
	a-->|注释|b(开始结束类型)-->c[operation类型] -->d{condition类型} -.->|虚线|e((圆型节点))==>|加粗线|f <--> |双向箭头|g(end)

graph LR
    a-->|注释|b(开始结束类型)-->c[operation类型] -->d{condition类型} -.->|虚线|e((圆型节点))==>|加粗线|f <--> |双向箭头|g(end)

例子2:

graph LR
  A{A} --> |a->b普通线|B(B)
  B --> C --> F((F)) --> |输入|G>G] --> D 
  C --> D
  A ==> |a->d block|D(D)
  A --> |a->e 注释|E[e注释]
  E -.-> |e-d 虚线|D

graph LR
  A{A} --> |a->b普通线|B(B)
  B --> C --> F((F)) --> |输入|G>G] --> D 
  C --> D
  A ==> |a->d block|D(D)
  A --> |a->e 注释|E[e注释]
  E -.-> |e-d 虚线|D

例子3:

flowchart LR
A[Hard] <-->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

flowchart LR
A[Hard] <-->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

例子4: 可以通过关键字 & 来表示 a->c , b->d, c->d

flowchart LR
   a --> b & c--> d

flowchart LR
   a --> b & c--> d

2. 子图表

可以通过 subgraph 名称+end关键字来构建子图标，你可以理解为就是加了个框框！可以区分流程图

graph LR
		a(a) --> b
		subgraph one模块
		b --> c
		end
		c --> d
		subgraph two模块
		d --> e
		end
		e --> f(f)

graph LR
        a(a) --> b
        subgraph one模块
        b --> c
        end
        c --> d
        subgraph two模块
        d --> e
        end
        e --> f(f)

2. 序列图 （Sequence Diagram）

时序图由简称UML图，

1. 首先需要定义参与者： participant [name] as [show_name] 或者直接 participant name , 或者可以直接不定义participant
2. 连接线: ->> 实线，-->> 虚线，一般请求用实线，return 用虚线，
3. + 和 -表示加入会话[activate]和结束会话[deactivate]，例如 a -> + b 表示b开启会话（会话是俩人都可以开启的，这个a->>+b只是表示b开启，如果a也要开启，需要 activate a），例如 activate a表示a开启会话!
4. 添加node: Note 位置描述 参与者: 标注文字

# over a,b,c 多个人
# left of a  单个人
# right of a 单个人
Note over John,Alice: note: 嘻嘻嘻 😊！
Note left of John: Text in note
Note right of John: Text in note

1. 普通序列图

例子一：

sequenceDiagram
	participant Alice as Alice # 定义参与者： participant [name] as [show_name]
	participant John # 定义参与者: participant [name]
	Alice->> + John: Hello John, how are you? # 表示和john进行会话，同时a和j开始会话
	John-->> Alice: Great! 
	Note over John,Alice: note: 嘻嘻嘻，over 😊！ # 表示添加注释
	Note left of John: note: 嘻嘻嘻, left 😊!
	Note right of John: note: 嘻嘻嘻, wright 😊!	
	Alice->> John: Hi John, I can hear you!
	John-->> - Alice: I feel great! # 表示john断开了会话

sequenceDiagram
    participant Alice as Alice # 定义参与者： participant [name] as [show_name]
    participant John # 定义参与者: participant [name]
    Alice->> + John: Hello John, how are you? # 表示和john进行会话，同时a和j开始会话
    John-->> Alice: Great! 
    Note over John,Alice: note: 嘻嘻嘻，over 😊！ # 表示添加注释
    Note left of John: note: 嘻嘻嘻, left 😊!
    Note right of John: note: 嘻嘻嘻, wright 😊!    
    Alice->> John: Hi John, I can hear you!
    John-->> - Alice: I feel great! # 表示john断开了会话

2. 序列图例子

例子2：

sequenceDiagram
	participant fe as 小程序
	participant service as 服务器
	participant wx_service as 微信服务器
	loop 失败重试
		fe ->> fe: wx.login()获取code
	end
	fe ->> service: wx.request() 发送code
	activate service
	service ->> wx_service: 发送code+appid+签名
	activate wx_service
	wx_service -->> service: 返回code id
	deactivate wx_service
	service ->> service: 生成token
	service -->> fe: 返回token
	deactivate service

sequenceDiagram
    participant fe as 小程序
    participant service as 服务器
    participant wx_service as 微信服务器
    loop 失败重试
        fe ->> fe: wx.login()获取code
    end
    fe ->> service: wx.request() 发送code
    activate service
    service ->> wx_service: 发送code+appid+签名
    activate wx_service
    wx_service -->> service: 返回code id
    deactivate wx_service
    service ->> service: 生成token
    service -->> fe: 返回token
    deactivate service

5. 参考

• UML整体概述
• UML时序图(Sequence Diagram)学习笔记st=>start: Start:> http://www.google.com[blank] e=>end: End :>http://www.google.com op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:>http://www.google.com io=>inputoutput: catch something... para=>parallel: parallel tasks st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->op1{"scale":1,"line-width":2,"line-length":50,"text-margin":10,"font-size":12}start=>start: 开始流程 end=>end: 结束 select_publish_version=>inputoutput: 输入/选择发布版本 op_start_publish=>operation: 点击开始发布 cond_publish_version=>condition: 判断版本是否 已经发布测试环境 op_throw_error=>operation: 抛出异常 (当前版本x.x.x未经过测试环境验证，不允许发布) op_load_publish_list=>operation: 加载测试环境发布成功的工单 select_tlb_path=>inputoutput: 选择TLB发布集群以及分流策略 select_agw_env=>inputoutput: 选择AGW发布环境 op_submit=>operation: 提交发布信息 start->select_publish_version->op_start_publish->cond_publish_version cond_publish_version(no@否)->op_throw_error->end cond_publish_version(yes@是)->op_load_publish_list->select_tlb_path->select_agw_env->op_submit->end{"scale":1,"line-width":2,"line-length":50,"text-margin":10,"font-size":12}