【Markdown高级技巧】写出高大上的流程图、时序图、类图-创新互联
Markdown是一个轻量级的标记语言，使用普通文本编辑器就能快速编写，不仅显示格式丰富，功能也毫不含糊，在软件开发和开源项目中使用非常普遍。有没有想过Markdown也能写出高大上的流程图、时序图、类图？
内容目录
- md写流程图
- 语法
- 定义流程
- 连接流程
- 连接方向
- 实例：
- Web服务API请求
- 缓存系统更新流程图
- 语法
- md写时序图
- 语法
- 时序图4类元素
- 实例：Web服务异步任务调度时序图
- md写UML类图
- 语法和元素
- 类图6种关系
- 实例：Jext开源插件的类图实例：到期工作日天数
一，流程图
1，语法
- 定义流程：流程id=>类型: 显示内容
- start=>start: 开始
- io=>inputoutput: 输入输出
- op=>operation: 操作
- cond=>condition: 条件
- sub=>subroutine: 子流程
- end=>end: 结束
- 连接流程：将流程id使用->连接，支持级联或者分行两种写法
- 级联：start->io->op->cond
- 分行：
start->io io->op op->cond - 条件连接：添加(yes)或者(no)分支
cond(no)->sub cond(yes)->end
- 连接方向
- 支持4个方向，上下左右，跟在连接线开始的元素后面，(top), (bottom), (left), (right)，默认(bottom)
op(right)->sub - 条件连接有两种方向，只需指定yes或no：(yes, right), (yes, bottom)，或者(no, right), (no, bottom)，默认(yes, bottom)
cond(yes, right)
- 支持4个方向，上下左右，跟在连接线开始的元素后面，(top), (bottom), (left), (right)，默认(bottom)
start=>start: 开始
io=>inputoutput: 输入输出
op=>operation: 操作
cond=>condition: 条件
sub=>subroutine: 子流程
end=>end: 结束
start->io->op(right)->cond
cond(no)->sub
cond(yes, right)->end2，Web服务API请求时读取缓存流程图
start=>start: API请求
cache=>operation: 读取Redis缓存
cached=>condition: 是否有缓存？
sendMq=>operation: 发送MQ，后台服务更新缓存
info=>operation: 读取信息
setCache=>operation: 保存缓存
end=>end: 返回信息
start->cache->cached
cached(yes)->sendMq
cached(no)->info
info->setCache
setCache->end
sendMq->end显示效果
3，Web服务缓存系统更新流程图
start=>start: 接收到消息
info=>operation: 读取信息
setCache=>operation: 更新缓存
end=>end: 处理结束
start->info->setCache->end显示效果
md在线编辑器：https://www.mdeditor.com/
二，时序图
1，语法图
2，时序图4类元素
- title: 标题
- participant：定义参与的成员，as定义别名
- 流向箭头
- ->：实线黑体箭头，同步调用
- -->：虚线黑体箭头，返回结果
- ->>：实线空箭头，异步消息
- -->>：虚线空箭头，返回结果
- 注释
- note over：注释，悬浮在成员上
- note left of：注释，成员左边
- note right of：注释，成员右边
3，Web服务异步任务调度时序图示例
title: Web服务缓存更新时序图
participant 数据中台 as api
participant 缓存 as cache
participant 消息队列 as mq
participant 数据服务 as srv
api->cache: 读取缓存
cache-->api: 返回缓存
Note over api: 如果没有读到缓存，就调用数据服务
api->>mq: 请求更新缓存
mq->>srv: 触发更新缓存
srv-->cache: 更新缓存显示效果
md在线编辑器：https://www.mdeditor.com/
三，UML类图
1，语法
- Title: 标题
注释
- ' xxx: 单行注释以单引号开头
- /' xxx '/: 多行注释
类图元素
- interface：接口
- abstract class：抽象类
- class：类
- 方法和属性访问权限
- + public
- - private
- # protected
- ~ package private
@startuml
Title 方法和属性访问权限示例
interface IHello {
+ method()
}
class Hello {
+ field1
- field2
# field3
+ method()
- method1()
# method2()
~ method3()
}
@enduml2，类图关系，1张表整理清楚常见6种关系，必须记住啦：泛化、实现、组合、聚合、关联、依赖。
类或接口名称前可包含包名称，可加关键字namespace：
@startuml
Title 包名称示例
class BaseEntity
namespace com.hello {
.BaseEntity <|-- Meeting
.BaseEntity <|-- Person
Meeting o-- Person
}
namespace com.foo {
.BaseEntity <|-- Person
com.hello.Person <|-- Person
com.hello.Meeting o-- Person
}
@enduml3，分享一个Jext开源插件扩展JIRA时画的类图
@startuml
Title 到期工作日天数
内置DueWorkdaysField ..> DueWorkdays
预定义DueWorkdaysField ..> DueWorkdays
DueWorkdays ..> WorkdayHelper
DueWorkdays ..> HistoryHelper
DueWorkdays ..> StatusHelper
WorkdayHelper ..> DateUtil
class DueWorkdays{
+ getDueWorkdays()
}
class WorkdayHelper{
+ countWorkdays()
+ isHoliday()
}
class DateUtil{
+ isWeekend()
}
@enduml显示效果
在线编辑工具
- 流程图，时序图：md在线编辑器：https://www.mdeditor.com/
- UML类图：PlantUML在线工具：http://www.plantuml.com/plantuml/uml/
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享标题：【Markdown高级技巧】写出高大上的流程图、时序图、类图-创新互联
标题链接：http://myzitong.com/article/jpooi.html