slidev-plantuml

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.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "slidev-plantuml" with this command: npx skills add yoanbernabeu/slidev-skills/yoanbernabeu-slidev-skills-slidev-plantuml

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:

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

Sequence Diagrams

Basic Sequence

@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

@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

@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

@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

@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

@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

@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

@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

@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

@startuml
start
:Receive Order;
if (Payment Valid?) then (yes)
    :Process Order;
    :Ship Items;
else (no)
    :Notify Customer;
    :Cancel Order;
endif
stop
@enduml

Swimlanes

@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

@startuml
start
:Initialize;
fork
    :Process A;
fork again
    :Process B;
fork again
    :Process C;
end fork
:Merge Results;
stop
@enduml

Component Diagrams

@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

@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

@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

@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

@startuml
!theme cerulean

class MyClass {
    +attribute: String
}
@enduml

Available themes: cerulean , materia , minty , sandstone , sketchy-outline , and more.

C4 Model Diagrams

Context Diagram

@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

@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]

@startuml
[skinparams if needed]

[diagram content]

@enduml

KEY ELEMENTS:

- [Element]: [What it represents]

NOTES:

- [Any additional context]

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Open in GitHubOpen in ClawHub

Related Skills

Related by shared tags or category signals.

Coding

slidev-quick-start

No summary provided by upstream source.

Repository SourceNeeds Review
73-yoanbernabeu
Coding

slidev-styling

No summary provided by upstream source.

Repository SourceNeeds Review
69-yoanbernabeu
Coding

slidev-syntax-guide

No summary provided by upstream source.

Repository SourceNeeds Review
61-yoanbernabeu
Coding

slidev-themes

No summary provided by upstream source.

Repository SourceNeeds Review
58-yoanbernabeu