PlantUML

最近一直在使用 PlantUML 画时序图，简直是太方便了。并且语雀也已经支持 PlantUML。 官方中文教程：https://plantuml.com/zh/sequence-diagram IntelliJ 系列 IDE 都可以安装 PlantUML integration 这个插件，来编写 puml 文件。支持即时预览。

插件安装

1

yarn add -D markdown-it-plantuml

然后编辑 Vuepress 的配置文件.config.js，增加插件的配置：

1
2
3
4
5
6
7
8

module.exports = {
  ...
  extendMarkdown: md => {
    md.set({ breaks: true })
    md.use(require('markdown-it-plantuml'))
  },
  ...
}

参考资料：Vuepress 的文档

测试

写一段代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

@startuml
用户 -> 认证中心: 登录操作
认证中心 -> 缓存: 存放(key=token+ip,value=token)token

用户 <- 认证中心 : 认证成功返回token
用户 -> 认证中心: 下次访问头部携带token认证
认证中心 <- 缓存: key=token+ip获取token
其他服务 <- 认证中心: 存在且校验成功则跳转到用户请求的其他服务
其他服务 -> 用户: 信息
@enduml

效果如下：

更新：目前使用 hugo，所以暂时没效果了

@startuml 用户 -> 认证中心: 登录操作 认证中心 -> 缓存: 存放(key=token+ip,value=token)token 用户 <- 认证中心 : 认证成功返回 token 用户 -> 认证中心: 下次访问头部携带 token 认证 认证中心 <- 缓存: key=token+ip 获取 token

其他服务 <- 认证中心: 存在且校验成功则跳转到用户请求的其他服务 其他服务 -> 用户: 信息 @enduml