mcpField
S
slidev-plantuml

slidev-plantuml

github.com/yoanbernabeu文档处理41218 次安装39 周前更新
代码仓库

关于 slidev-plantuml

面向 Slidev 的 PlantUML 技能，指导演示文稿作者编写 UML 与技术图表，涵盖图表类型、样式和配置。

主要功能

  1. 01时序、类与状态图
  2. 02组件图与部署图
  3. 03含泳道的活动图
  4. 04C4 架构图
  5. 05主题与 skinparam 样式

适用场景

  1. 01在幻灯片中说明服务交互
  2. 02绘制系统架构
  3. 03用泳道展示工作流

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-plantuml

安装后在 Claude Code 中输入/slidev-plantuml确认已加载。

详细介绍

Slidev 中的 PlantUML

本技能介绍如何在 Slidev 中使用 PlantUML 创建 UML 和技术图表。与 Mermaid 相比，PlantUML 擅长创建标准 UML 图表，并提供更精细的控制。

何时使用此技能

  • 创建标准 UML 图表
  • 创建带有详细标注的复杂时序图
  • 创建组件图和部署图
  • 创建用例图
  • 创建带泳道的活动图
  • 创建 C4 架构图

启用 PlantUML

PlantUML 可通过 plantuml 代码块使用：

```plantuml
@startuml
Alice -> Bob: Hello
Bob --> Alice: Hi!
@enduml
```

时序图

基本时序图
```plantuml
@startuml
participant User
participant "Web Server" as WS
participant Database as DB

User -> WS: HTTP Request
activate WS
WS -> DB: SQL Query
activate DB
DB --> WS: Result Set
deactivate DB
WS --> User: HTTP Response
deactivate WS
@enduml
```
参与者类型
```plantuml
@startuml
actor User
boundary "API Gateway" as API
control "Auth Service" as Auth
entity "User Entity" as UE
database "PostgreSQL" as DB
collections "Cache" as Cache
queue "Message Queue" as MQ

User -> API: Request
API -> Auth: Validate
Auth -> DB: Query
@enduml
```
分组和备选方案
```plantuml
@startuml
actor User
participant Service

User -> Service: Login

alt Valid credentials
    Service --> User: Success
else Invalid credentials
    Service --> User: Error 401
end

group Optional
    User -> Service: Refresh Token
    Service --> User: New Token
end

loop Health Check
    Service -> Service: Ping
end
@enduml
```
注释
```plantuml
@startuml
participant Alice
participant Bob

Alice -> Bob: Request
note left: This is a note\non the left

Bob --> Alice: Response
note right: This is a note\non the right

note over Alice, Bob: Note over both participants
@enduml
```

类图

基本类图
```plantuml
@startuml
class User {
    -id: Long
    -email: String
    -password: String
    +login(): Boolean
    +logout(): void
}

class Order {
    -id: Long
    -total: BigDecimal
    +addItem(item: Item): void
    +removeItem(id: Long): void
    +checkout(): Boolean
}

User "1" --> "*" Order: places
@enduml
```
接口和抽象类
```plantuml
@startuml
interface Serializable {
    +serialize(): String
}

abstract class BaseEntity {
    #id: Long
    #createdAt: DateTime
    {abstract} +validate(): Boolean
}

class User extends BaseEntity implements Serializable {
    -name: String
    +serialize(): String
    +validate(): Boolean
}
@enduml
```
关系
```plantuml
@startuml
class A
class B
class C
class D
class E
class F

A --|> B : extends
C ..|> D : implements
E --* F : composition
G --o H : aggregation
I --> J : association
K ..> L : dependency
@enduml
```
包
```plantuml
@startuml
package "Domain Layer" {
    class User
    class Order
}

package "Infrastructure Layer" {
    class UserRepository
    class OrderRepository
}

package "Application Layer" {
    class UserService
    class OrderService
}

UserService --> User
UserService --> UserRepository
@enduml
```

用例图

```plantuml
@startuml
left to right direction

actor Customer
actor Admin

rectangle "E-Commerce System" {
    usecase "Browse Products" as UC1
    usecase "Add to Cart" as UC2
    usecase "Checkout" as UC3
    usecase "Manage Products" as UC4
    usecase "Process Orders" as UC5
}

Customer --> UC1
Customer --> UC2
Customer --> UC3
Admin --> UC4
Admin --> UC5

UC3 ..> UC2 : <<include>>
@enduml
```

活动图

基本流程
```plantuml
@startuml
start
:Receive Order;
if (Payment Valid?) then (yes)
    :Process Order;
    :Ship Items;
else (no)
    :Notify Customer;
    :Cancel Order;
endif
stop
@enduml
```
泳道
```plantuml
@startuml
|Customer|
start
:Submit Order;
|Sales|
:Review Order;
if (Valid?) then (yes)
    |Warehouse|
    :Pick Items;
    :Pack Items;
    |Shipping|
    :Ship Package;
    |Customer|
    :Receive Package;
else (no)
    |Sales|
    :Reject Order;
    |Customer|
    :Receive Notification;
endif
stop
@enduml
```
并行处理
```plantuml
@startuml
start
:Initialize;
fork
    :Process A;
fork again
    :Process B;
fork again
    :Process C;
end fork
:Merge Results;
stop
@enduml
```

组件图

```plantuml
@startuml
package "Frontend" {
    [React App] as Web
    [Mobile App] as Mobile
}

package "Backend" {
    [API Gateway]
    [Auth Service]
    [User Service]
    [Order Service]
}

package "Data Layer" {
    database "PostgreSQL" as DB
    database "Redis" as Cache
    queue "RabbitMQ" as MQ
}

Web --> [API Gateway]
Mobile --> [API Gateway]
[API Gateway] --> [Auth Service]
[API Gateway] --> [User Service]
[API Gateway] --> [Order Service]
[User Service] --> DB
[Order Service] --> DB
[Order Service] --> MQ
[Auth Service] --> Cache
@enduml
```

部署图

```plantuml
@startuml
node "AWS Cloud" {
    node "VPC" {
        node "Public Subnet" {
            [Load Balancer] as LB
        }

        node "Private Subnet" {
            node "ECS Cluster" {
                [API Container] as API
                [Worker Container] as Worker
            }
        }

        node "Data Subnet" {
            database "RDS PostgreSQL" as DB
            database "ElastiCache Redis" as Cache
        }
    }
}

actor User
User --> LB
LB --> API
API --> DB
API --> Cache
Worker --> DB
@enduml
```

状态图

```plantuml
@startuml
[*] --> Draft

Draft --> Submitted : submit()
Submitted --> UnderReview : startReview()
UnderReview --> Approved : approve()
UnderReview --> Rejected : reject()
Rejected --> Draft : revise()
Approved --> Published : publish()
Published --> [*]

Draft : entry / loadDraft()
Draft : exit / saveDraft()

state UnderReview {
    [*] --> Reviewing
    Reviewing --> WaitingForInfo : requestInfo()
    WaitingForInfo --> Reviewing : infoProvided()
}
@enduml
```

样式

Skinparams
```plantuml
@startuml
skinparam backgroundColor #f8fafc
skinparam roundCorner 10
skinparam shadowing false

skinparam class {
    BackgroundColor #e0f2fe
    BorderColor #0284c7
    FontColor #0c4a6e
}

skinparam sequence {
    ArrowColor #0284c7
    LifeLineBorderColor #64748b
    ParticipantBackgroundColor #e0f2fe
}

class User {
    +name: String
}
@enduml
```
主题
```plantuml
@startuml
!theme cerulean

class MyClass {
    +attribute: String
}
@enduml
```

可用主题：cerulean、materia、minty、sandstone、sketchy-outline 等。

C4 模型图

上下文图
```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

Person(user, "Customer", "A user of our system")
System(system, "E-Commerce", "Online shopping platform")
System_Ext(payment, "Payment Gateway", "Handles payments")
System_Ext(shipping, "Shipping Provider", "Delivers packages")

Rel(user, system, "Uses")
Rel(system, payment, "Processes payments via")
Rel(system, shipping, "Ships orders via")
@enduml
```
容器图
```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person(user, "Customer")

System_Boundary(system, "E-Commerce Platform") {
    Container(web, "Web App", "React", "User interface")
    Container(api, "API", "Node.js", "Business logic")
    ContainerDb(db, "Database", "PostgreSQL", "Stores data")
    Container(queue, "Queue", "RabbitMQ", "Async processing")
}

Rel(user, web, "Uses")
Rel(web, api, "API calls")
Rel(api, db, "Reads/Writes")
Rel(api, queue, "Publishes")
@enduml
```

配置

setup/plantuml.ts
import { definePlantUmlSetup } from '@slidev/types'

export default definePlantUmlSetup(() => {
  return {
    // Server URL (default uses public server)
    server: 'https://www.plantuml.com/plantuml',
  }
})

Mermaid 与 PlantUML 对比

特性MermaidPlantUML
语法更简单更冗长
UML 兼容性部分支持完全支持
渲染客户端服务端
C4 图否是
泳道否是
自定义有限丰富

最佳实践

  1. 使用 PlantUML 的场景：标准 UML、C4、复杂图表
  2. 使用 Mermaid 的场景：简单流程图、快速可视化
  3. 添加 skinparams：根据演示主题进行自定义
  4. 让图表聚焦：每张图表只表达一个概念
  5. 使用正确的 UML 符号：遵循标准，确保清晰易懂

输出格式

创建 PlantUML 图表时：

DIAGRAM TYPE: [sequence/class/component/etc.]
PURPOSE: [What it illustrates]

```plantuml
@startuml
[skinparams if needed]

[diagram content]

@enduml

关键元素：

  • [元素]：[代表的内容]

备注：

  • [任何补充说明]

评论

支持 Markdown