PlantUML 与 Mermaid: 告别拖拽，用代码生成专业图表 | 物联网民工

PlantUML 与 Mermaid: 告别拖拽，用代码生成专业图表

最后修改 2025-11-06 阅读时间: 5 分钟 字数: 2237
效率 绘图

自动生成序列图、类图、状态图等，远离排版之苦，将时间用在刀刃上。

PlantUML 语法丰富，适合复杂专业图表；Mermaid 则更轻量（免安装），适合 Markdown 文档中的简单图表。

安装配置

PlantUML

  1. 安装依赖。
    sudo apt install default-jre graphviz
  2. 从官网下载页面下载 GPL 版本（全功能版）的 JAR 包。
  3. 在本地启动一个服务器，以便 VS Code 实时渲染。
    java -jar plantuml.jar -picoweb:8000:127.0.0.1
  4. 在 VS Code 中安装 jebbs.plantuml 插件。之后，在设置中将 plantuml:Render 设置为 Local，并将 plantuml:Server 设置为 http://127.0.0.1:8000/。

Mermaid

只需安装 Markdown Preview Mermaid Support 插件，即可在 VS Code 中实时渲染。

序列图

sequenceDiagram title Sequence Diagram Demo participant A as Alice participant B as Bob participant E as Eve Note over A,E: this is note over Note left of E: this is note left A->>B: Authentication Request 1 alt successful case B-->>A: Authentication Accepted else Some kink of failure B--xA: Response not reach loop 1000 times A->>B: retry end end autonumber A->>+B: create request B->>+E: DoWork E-->>-B: WorkDone B-->>-A: request created %% Notes are also simpler in Mermaid and do not support complex formatting like PlantUML's notes. %% '...' (long delay) and 'hide footbox' also don't have direct equivalents.

PlantUML

@startuml

title Sequence Diagram Demo

' typedef participants
participant Alice as A
participant Bob as B
participant Eve as E

' theme
skinparam monochrome true

' long time delay
... some long delay (NOT SUPPORTED IN MERMAID) ...

== step 1 (NOT SUPPORTED IN MERMAID) ==

A -> B: Authentication Request

' note
note over A, E
    **bold** ""monospaced"" --stroked--
    __underlined__ ~~waved~~ //italics//
    NOT SUPPORTED IN MERMAID
end note

' group
alt successful case
    B ->> A: Authentication Accepted
else Some kink of failure
    B ->x A: Response not reach
    group Custom lable
        loop 1000 times
            A -> B: retry
        end
    end
else Another type of failure
    B ->o A: Authentication Failure (NOT SUPPORTED IN MERMAID)
end

== step 2 ==

' auto num from 1, step 1
autonumber 1 1

[-> A: input
activate A
A->B: create request
activate B
B->E: DoWork
activate E
E-->B: WorkDone
destroy E
B-->A: request created
deactivate B

[<--A: output

 ' NOT SUPPORTED IN MERMAID
hide footbox
@enduml

Mermaid

  • 不支持富文本
  • 不支持step
  • 不支持autonumber重置，仅全局有效
  • 不支持hide footbox
%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
    title Sequence Diagram Demo

    participant A as Alice
    participant B as Bob
    participant E as Eve

    Note over A,E: this is note over
    Note left of E: this is note left

    A->>B: Authentication Request 1

    alt successful case
        B-->>A: Authentication Accepted
    else Some kink of failure
        B--xA: Response not reach
        loop 1000 times
            A->>B: retry
        end
    end

    autonumber
    A->>+B: create request
    B->>+E: DoWork
    E-->>-B: WorkDone
    B-->>-A: request created

    %% Notes are also simpler in Mermaid and do not support complex formatting like PlantUML's notes.
    %% '...' (long delay) and 'hide footbox' also don't have direct equivalents.

状态图

stateDiagram direction LR [*] --> State1 State1 --> [*] State1 : State1 State1 : this is string State1 --> State2: step1 State2 --> [*]

PlantUML

@startuml
hide empty description

[*] --> State1
State1 --> [*]
State1 : this is a string
State1 : this is another string

State1 -> State2: <color:green> step1
State2 --> [*]

@enduml

Mermaid

stateDiagram
    direction LR

    [*] --> State1
    State1 --> [*]
    State1 : State1
    State1 : this is string

    State1 --> State2: step1
    State2 --> [*]

流程图

flowchart TD %% Start A(("start")) --> B["Hello world"] B --> C["This is defined on several lines"] %% First conditional (if/else) C --> D{am i right?} D -->|yes| E["it's iotworker"] D -->|no| F %% Complex if/elseif structure F --> G{condition A} G -->|yes| H["Text 1"] H --> S G -->|no| I{condition B?} I -->|yes| J["Text 2"] J --> Stop1["stop"] I -->|no| K{condition C?} K -->|yes| L["Text 3"] K -->|no| M{condition D?} M -->|yes| N["Text 4"] M -->|no| O["Text else"] L --> S N --> S O --> S %% Switch statement S[ ] --> P{test?} P -->|condition A| Q["Text 1"] P -->|condition B| R["Text 2"] P -->|condition C| T["Text 3"] P -->|condition D| U["Text 4"] P -->|condition E| V["Text 5"] Q --> W R --> W T --> W U --> W V --> W %% Do-While loop W[ ] --> X["read data"] X --> Y["generate diagrams"] Y --> Z{more data?} Z -->|yes| X Z -->|no| AA %% While loop AA[ ] --> AB{data available?} AB -->|yes| AC["read data"] AC --> AB AB -->|no| AD["stop"] %% Style definitions classDef stop fill:#000,color:#fff,stroke:#000 class Stop1,AD stop; %% Notes (as comments) %% Complex if floating note: elseif %% Switch floating note: switch %% Do-While floating note: do while %% While floating note: while

PlantUML

@startuml
start

:Hello world;
:This is defined on
several **lines**;

if (am i right?) then (yes)
 :it's iotworker;
else (no)
endif

if (condition A) then (yes)
  :Text 1;
elseif (condition B) then (yes)
  :Text 2;
  stop
(no) elseif (condition C) then (yes)
  :Text 3;
(no) elseif (condition D) then (yes)
  :Text 4;
else (nothing)
  :Text else;
floating note right: elseif
endif


switch (test?)
case ( condition A )
  :Text 1;
case ( condition B ) 
  :Text 2;
case ( condition C )
  :Text 3;
case ( condition D )
  :Text 4;
case ( condition E )
  :Text 5;
floating note right: switch
endswitch

repeat :read data;
  :generate diagrams;
repeat while (more data?) is (yes)
floating note right: do while
->no;

while (data available?)
floating note right: while
  :read data;
endwhile

stop
@enduml

Mermaid

相比 PlantUML 有更多限制（如上复杂的流程图就比较丑）：

  • 浮动注释：无等效语法 (floating note)。
  • 内联 Markdown 格式：节点文本不支持粗体等渲染。
  • 自动多行文本：需手动添加 \n 换行符。
  • 分支标签位置：条件标签 (yes)/(no) 必须写在连接线上。
  • 原生停止符：无内置 stop 语法，需自定义样式。
  • Repeat 循环结构：无专用关键字，需逻辑模拟。
  • 链式 elseif：需多层嵌套决策节点实现。
  • 转向连接符：->no; 类语法需显式定义路径。
  • 智能布局：复杂逻辑需人工添加辅助节点。
  • 语法宽松度：对缩进和分隔符要求更严格。
flowchart TD
    %% Start
    A(("start")) --> B["Hello world"]
    B --> C["This is defined on several lines"]
    
    %% First conditional (if/else)
    C --> D{am i right?}
    D -->|yes| E["it's iotworker"]
    D -->|no| F
    
    %% Complex if/elseif structure
    F --> G{condition A}
    G -->|yes| H["Text 1"]
    H --> S
    G -->|no| I{condition B?}
    I -->|yes| J["Text 2"]
    J --> Stop1["stop"]
    I -->|no| K{condition C?}
    K -->|yes| L["Text 3"]
    K -->|no| M{condition D?}
    M -->|yes| N["Text 4"]
    M -->|no| O["Text else"]
    L --> S
    N --> S
    O --> S
    
    %% Switch statement
    S[ ] --> P{test?}
    P -->|condition A| Q["Text 1"]
    P -->|condition B| R["Text 2"]
    P -->|condition C| T["Text 3"]
    P -->|condition D| U["Text 4"]
    P -->|condition E| V["Text 5"]
    Q --> W
    R --> W
    T --> W
    U --> W
    V --> W
    
    %% Do-While loop
    W[ ] --> X["read data"]
    X --> Y["generate diagrams"]
    Y --> Z{more data?}
    Z -->|yes| X
    Z -->|no| AA
    
    %% While loop
    AA[ ] --> AB{data available?}
    AB -->|yes| AC["read data"]
    AC --> AB
    AB -->|no| AD["stop"]
    
    %% Style definitions
    classDef stop fill:#000,color:#fff,stroke:#000
    class Stop1,AD stop;
    
    %% Notes (as comments)
    %% Complex if floating note: elseif
    %% Switch floating note: switch
    %% Do-While floating note: do while
    %% While floating note: while

脑图

mindmap root((root node)) some first level node second level node another second level node another first level node

PlantUML

@startmindmap
* root node
	* some first level node
		* second level node
		* another second level node
	* another first level node
@endmindmap

Mermaid

mindmap
  root((root node))
    some first level node
        second level node
        another second level node
    another first level node

类图

类图是一种用于展示系统中类、接口、类间关系的 UML (Unified Modeling Language，统一建模语言) 图表。 类图通常用于软件工程中，特别是在面向对象分析和设计过程中，以可视化的方式描述系统的静态结构。

  • 元素
classDiagram class MyClass { -field1 私有属性 #field2 保护属性 +field3 公共属性 -method1() 私有方法 #method2() 保护方法 +method3() 公共方法 } class AbstractClass { +abstractMethod() } class Interface { +interfaceMethod() }
  • 关系
classDiagram %% 继承 Parent <|-- Child %% 聚合，空心菱形指向整体，部分可以独立存在 Company o-- Employee %% 组合，实心菱形指向整体，部分不能独立存在 House *-- Room %% 关联 Teacher -- Student %% 依赖 Client ..> Service class Parent { +parentMethod() } class Child { +childMethod() } class Company { -employees Employee[] +addEmployee(Employee) } class Employee { -name String -position String } class House { -rooms Room[] } class Room { -size int -type String } class Teacher { -subject String +teach() } class Student { -grade int +study() } class Client { +request() } class Service { +process() }

PlantUML

  • 元素
@startuml

class MyClass {
    -field1 : string
    #field2 : string
    +field3 : string
    -method1() : void
    #method2() : void
    +method3() : void
}

abstract class AbstractClass {
    +abstractMethod()
}

interface Interface {
    +interfaceMethod()
}

@enduml
  • 关系
@startuml

class Parent {
    +parentMethod()
}

class Child {
    +childMethod()
}

class Company {
    -employees Employee[]
    +addEmployee(Employee)
}

class Employee {
    -name String
    -position String
}

class House {
    -rooms Room[]
}

class Room {
    -size int
    -type String
}

class Teacher {
    -subject String
    +teach()
}

class Student {
    -grade int
    +study()
}

class Client {
    +request()
}

class Service {
    +process()
}

' Inheritance
Parent <|-- Child

' Aggregation
Company o-- Employee

' Composition
House *-- Room

' Association
Teacher -- Student

' Dependency
Client ..> Service

@enduml

Mermaid

  • 元素
classDiagram
    class MyClass {
        -field1 : string
        #field2 : string
        +field3 : string
        -method1() : void
        #method3() : void
        +method2() : void
    }
    
    class AbstractClass {
        <<abstract>>
        +abstractMethod()
    }
    
    class Interface {
        <<interface>>
        +interfaceMethod()
    }
  • 关系
classDiagram
    %% 继承
    Parent <|-- Child
    
    %% 聚合
    Company o-- Employee
    
    %% 组合
    House *-- Room
    
    %% 关联
    Teacher -- Student
    
    %% 依赖
    Client ..> Service
    
    class Parent {
        +parentMethod()
    }
    
    class Child {
        +childMethod()
    }
    
    class Company {
        -employees Employee[]
        +addEmployee(Employee)
    }
    
    class Employee {
        -name String
        -position String
    }
    
    class House {
        -rooms Room[]
    }
    
    class Room {
        -size int
        -type String
    }
    
    class Teacher {
        -subject String
        +teach()
    }
    
    class Student {
        -grade int
        +study()
    }
    
    class Client {
        +request()
    }
    
    class Service {
        +process()
    }
  • 关系说明
  • 继承 (Inheritance): <|-- 表示子类继承父类。
  • 聚合 (Aggregation): o-- 表示整体与部分的关系，部分可以独立存在。
  • 组合 (Composition): *-- 表示整体与部分的关系，部分不能独立存在。
  • 关联 (Association): -- 表示类之间的关联关系。
  • 依赖 (Dependency): ..> 表示一个类依赖另一个类。
  • 可见性修饰符
  • + 公共 (public)
  • - 私有 (private)
  • # 保护 (protected)
  • ~ 包级别 (package)

彩蛋：如果有更复杂的绘图需求或者就是喜欢拖拽，可以试试 draw.io。