重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
slidev-plantuml by yoanbernabeu/slidev-skills
npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-plantuml此技能涵盖在 Slidev 中使用 PlantUML 创建 UML 和技术图表。PlantUML 擅长创建标准的 UML 图表,比 Mermaid 提供更精细的控制。
PlantUML 通过 plantuml 代码块支持:
@startuml
Alice -> Bob: Hello
Bob --> Alice: Hi!
@enduml
@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
@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
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
@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
@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
@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
@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
@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
@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
@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
@startuml
start
:Receive Order;
if (Payment Valid?) then (yes)
:Process Order;
:Ship Items;
else (no)
:Notify Customer;
:Cancel Order;
endif
stop
@enduml
@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
@startuml
start
:Initialize;
fork
:Process A;
fork again
:Process B;
fork again
:Process C;
end fork
:Merge Results;
stop
@enduml
@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
@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
@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
@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
@startuml
!theme cerulean
class MyClass {
+attribute: String
}
@enduml
可用主题:cerulean、materia、minty、sandstone、sketchy-outline 等。
@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
@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
import { definePlantUmlSetup } from '@slidev/types'
export default definePlantUmlSetup(() => {
return {
// Server URL (default uses public server)
server: 'https://www.plantuml.com/plantuml',
}
})
| 功能 | Mermaid | PlantUML |
|---|---|---|
| 语法 | 更简单 | 更冗长 |
| UML 合规性 | 部分 | 完全 |
| 渲染方式 | 客户端 | 服务器端 |
| C4 图表 | 不支持 | 支持 |
| 泳道 | 不支持 | 支持 |
| 自定义能力 | 有限 | 广泛 |
创建 PlantUML 图表时:
DIAGRAM TYPE: [sequence/class/component/etc.]
PURPOSE: [What it illustrates]
```plantuml
@startuml
[skinparams if needed]
[diagram content]
@enduml
关键元素:
备注:
58
22
2026年1月25日
gemini-cli48
codex48
opencode48
github-copilot47
cursor46
amp45
This skill covers using PlantUML for creating UML and technical diagrams in Slidev. PlantUML excels at creating standard UML diagrams with more detailed control than Mermaid.
PlantUML is supported via the plantuml code block:
```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
```
```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
```
Available themes: cerulean, materia, minty, sandstone, sketchy-outline, and more.
```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
```
import { definePlantUmlSetup } from '@slidev/types'
export default definePlantUmlSetup(() => {
return {
// Server URL (default uses public server)
server: 'https://www.plantuml.com/plantuml',
}
})
| Feature | Mermaid | PlantUML |
|---|---|---|
| Syntax | Simpler | More verbose |
| UML compliance | Partial | Full |
| Rendering | Client-side | Server-side |
| C4 diagrams | No | Yes |
| Swimlanes | No | Yes |
| Customization | Limited | Extensive |
When creating PlantUML diagrams:
DIAGRAM TYPE: [sequence/class/component/etc.]
PURPOSE: [What it illustrates]
```plantuml
@startuml
[skinparams if needed]
[diagram content]
@enduml
KEY ELEMENTS:
NOTES:
Weekly Installs
58
Repository
GitHub Stars
22
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
gemini-cli48
codex48
opencode48
github-copilot47
cursor46
amp45
文档查找工具:实时获取库、框架和API最新文档,替代训练数据
1,400 周安装