【Markdown高级技巧】写出高大上的流程图、时序图、类图

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

Created with Raphaël 2.2.0 开始 输入输出 操作 条件 结束 子流程 yes no

2，Web服务API请求时读取缓存流程图

Created with Raphaël 2.2.0 API请求 读取Redis缓存 是否有缓存？ 发送MQ，后台服务更新缓存 返回信息 读取信息 保存缓存 yes no

显示效果

3，Web服务缓存系统更新流程图

Created with Raphaël 2.2.0 接收到消息 读取信息 更新缓存 处理结束

显示效果

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/