Hexo支持PlantUML图表

1 安装hexo-filter-markdown-filter插件

在Hexo根目录下安装hexo-filter-markdown-filter插件

npm install hexo-filter-markdown-filter --save

该插件默认为使能状态. 安装完成后, 重新生成页面hexo clean && hexo g.

2 使用

该插件支持

<% plantuml %>

<% endplantuml %>

和

“```puml ```”

两种开头格式.

2.1 序列图表

https://plantuml.com/sequence-diagram

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

Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml

2.2 用例图表

https://plantuml.com/use-case-diagram

@startuml
:Main Admin: as Admin
(Use the application) as (Use)

User -> (Start)
User --> (Use)

Admin ---> (Use)

note right of Admin : This is an example.

note right of (Use)
  A note can also
  be on several lines
end note

note "This note is connected\nto several objects." as N2
(Start) .. N2
N2 .. (Use)
@enduml

3 类图表

https://plantuml.com/class-diagram

@startuml
Object <|-- ArrayList

Object : equals()
ArrayList : Object[] elementData
ArrayList : size()

@enduml

4 组件图表

https://plantuml.com/component-diagram

@startuml

interface "Data Access" as DA

DA - [First Component] 
[First Component] ..> HTTP : use

note left of HTTP : Web Service only

note right of [First Component]
  A note can also
  be on several lines
end note

@enduml

5 更多图表使用示例

请参考 PlantUml官网 .

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 add358@163.com