# 【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)