【開発】【設計】PlantUMLチートシート - j-komatsu/myCheatSheet GitHub Wiki
PlantUML ユースケース チートシート
インデックス
- シーケンス図（Sequence Diagrams）
- クラス図（Class Diagrams）
- ユースケース図（Use Case Diagrams）
- アクティビティ図（Activity Diagrams）
- ステート図（State Diagrams）
- コンポーネント図（Component Diagrams）
- オブジェクト図（Object Diagrams）
- デプロイメント図（Deployment Diagrams）
- タイミング図（Timing Diagrams）
- ガントチャート（Gantt Charts）
- ワイヤフレーム図（Wireframe Diagrams）
- マインドマップ（Mindmaps）
- ER図（Entity-Relationship Diagrams）
- PlantUMLの設定とカスタマイズ（Settings and Customizations）
詳細
1. シーケンス図（Sequence Diagrams）
コマンドとユースケース系
シーケンス図は、オブジェクト間のメッセージ交換を視覚化します。
シチュエーション
API通信のフローを可視化したい場合に便利です。
サンプル1（シンプルバージョン）
@startuml
Alice -> Bob: Hello
Bob --> Alice: Hi
@enduml
サンプル2（システム構築を想定したバージョン）
@startuml
actor User
participant "Web Server" as WS
participant "Database" as DB
User -> WS: Request Data
WS -> DB: Query Data
DB --> WS: Return Data
WS --> User: Display Data
@enduml
2. クラス図（Class Diagrams）
コマンドとユースケース系
クラス図は、システムのクラス構造とその関係を視覚化します。
シチュエーション
オブジェクト指向設計でのクラス設計を表現する際に役立ちます。
サンプル1（シンプルバージョン）
@startuml
class Animal {
+name: String
+makeSound(): void
}
@enduml
サンプル2（システム構築を想定したバージョン）
@startuml
class Animal {
+name: String
+makeSound(): void
}
class Dog extends Animal {
+breed: String
+bark(): void
}
class Cat extends Animal {
+color: String
+meow(): void
}
@enduml
3. ユースケース図（Use Case Diagrams）
コマンドとユースケース系
ユースケース図は、システムとアクターの相互作用を視覚化します。
シチュエーション
システムの要求仕様をクライアントに説明する際に有効です。
サンプル1（シンプルバージョン）
@startuml
actor User
usecase "Login" as UC1
User -> UC1
@enduml
サンプル2（システム構築を想定したバージョン）
@startuml
actor User
actor Admin
usecase "View Data" as UC1
usecase "Edit Data" as UC2
User -> UC1
Admin -> UC1
Admin -> UC2
@enduml
4. アクティビティ図（Activity Diagrams）
コマンドとユースケース系
アクティビティ図は、フローやプロセスを視覚化します。
シチュエーション
業務フローやアルゴリズムの説明に最適です。
サンプル1（シンプルバージョン）
@startuml
start
:開始;
if (条件A?) then (yes)
:処理A;
else (no)
:処理B;
endif
stop
@enduml
サンプル2（システム構築を想定したバージョン）
@startuml
start
:ユーザー認証;
if (認証成功?) then (yes)
:ダッシュボードを表示;
else (no)
:エラーメッセージを表示;
endif
:終了;
stop
@enduml
5. ステート図（State Diagrams）
コマンドとユースケース系
ステート図は、オブジェクトの状態とその遷移を表現します。
シチュエーション
システムの状態遷移を可視化したい場合に有用です。
サンプル1（シンプルバージョン）
@startuml
[*] --> 初期状態
初期状態 --> 動作中 : イベント1
動作中 --> 停止 : イベント2
停止 --> [*]
@enduml
サンプル2（システム構築を想定したバージョン）
@startuml
[*] --> Idle
Idle --> Processing : Start
Processing --> Idle : Complete
Processing --> Error : Fail
Error --> [*]
@enduml
6. コンポーネント図（Component Diagrams）
コマンドとユースケース系
コンポーネント図は、システムの構造や依存関係を示します。
シチュエーション
モジュール間の関係や依存を説明する際に適しています。
サンプル1（シンプルバージョン）
@startuml
[Client] --> [Server]
@enduml
サンプル2（システム構築を想定したバージョン）
@startuml
[User Interface] --> [Application Layer]
[Application Layer] --> [Database Layer]
[Application Layer] --> [External API]
@enduml
7. オブジェクト図（Object Diagrams）
コマンドとユースケース系
オブジェクト図は、クラスとそのインスタンスの関係を表現します。
シチュエーション
具体的なデータモデルを説明する際に便利です。
サンプル1（シンプルバージョン）
@startuml
object User {
name = "Alice"
age = 30
}
@enduml
サンプル2（システム構築を想定したバージョン）
@startuml
object User {
name = "Bob"
email = "[email protected]"
}
object Order {
id = 1234
total = 49.99
}
User --> Order : places
@enduml
8. デプロイメント図（Deployment Diagrams）
コマンドとユースケース系
デプロイメント図は、システムの物理構成を示します。
シチュエーション
サーバーやノードの配置を説明する際に役立ちます。
サンプル1（シンプルバージョン）
@startuml
node "Web Server" {
[App]
}
@enduml
サンプル2（システム構築を想定したバージョン）
@startuml
node "Web Server" {
[Frontend Application]
}
node "Database Server" {
[Database]
}
"Frontend Application" --> "Database"
@enduml
9. タイミング図（Timing Diagrams）
コマンドとユースケース系
タイミング図は、オブジェクトのライフラインと状態の変化を視覚化します。
シチュエーション
時間に依存するシステムの挙動を示すのに適しています。
サンプル1（シンプルバージョン）
@startuml
robust "Object" as A
@0
A is Active
@10
A is Inactive
@enduml
サンプル2（システム構築を想定したバージョン）
@startuml
robust "Client" as C
robust "Server" as S
@0
C is Idle
S is Idle
@5
C is Sending
S is Receiving
@15
C is Waiting
S is Processing
@25
C is Idle
S is Idle
@enduml
10. ガントチャート（Gantt Charts）
コマンドとユースケース系
ガントチャートは、プロジェクトのスケジュールや進捗を視覚化します。
シチュエーション
プロジェクト計画を簡潔に表現する際に便利です。
サンプル1（シンプルバージョン）
@startuml
[Task 1] lasts 5 days
[Task 2] lasts 3 days
@enduml
サンプル2（システム構築を想定したバージョン）
@startuml
[Design] lasts 5 days
[Development] starts after [Design] and lasts 10 days
[Testing] starts after [Development] and lasts 4 days
@enduml
11. ワイヤフレーム図（Wireframe Diagrams）
コマンドとユースケース系
ワイヤフレーム図は、UIデザインや画面レイアウトを視覚化します。
シチュエーション
アプリケーションの画面設計を初期段階で共有する際に役立ちます。
サンプル1（シンプルバージョン）
@startuml
frame "Login Screen" {
label "Username"
input
label "Password"
input
button "Login"
}
@enduml
サンプル2（システム構築を想定したバージョン）
@startuml
frame "Main Dashboard" {
label "Welcome, User!"
rectangle "Graph" {
rectangle "Chart" as Chart1
rectangle "Chart" as Chart2
}
button "Logout"
}
@enduml
12. マインドマップ（Mindmaps）
コマンドとユースケース系
マインドマップは、アイデアや情報を階層的に整理します。
シチュエーション
ブレインストーミングや情報整理に便利です。
サンプル1（シンプルバージョン）
@startmindmap
* Root
** Idea 1
** Idea 2
*** Sub-idea 2.1
@endmindmap
サンプル2（システム構築を想定したバージョン）
@startmindmap
* Project
** Requirements
*** Functional
*** Non-functional
** Design
*** UI Design
*** System Architecture
** Development
@endmindmap
13. ER図（Entity-Relationship Diagrams）
コマンドとユースケース系
ER図は、データベースのエンティティとその関係を表現します。
シチュエーション
データベース設計時に使用します。
サンプル1（シンプルバージョン）
@startuml
entity User {
*id : INT
name : VARCHAR
}
entity Order {
*id : INT
amount : DECIMAL
}
User ||--o{ Order : places
@enduml
サンプル2（システム構築を想定したバージョン）
@startuml
entity User {
*id : INT
name : VARCHAR
email : VARCHAR
}
entity Product {
*id : INT
name : VARCHAR
price : DECIMAL
}
entity Order {
*id : INT
user_id : INT
product_id : INT
quantity : INT
}
User ||--o{ Order : places
Product ||--o{ Order : contains
@enduml
14. PlantUMLの設定とカスタマイズ（Settings and Customizations）
コマンドとユースケース系
PlantUMLの設定やスタイルをカスタマイズすることで、図の見た目を調整できます。
シチュエーション
図のテーマやスタイルを変更したい場合に使用します。
サンプル1（シンプルバージョン）
@startuml
skinparam backgroundColor LightYellow
skinparam classFontColor DarkBlue
class Example {
+attribute: type
+method()
}
@enduml
サンプル2（システム構築を想定したバージョン）
@startuml
skinparam monochrome true
skinparam shadowing false
actor User
rectangle "System" {
User --> (Feature 1)
User --> (Feature 2)
}
@enduml