Vuepress 增加 PlantUML 支持
Wkii 2020-06-24 19:24:00 vuepressPlantUML
# PlantUML
最近一直在使用 PlantUML 画时序图，简直是太方便了。并且语雀也已经支持 PlantUML。
官方中文教程：https://plantuml.com/zh/sequence-diagram
IntelliJ 系列IDE都可以安装 PlantUML integration (opens new window) 这个插件，来编写puml文件。支持即时预览。
# 插件安装
yarn add -D markdown-it-plantuml
1
然后编辑Vuepress的配置文件.config.js，增加插件的配置：
module.exports = {
...
extendMarkdown: md => {
md.set({ breaks: true })
md.use(require('markdown-it-plantuml'))
},
...
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
参考资料：Vuepress的文档 (opens new window)
# 测试
写一段代码：
@startuml
用户 -> 认证中心: 登录操作
认证中心 -> 缓存: 存放(key=token+ip,value=token)token
用户 <- 认证中心 : 认证成功返回token
用户 -> 认证中心: 下次访问头部携带token认证
认证中心 <- 缓存: key=token+ip获取token
其他服务 <- 认证中心: 存在且校验成功则跳转到用户请求的其他服务
其他服务 -> 用户: 信息
@enduml
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
效果如下：