slidev-plantuml

Slidev での PlantUML

このスキルでは、Slidev で UML 図や技術図を作成するための PlantUML の使用方法を説明します。PlantUML は、Mermaid よりも詳細に制御しながら、標準的な 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 の比較

特徴	Mermaid	PlantUML
構文	よりシンプル	より詳細
UML への準拠	部分的	完全
レンダリング	クライアント側	サーバー側
C4 図	いいえ	はい
スイムレーン	いいえ	はい
カスタマイズ性	限定的	高い

ベストプラクティス

1. PlantUML を使う場面：標準的な UML、C4、複雑な図
2. Mermaid を使う場面：シンプルなフローチャート、手早い可視化
3. skinparams を追加する：プレゼンテーションのテーマに合わせてカスタマイズします
4. 図の焦点を絞る：1 つの図につき 1 つの概念にします
5. 適切な UML 表記を使う：明確さを保つため、標準に従います

出力形式

PlantUML 図を作成するとき：

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

```plantuml
@startuml
[skinparams if needed]

[diagram content]

@enduml

主要な要素：

• [要素]：[表す内容]

注記：

• [追加のコンテキスト]