【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)

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/