markdown 流程图js_Markdown 进阶 - PlantUML 绘图

最新推荐文章于 2025-06-21 13:46:23 发布

原创最新推荐文章于 2025-06-21 13:46:23 发布 · 960 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#markdown 流程图js

PlantUML是一个开源的UML图形绘制工具，适用于Markdown和HTML，提供了包括流程图、时序图、Gantt图在内的多种图表。它可以看作是Graphviz的封装，相比Mermaid.js，PlantUML支持更多图形类型。安装PlantUML需要先装GraphViz，然后在VSCode中安装Markdown Preview Enhanced和PlantUML扩展，即可在Markdown文件中使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文使用 Zhihu On VSCode 创作并发布

PlantUML 是基于 Java 语言的开源 UML（Unified Modeling Language）图形绘制工具，因为其可以单独绘图，又可以嵌入 Markdown 以及 HTML，因而被不少开发文档采用。PlantUML 可以看作是著名绘图工具 Graphviz 的封装。相比于 Graphviz 的 Geek 风，PlantUML 的颜值更高。而与 Mermaid.js 相比，其支持的图形种类更为多样。

PlantUML 支持的图形可简单分为三种类型

基本类：流程图、时序图、Gantt 图
工程类：类图、实体关系图、用例图、组件图
导图类：思维导图、组织结构导图
当然在上述提及的图形之外，PlantUML 还支持一些其他的图形，详情请见官网

https://plantuml.complantuml.com

关于 PlantUML 的使用也不复杂，先安装 GraphViz，建议使用包管理器安装

关于包管理器的使用，本专栏里有专门的介绍，这里不再赘述

对 Windows，使用 Scoop 或 Chocolatey

scoop install graphviz
choco install graphviz

对 MacOS，使用 Homebrew

brew cask install graphviz

在 VSCode 中，安装2个扩展

Markdown Preview Enhanced
PlantUML

然后，就可以在 Markdown 愉快地使用 PlantUML 了。

基本类型

流程图

@startuml

start
:new page;
if (Page.onSecurityCheck) then (true)
  :Page.onInit();
  if (isForward?) then (no)
    if (continue processing?) then (no)
      stop
    endif

    if (isPost?) then (yes)
      :Page.onPost();
    else (no)
      :Page.onGet();
    endif
    :Page.onRender();
  endif
else (false)
endif

stop

@enduml

时序图

@startuml

== Initialization ==

Alice -> Bob: : Can you solve: <math>ax^2+bx+c=0</math>
Bob --> Alice: <math>x = (-b+-sqrt(b^2-4ac))/(2a)</math>
activate Alice #FFBBBB
note left: this is a first note

Alice -> Bob: Another dialogue
deactivate Alice

Alice <-- Bob: Another dialogue

@enduml

Gantt 图

@startuml
[Prototype design] lasts 13 days and is colored in Lavender/LightBlue

[Test prototype] lasts 9 days and is colored in Coral/Green and starts 3 days after [Prototype design]'s end

[Write tests] lasts 5 days and ends at [Prototype design]'s end

[Hire tests writers] lasts 6 days and ends at [Write tests]'s start

[Init and write tests report] is colored in Coral/Green

[Init and write tests report] starts 1 day before [Test prototype]'s start and ends at [Test prototype]'s end
@enduml

工程类

类图

@startuml
Class01 <|-- Class02
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 -- Class10
@enduml

状态图

@startuml
scale 350 width
[*] --> NotShooting

state NotShooting {
  [*] --> Idle
  Idle --> Configuring : EvConfig
  Configuring --> Idle : EvConfig
}

state Configuring {
  [*] --> NewValueSelection
  NewValueSelection --> NewValuePreview : EvNewValue
  NewValuePreview --> NewValueSelection : EvNewValueRejected
  NewValuePreview --> NewValueSelection : EvNewValueSaved

  state NewValuePreview {
     State1 -> State2
  }

}
@enduml

实体关系图

@startuml

' hide the spot
hide circle

' avoid problems with angled crows feet
skinparam linetype ortho

entity "Entity01" as e01 {
  *e1_id : number <<generated>>
  --
  *name : text
  description : text
}

entity "Entity02" as e02 {
  *e2_id : number <<generated>>
  --
  *e1_id : number <<FK>>
  other_details : text
}

entity "Entity03" as e03 {
  *e3_id : number <<generated>>
  --
  e1_id : number <<FK>>
  other_details : text
}

e01 ||..o{ e02
e01 |o..o{ e03

@enduml

用例图

@startuml
left to right direction
skinparam packageStyle rectangle
actor customer
actor clerk
rectangle checkout {
  customer -- (checkout)
  (checkout) .> (payment) : include
  (help) .> (checkout) : extends
  (checkout) -- clerk
}
@enduml

组件图

@startuml

package "Some Group" {
  HTTP - [First Component]
  [Another Component]
}

node "Other Groups" {
  FTP - [Second Component]
  [First Component] --> FTP
}

cloud {
  [Example 1]
}

database "MySql" {
  folder "This is my folder" {
    [Folder 3]
  }
  frame "Foo" {
    [Frame 4]
  }
}

[Another Component] --> [Example 1]
[Example 1] --> [Folder 3]
[Folder 3] --> [Frame 4]

@enduml

导图类

思维导图

@startmindmap
+ OS
++ Ubuntu
+++ Linux Mint
+++ Kubuntu
+++ Lubuntu
+++ KDE Neon
++ LMDE
++ SolydXK
++ SteamOS
++ Raspbian
-- Windows 95
-- Windows 98
-- Windows NT
--- Windows 8
--- Windows 10

header
My super header
endheader

center footer My super footer

legend right
  Short
  legend
endlegend
@endmindmap

组织结构导图

@startwbs
+ New Job
++ Decide on Job Requirements
+++ Identity gaps
+++ Review JDs
++++ Sign-Up for courses
++++ Volunteer
++++ Reading
++- Checklist
+++- Responsibilities
+++- Location
++ CV Upload Done
+++ CV Updated
++++ Spelling & Grammar
++++ Check dates
---- Skills
+++ Recruitment sites chosen
@endwbs

@startwbs
+ New Job
++ Decide on Job Requirements
+++ Identity gaps
+++ Review JDs
++++ Sign-Up for courses
++++ Volunteer
++++ Reading
++- Checklist
+++- Responsibilities
+++- Location
++ CV Upload Done
+++ CV Updated
++++ Spelling & Grammar
++++ Check dates
---- Skills
+++ Recruitment sites chosen
@endwbs