8.8 KiB
8.8 KiB
【PlantUML】概要及び基本的な使い方
各図形の基本的な書き方
フローチャート図
```plantuml
@startuml
start
:Christmas;
:Go shopping;
if (Let me think) then (One)
:Laptop;
elseif (Two)
:iPhone;
else (Three)
:Car;
endif
stop
@enduml
```
@startuml
start
:Christmas;
:Go shopping;
if (Let me think) then (One)
:Laptop;
elseif (Two)
:iPhone;
else (Three)
:Car;
endif
stop
@enduml
シーケンス図
```plantuml
@startuml
actor User
participant Front
participant Server
User ->> Front : URLをリンクする
Front -->> User : 一覧画面を表示する
User ->> Front : 検索する
loop 対象商品
Front ->> Server : 商品情報を取得する
Server -->> Front : レスポンス
end
Front -->> User : 検索結果を表示する
note right of Front
Product Find\nsequence
end note
@enduml
```
@startuml
actor User
participant Front
participant Server
User ->> Front : URLをリンクする
Front -->> User : 一覧画面を表示する
User ->> Front : 検索する
loop 対象商品
Front ->> Server : 商品情報を取得する
Server -->> Front : レスポンス
end
Front -->> User : 検索結果を表示する
note right of Front
Product Find\nsequence
end note
@enduml
APIのサンプル例
```plantuml
@startuml
participant App
participant API
App ->> API: request
alt OK
API -->> App: 200
else error
API -->> App: 400
end
@enduml
```
クラス図
```plantuml
@startuml
class Animal {
+int age
+String gender
+mate()
}
class Duck {
+String beakColor
+swim()
+quack()
}
Animal <|-- Duck
@enduml
```
@startuml
class Animal {
+int age
+String gender
+mate()
}
class Duck {
+String beakColor
+swim()
+quack()
}
Animal <|-- Duck
@enduml
ER図
データベース設計に特化したツールみたいには細かく設定ができない
- 関係性で1なのか0なのかなどはカーディナリティで表現できない
- 外部キーをfield単位で結びつけれない
## 基本的な構文
```plantuml
@startuml
entity "エンティティ名" as 物理名 {
+ フィールド名 : データ型 <<制約>> -- 論理名（コメント）
}
@enduml
```
リレーションシンボルの意味
||--||: 1対1 (One to One)}o--||: 多対1 (Many to One)o{--||: 1対多 (One to Many)}o--o{: 多対多 (Many to Many)
@startuml
entity "USER" as ユーザー {
+ user_id : int <<PK>> -- ユーザーID
--
name : string -- 名前
email : string -- メールアドレス
}
entity "ORDER" as 注文 {
+ order_id : int <<PK>> -- 注文ID
--
user_id : int <<FK>> -- ユーザーID (FK)
total_price : float -- 合計金額
order_date : date -- 注文日
}
ユーザー ||--o{ 注文 : "places"
@enduml
アーキテクチャ図（簡易的な表現）
```plantuml
@startuml
package "Public" {
package "Private" {
[Server] --> [Database]
}
}
@enduml
```
@startuml
package "Public" {
package "Private" {
[Server] --> [Database]
}
}
@enduml
(図形を読み込む)
https://github.com/davidholsgrove/gcp-icons-for-plantuml/tree/master/dist
```plantuml
@startuml
!define GCPPuml https://raw.githubusercontent.com/davidholsgrove/gcp-icons-for-plantuml/master/dist
!includeurl GCPPuml/GCPCommon.puml
!includeurl GCPPuml/DeveloperTools/all.puml
!includeurl GCPPuml/Storage/CloudStorage.puml
!includeurl GCPPuml/Compute/CloudFunctions.puml
actor "Person" as personAlias
CloudToolsforVisualStudio(desktopAlias, "Label", "Technology", "Optional Description")
CloudStorage(storageAlias, "Label", "Technology", "Optional Description")
CloudFunctions(functionsAlias, "Label", "Function", "Optional Description")
personAlias --> desktopAlias
personAlias --> functionsAlias
desktopAlias --> storageAlias
@enduml
```
@startuml
!define GCPPuml https://raw.githubusercontent.com/davidholsgrove/gcp-icons-for-plantuml/master/dist
!includeurl GCPPuml/GCPCommon.puml
!includeurl GCPPuml/DeveloperTools/all.puml
!includeurl GCPPuml/Storage/CloudStorage.puml
!includeurl GCPPuml/Compute/CloudFunctions.puml
actor "Person" as personAlias
CloudToolsforVisualStudio(desktopAlias, "Label", "Technology", "Optional Description")
CloudStorage(storageAlias, "Label", "Technology", "Optional Description")
CloudFunctions(functionsAlias, "Label", "Function", "Optional Description")
personAlias --> desktopAlias
personAlias --> functionsAlias
desktopAlias --> storageAlias
@enduml
WBS
```plantuml
@startwbs
* work
** work_A
*** 準備
*** 作業
*** リリース
** work_B
*** 準備
*** 作業_1
*** 作業_2
*** リリース
@endwbs
```
@startwbs
* work
** work_A
*** 準備
*** 作業
*** リリース
** work_B
*** 準備
*** 作業_1
*** 作業_2
*** リリース
@endwbs
業務フロー図
```plantuml
@startuml
|__顧客__|
:注文する;
|#AntiqueWhite|__販売部門__|
:在庫を確認する;
:出荷を確認する;
|__出荷部門__|
:出荷する;
fork
:出荷を報告する;
|#AntiqueWhite|__経理部門__|
:請求する;
|__顧客__|
forkagain
:商品を受け取る;
|__顧客__|
end fork
:支払う;
|#AntiqueWhite|__経理部門__|
:入金を確認する;
@endum
```
@startuml
|__顧客__|
:注文する;
|#AntiqueWhite|__販売部門__|
:在庫を確認する;
:出荷を確認する;
|__出荷部門__|
:出荷する;
fork
:出荷を報告する;
|#AntiqueWhite|__経理部門__|
:請求する;
|__顧客__|
forkagain
:商品を受け取る;
|__顧客__|
end fork
:支払う;
|#AntiqueWhite|__経理部門__|
:入金を確認する;
@endum
スキンやスタイルの変更（PlantUML）
PlantUMLではスキン（skinparam）でスタイルを制御します。
@startuml
skinparam backgroundColor #EEEBDC
skinparam handwritten true
actor User
User -> System: Hello
@enduml
全体をグレースケールにする
```plantuml
@startuml
' 全体をグレースケールにする
skinparam monochrome true
```
@startuml
skinparam monochrome true
actor User
User -> System: Hello
@enduml
特定のアクティビティに色を付ける
'色を指定する
#ffccff:処理名;
'グラデーションの設定
#white-ffccff:処理名;
@startuml
start
#ffccff :処理A;
#white-ffccff :処理B;
#aaffaa :処理C;
stop
@enduml
VSCodeでのPlantUMLスニペット設定
- [Ctrl] + [Shift] + [P]を押下
- "Snippets: Configure Snippets" を選択
plantuml.jsonという名前で作成
{
"PlantUML Sequence Diagram": {
"prefix": "plantuml:sequence",
"body": [
"@startuml",
"actor User",
"participant Front",
"participant Server",
"User ->> Front: Click Button",
"Front ->> Server: Request Data",
"Server -->> Front: Return Data",
"Front -->> User: Display Data",
"@enduml"
],
"description": "Create a sequence diagram"
}
}