slidev-plantuml
Use PlantUML for UML diagrams in Slidev. Use this skill for complex UML diagrams, architecture visualizations, and technical documentation.
- Installs
- 217
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-plantuml- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads slidev-plantuml automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
PlantUML in Slidev
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.
When to Use This Skill
- Creating standard UML diagrams
- Complex sequence diagrams with detailed notation
- Component and deployment diagrams
- Use case diagrams
- Activity diagrams with swimlanes
- C4 architecture diagrams
Enabling PlantUML
PlantUML is supported via the plantuml code block:
```plantuml
@startuml
Alice -> Bob: Hello
Bob --> Alice: Hi!
@enduml
```
Sequence Diagrams
Basic Sequence
```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
```
Participant Types
```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
```
Grouping and Alternatives
```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
```
Notes
```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
```
Class Diagrams
Basic Class
```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
```
Interfaces and Abstract Classes
```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
```
Relationships
```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
```
Packages
```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
```
Use Case Diagrams
```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
```
Activity Diagrams
Basic Flow
```plantuml
@startuml
start
:Receive Order;
if (Payment Valid?) then (yes)
:Process Order;
:Ship Items;
else (no)
:Notify Customer;
:Cancel Order;
endif
stop
@enduml
```
Swimlanes
```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
```
Parallel Processing
```plantuml
@startuml
start
:Initialize;
fork
:Process A;
fork again
:Process B;
fork again
:Process C;
end fork
:Merge Results;
stop
@enduml
```
Component Diagrams
```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
```
Deployment Diagrams
```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
```
State Diagrams
```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
```
Styling
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
```
Themes
```plantuml
@startuml
!theme cerulean
class MyClass {
+attribute: String
}
@enduml
```
Available themes: cerulean, materia, minty, sandstone, sketchy-outline, and more.
C4 Model Diagrams
Context Diagram
```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
```
Container Diagram
```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
```
Configuration
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 vs 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 |
Best Practices
- Use PlantUML for: Standard UML, C4, complex diagrams
- Use Mermaid for: Simple flowcharts, quick visualizations
- Add skinparams: Customize for your presentation theme
- Keep diagrams focused: One concept per diagram
- Use proper UML notation: Follow standards for clarity
Output Format
When creating PlantUML diagrams:
DIAGRAM TYPE: [sequence/class/component/etc.]
PURPOSE: [What it illustrates]
```plantuml
@startuml
[skinparams if needed]
[diagram content]
@enduml
KEY ELEMENTS:
- [Element]: [What it represents]
NOTES:
- [Any additional context]
FAQ
What does the slidev-plantuml skill do?
Use PlantUML for UML diagrams in Slidev. Use this skill for complex UML diagrams, architecture visualizations, and technical documentation.
How do I install slidev-plantuml?
Run npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-plantuml in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/slidev-plantuml/ (personal) or .claude/skills/slidev-plantuml/ (project).
Which AI agents can use slidev-plantuml?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is slidev-plantuml safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains slidev-plantuml?
It is published by yoanbernabeu in yoanbernabeu/slidev-skills. It has 217 recorded installs.
More from yoanbernabeu/slidev-skills
slidev-styling
yoanbernabeu/slidev-skills
Style Slidev slides with UnoCSS and custom CSS. Use this skill for custom colors, typography, animations, and responsive designs.
slidev-quick-start
yoanbernabeu/slidev-skills
Get started with Slidev presentations in minutes. Use this skill to create your first presentation or set up a new Slidev project.
slidev-themes
yoanbernabeu/slidev-skills
Use and customize Slidev themes. Use this skill to apply themes, configure theme options, and create custom themes.
slidev-syntax-guide
yoanbernabeu/slidev-skills
Master Slidev's extended Markdown syntax. Use this skill to write slides with advanced formatting, frontmatter, and special features.
slidev-drawings
yoanbernabeu/slidev-skills
Draw and annotate during Slidev presentations. Use this skill for live annotations, highlighting, and visual explanations.
slidev-project-structure
yoanbernabeu/slidev-skills
Understand Slidev project structure and configuration. Use this skill to configure themes, addons, and customize your presentation setup.
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
handoff
mattpocock/skills
Compact the current conversation into a handoff document for another agent to pick up.
domain-modeling
mattpocock/skills
Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.