463 lines
8.8 KiB
Markdown
463 lines
8.8 KiB
Markdown
# 【PlantUML】概要及び基本的な使い方
|
||
|
||
- [【PlantUML】概要及び基本的な使い方](#plantuml概要及び基本的な使い方)
|
||
- [各図形の基本的な書き方](#各図形の基本的な書き方)
|
||
- [フローチャート図](#フローチャート図)
|
||
- [シーケンス図](#シーケンス図)
|
||
- [クラス図](#クラス図)
|
||
- [ER図](#er図)
|
||
- [リレーションシンボルの意味](#リレーションシンボルの意味)
|
||
- [アーキテクチャ図（簡易的な表現）](#アーキテクチャ図簡易的な表現)
|
||
- [WBS](#wbs)
|
||
- [業務フロー図](#業務フロー図)
|
||
- [スキンやスタイルの変更（PlantUML）](#スキンやスタイルの変更plantuml)
|
||
- [全体をグレースケールにする](#全体をグレースケールにする)
|
||
- [特定のアクティビティに色を付ける](#特定のアクティビティに色を付ける)
|
||
- [VSCodeでのPlantUMLスニペット設定](#vscodeでのplantumlスニペット設定)
|
||
- [関連リンク](#関連リンク)
|
||
|
||
|
||
## 各図形の基本的な書き方
|
||
|
||
### フローチャート図
|
||
|
||
````
|
||
```plantuml
|
||
@startuml
|
||
start
|
||
:Christmas;
|
||
:Go shopping;
|
||
if (Let me think) then (One)
|
||
:Laptop;
|
||
elseif (Two)
|
||
:iPhone;
|
||
else (Three)
|
||
:Car;
|
||
endif
|
||
stop
|
||
@enduml
|
||
```
|
||
````
|
||
|
||
```plantuml
|
||
@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
|
||
```
|
||
````
|
||
|
||
```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
|
||
```
|
||
|
||
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
|
||
```
|
||
````
|
||
|
||
```plantuml
|
||
@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)
|
||
|
||
```plantuml
|
||
@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
|
||
```
|
||
````
|
||
|
||
```plantuml
|
||
@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
|
||
```
|
||
````
|
||
|
||
```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
|
||
```
|
||
|
||
|
||
### WBS
|
||
|
||
````
|
||
```plantuml
|
||
@startwbs
|
||
* work
|
||
** work_A
|
||
*** 準備
|
||
*** 作業
|
||
*** リリース
|
||
** work_B
|
||
*** 準備
|
||
*** 作業_1
|
||
*** 作業_2
|
||
*** リリース
|
||
@endwbs
|
||
```
|
||
````
|
||
|
||
|
||
```plantuml
|
||
@startwbs
|
||
* work
|
||
** work_A
|
||
*** 準備
|
||
*** 作業
|
||
*** リリース
|
||
** work_B
|
||
*** 準備
|
||
*** 作業_1
|
||
*** 作業_2
|
||
*** リリース
|
||
@endwbs
|
||
```
|
||
### 業務フロー図
|
||
|
||
````
|
||
```plantuml
|
||
@startuml
|
||
|__顧客__|
|
||
:注文する;
|
||
|
||
|#AntiqueWhite|__販売部門__|
|
||
:在庫を確認する;
|
||
:出荷を確認する;
|
||
|
||
|__出荷部門__|
|
||
:出荷する;
|
||
fork
|
||
:出荷を報告する;
|
||
|
||
|#AntiqueWhite|__経理部門__|
|
||
:請求する;
|
||
|
||
|__顧客__|
|
||
forkagain
|
||
:商品を受け取る;
|
||
|
||
|__顧客__|
|
||
end fork
|
||
:支払う;
|
||
|
||
|#AntiqueWhite|__経理部門__|
|
||
:入金を確認する;
|
||
|
||
@endum
|
||
```
|
||
````
|
||
|
||
```plantuml
|
||
@startuml
|
||
|__顧客__|
|
||
:注文する;
|
||
|
||
|#AntiqueWhite|__販売部門__|
|
||
:在庫を確認する;
|
||
:出荷を確認する;
|
||
|
||
|__出荷部門__|
|
||
:出荷する;
|
||
fork
|
||
:出荷を報告する;
|
||
|
||
|#AntiqueWhite|__経理部門__|
|
||
:請求する;
|
||
|
||
|__顧客__|
|
||
forkagain
|
||
:商品を受け取る;
|
||
|
||
|__顧客__|
|
||
end fork
|
||
:支払う;
|
||
|
||
|#AntiqueWhite|__経理部門__|
|
||
:入金を確認する;
|
||
@endum
|
||
```
|
||
|
||
|
||
## スキンやスタイルの変更（PlantUML）
|
||
|
||
PlantUMLではスキン（skinparam）でスタイルを制御します。
|
||
|
||
```plantuml
|
||
@startuml
|
||
skinparam backgroundColor #EEEBDC
|
||
skinparam handwritten true
|
||
|
||
actor User
|
||
User -> System: Hello
|
||
@enduml
|
||
```
|
||
|
||
### 全体をグレースケールにする
|
||
|
||
````
|
||
```plantuml
|
||
@startuml
|
||
' 全体をグレースケールにする
|
||
skinparam monochrome true
|
||
```
|
||
````
|
||
|
||
```plantuml
|
||
@startuml
|
||
skinparam monochrome true
|
||
|
||
actor User
|
||
User -> System: Hello
|
||
@enduml
|
||
```
|
||
|
||
### 特定のアクティビティに色を付ける
|
||
|
||
```
|
||
'色を指定する
|
||
#ffccff:処理名;
|
||
|
||
'グラデーションの設定
|
||
#white-ffccff:処理名;
|
||
```
|
||
|
||
```plantuml
|
||
@startuml
|
||
|
||
start
|
||
#ffccff :処理A;
|
||
#white-ffccff :処理B;
|
||
#aaffaa :処理C;
|
||
stop
|
||
@enduml
|
||
```
|
||
|
||
|
||
|
||
## VSCodeでのPlantUMLスニペット設定
|
||
|
||
1. [Ctrl] + [Shift] + [P]を押下
|
||
2. "Snippets: Configure Snippets" を選択
|
||
3. `plantuml.json`という名前で作成
|
||
|
||
```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"
|
||
}
|
||
}
|
||
```
|
||
|
||
## 関連リンク
|
||
- [PlantUML 公式サイト](https://plantuml.com/)
|
||
- [PlantUML Online Editor](https://www.planttext.com/)
|
||
- [Visual Studio Code Extension](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml)
|
||
|