【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)->end
2,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()
}
@enduml
2,类图关系,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
}
@enduml
3,分享一个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/
名称栏目:【Markdown高级技巧】写出高大上的流程图、时序图、类图
网页路径:http://ybzwz.com/article/iehpcd.html