ドキュメントの追加
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