From 5c9c5ba9e0891e35e5d67b273cf90d8b33648a0a Mon Sep 17 00:00:00 2001 From: "ry.yamafuji" Date: Sun, 23 Mar 2025 03:44:25 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=89=E3=82=AD=E3=83=A5=E3=83=A1=E3=83=B3?= =?UTF-8?q?=E3=83=88=E3=81=AE=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/plantuml.md | 462 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 462 insertions(+) create mode 100644 docs/plantuml.md diff --git a/docs/plantuml.md b/docs/plantuml.md new file mode 100644 index 0000000..b26b0ec --- /dev/null +++ b/docs/plantuml.md @@ -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 <> -- ユーザーID + -- + name : string -- 名前 + email : string -- メールアドレス +} + +entity "ORDER" as 注文 { + + order_id : int <> -- 注文ID + -- + user_id : int <> -- ユーザー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) +