ドキュメントの追加
This commit is contained in:
ry.yamafuji
parent
2a65449959
commit
5c9c5ba9e0
462
docs/plantuml.md
Normal file
462
docs/plantuml.md
Normal file
@ -0,0 +1,462 @@
|
|||||||
|
# 【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)
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user