# 集成 PlantUML

# PlantUML

最近一直在使用 PlantUML 画时序图，使用很方便。
官方中文教程：🔗 (opens new window)

# 插件安装

yarn add -D markdown-it-plantuml

然后编辑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

# 扩展样式

PlantUML默认样式比较古板，可以在官方的theme-gallery (opens new window)及plantuml-style-c4 (opens new window)引入自定义扩张样式，使用很简单，通过include命令来引用。

@startuml
!include https://unpkg.com/plantuml-style-c4@latest/core.puml
' uncomment the following line and comment the first to use locally
'!include core.puml

!theme bluegray

@enduml

1
2
3
4
5
6
7
8

示例代码

@startuml sequence-sample
!include https://unpkg.com/plantuml-style-c4@latest/core.puml

Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice &lt;-- Bob: another authentication Response
@enduml

1
2
3
4
5
6
7
8
9

附录