Posted 2022-03-21博客4 minutes read (About 670 words)

Hexo如何使用PlantUML画图

我的博客是用Hexo搭建的，有时候需要画图，画图的工具很多，但是有时候我们需要对图片进行改动，然后需要重新引入到Markdown中，很不方便。

希望可以随意改动图片，而且不需要重新插入图片，开源的工具PlantUML ，轻松从简单的文字说明创建UML图，平时用vscode写文档，可以安装PlantUML插件，然后写完可以同步到博客上，也可以安装插件来实现。

如何安装

首先在 hexo 目录下执行以下安装命令：

npm install --save hexo-filter-kroki

如果在 vscode 上使用需要安装以下插件：

Markdown All in One
Markdown Preview Enhanced
PlantUML
markdownlint

如何使用

在代码块中，使用@startuml 开头，以@enduml 结尾，!theme amiga 添加对应的模板

```
@startuml
!theme amiga
Bob->Alice : hello
@enduml
```

模板参考

具体模板参考：https://github.com/plantuml/plantuml/tree/master/themes

none

@startuml
!theme _none_
Bob->Alice : hello
@enduml

amiga

@startuml
!theme amiga
Bob->Alice : hello
@enduml

aws-orange

@startuml
!theme aws-orange
Bob->Alice : hello
@enduml

black-knight

@startuml
!theme black-knight
Bob->Alice : hello
@enduml

bluegray

@startuml
!theme bluegray
Bob->Alice : hello
@enduml

blueprint

@startuml
!theme blueprint
Bob->Alice : hello
@enduml

cerulean-outline

@startuml
!theme cerulean-outline
Bob->Alice : hello
@enduml

cerulean

@startuml
!theme cerulean
Bob->Alice : hello
@enduml

crt-amber

@startuml
!theme crt-amber
Bob->Alice : hello
@enduml

crt-green

@startuml
!theme crt-green
Bob->Alice : hello
@enduml

cyborg-outline

@startuml
!theme cyborg-outline
Bob->Alice : hello
@enduml

cyborg

@startuml
!theme cyborg
Bob->Alice : hello
@enduml

hacker

@startuml
!theme hacker
Bob->Alice : hello
@enduml

lightgray

@startuml
!theme lightgray
Bob->Alice : hello
@enduml

mars

@startuml
!theme mars
Bob->Alice : hello
@enduml

materia-outline

@startuml
!theme materia-outline
Bob->Alice : hello
@enduml

materia

@startuml
!theme materia
Bob->Alice : hello
@enduml

metal

@startuml
!theme metal
Bob->Alice : hello
@enduml

mimeograph

@startuml
!theme mimeograph
Bob->Alice : hello
@enduml

minty

@startuml
!theme minty
Bob->Alice : hello
@enduml

plain

@startuml
!theme plain
Bob->Alice : hello
@enduml

reddress-darkblue

@startuml
!theme reddress-darkblue
Bob->Alice : hello
@enduml

reddress-darkgreen

@startuml
!theme reddress-darkgreen
Bob->Alice : hello
@enduml

reddress-darkorange

@startuml
!theme reddress-darkorange
Bob->Alice : hello
@enduml

reddress-darkred

@startuml
!theme reddress-darkred
Bob->Alice : hello
@enduml

reddress-lightblue

@startuml
!theme reddress-lightblue
Bob->Alice : hello
@enduml

reddress-lightgreen

@startuml
!theme reddress-lightgreen
Bob->Alice : hello
@enduml

reddress-lightorange

@startuml
!theme reddress-lightorange
Bob->Alice : hello
@enduml

reddress-lightred

@startuml
!theme reddress-lightred
Bob->Alice : hello
@enduml

sandstone

@startuml
!theme sandstone
Bob->Alice : hello
@enduml

silver

@startuml
!theme silver
Bob->Alice : hello
@enduml

sketchy-outline

@startuml
!theme sketchy-outline
Bob->Alice : hello
@enduml

sketchy

@startuml
!theme sketchy
Bob->Alice : hello
@enduml

spacelab-white

@startuml
!theme spacelab-white
Bob->Alice : hello
@enduml

spacelab

@startuml
!theme spacelab
Bob->Alice : hello
@enduml

superhero-outline

@startuml
!theme superhero-outline
Bob->Alice : hello
@enduml

superhero

@startuml
!theme superhero
Bob->Alice : hello
@enduml

toy

@startuml
!theme toy
Bob->Alice : hello
@enduml

united

@startuml
!theme united
Bob->Alice : hello
@enduml

vibrant

@startuml
!theme vibrant
Bob->Alice : hello
@enduml

参考

官方使用文档

#Hexo PlantUML