PlantUML記法と書き方 このメモでは、PlantUMLの概要から、クラス図・シーケンス図・ユースケース図など、代表的な11種類のUML図を具体的なサンプルコード付きで解説します。PlantUMLの使い方・記述方法を学びたい初心者の方におすすめです。 # 目次 - [PlantUMLとは](#plantumlとは) - [PlantUMLはいつ使えばいい？](#plantumlはいつ使えばいい) - [PlantUMLの主要な図と書き方](#plantumlの主要な図と書き方) - [1. クラス図](#1-クラス図) - [2. シーケンス図](#2-シーケンス図) - [3. ユースケース図](#3-ユースケース図) - [4. アクティビティ図](#4-アクティビティ図) - [5. 状態遷移図（ステートマシン図）](#5-状態遷移図ステートマシン図) - [6. コンポーネント図](#6-コンポーネント図) - [7. ER図（エンティティ関連図）](#7-er図エンティティ関連図) - [8. マインドマップ](#8-マインドマップ) - [9. ガントチャート](#9-ガントチャート) - [10. ワイヤーフレーム（Salt）](#10-ワイヤーフレームsalt) - [11. ネットワーク図](#11-ネットワーク図) - [まとめ](#まとめ) ## PlantUMLとは PlantUMLは、テキスト記述からUML（Unified Modeling Language）図を自動生成するオープンソースのツールです。2009年に初めてリリースされ、ソフトウェア設計や要件定義の視覚化に広く使用されています。 ## PlantUMLはいつ使えばいい？ PlantUMLは、ソフトウェア開発の様々な段階で活用できます。特に情報共有の観点から、以下のような場面で大きなメリットがあります。 1. **要件定義・設計段階** - システムの全体像やユースケース図、クラス図の作成に使用します。 - 視覚的な表現で仕様を明確化でき、クライアントとの認識の相違を最小限に抑えられます。 2. **開発中のコミュニケーション** - シーケンス図やアクティビティ図を用いて、システムの動作や複雑な処理フローを説明できます。 - テキストベースで記述するため、打ち合わせ中でもリアルタイムで図を修正・共有でき、手戻りを減らせます。 3. **ドキュメンテーション** - 技術文書やマニュアルに図を挿入し、コードと図を同期させやすくします。 - Markdownなどと連携させ、自動的に図を挿入した文書を作成できます。 4. **アイデアの素早い可視化** - 会議やブレインストーミング時に、アイデアを迅速に図示します。 - テキストベースのため、変更や共有が容易で、チームの生産性向上につながります。 5. **リモートチームでの共同作業** - DocBaseで設計図を共有することで、チーム全員が同じ情報にアクセスできます。 - テキストベースのため、変更履歴の追跡が簡単です。 6. **非エンジニアとの情報共有** - 営業など非エンジニアも含めたチーム全体で情報共有ができます。 - 視覚的な資料を通じて、技術的な内容をわかりやすく伝えられます。 これらのメリットにより、PlantUMLを使用することで、チーム内のコミュニケーションが円滑になり、プロジェクトの効率と品質が向上します。 ## PlantUMLの主要な図と書き方 PlantUMLでは、特定の記法を用いてUML図を記述します。以下に主要な11種類の図の例を示します。 ### 1. クラス図 クラス間の関係や構造を表現する図です。 ```uml @startuml class Car { - String model - int year + void start() + void stop() } class Driver { - String name + void drive(car) } Driver --> Car : drives @enduml ``` ~~~ ```uml @startuml class Car { - String model - int year + void start() + void stop() } class Driver { - String name + void drive(car) } Driver --> Car : drives @enduml ``` ~~~ クラス図の関係表現: - `<|--`: 継承（拡張） - `*--`: コンポジション - `o--`: 集約 - `-->`: 関連 - `--`: リンク（実線） - `..>`: 依存 - `..|>`: 実装 - `..`: リンク（点線） ### 2. シーケンス図 オブジェクト間のメッセージのやり取りを時系列で表現する図です。 ```uml @startuml actor User participant "Web Browser" as Browser participant "Web Server" as Server database Database User -> Browser : 検索クエリ入力 activate Browser Browser -> Server : HTTP GET /search?q=keyword activate Server Server -> Database : SELECT * FROM items WHERE name LIKE '%keyword%' activate Database Database --> Server : 検索結果 deactivate Database alt 結果あり Server --> Browser : 200 OK (結果リスト) Browser --> User : 検索結果を表示 else 結果なし Server --> Browser : 200 OK (空リスト) Browser --> User : "結果が見つかりません"を表示 end deactivate Server deactivate Browser @enduml ``` ~~~ ```uml @startuml actor User participant "Web Browser" as Browser participant "Web Server" as Server database Database User -> Browser : 検索クエリ入力 activate Browser Browser -> Server : HTTP GET /search?q=keyword activate Server Server -> Database : SELECT * FROM items WHERE name LIKE '%keyword%' activate Database Database --> Server : 検索結果 deactivate Database alt 結果あり Server --> Browser : 200 OK (結果リスト) Browser --> User : 検索結果を表示 else 結果なし Server --> Browser : 200 OK (空リスト) Browser --> User : "結果が見つかりません"を表示 end deactivate Server deactivate Browser @enduml ``` ~~~ ### 3. ユースケース図 システムの機能とユーザーの関係を表現する図です。 ```uml @startuml left to right direction actor 利用者 as User actor 管理者 as Admin rectangle 図書館管理システム { User -- (本を検索する) User -- (本を借りる) User -- (本を返却する) (システム管理) -- Admin (蔵書管理) -- Admin (本を借りる) .> (利用者認証) : <> (本を返却する) .> (利用者認証) : <> (システム管理) .> (管理者認証) : <> } @enduml ``` ~~~ ```uml @startuml left to right direction actor 利用者 as User actor 管理者 as Admin rectangle 図書館管理システム { User -- (本を検索する) User -- (本を借りる) User -- (本を返却する) (システム管理) -- Admin (蔵書管理) -- Admin (本を借りる) .> (利用者認証) : <> (本を返却する) .> (利用者認証) : <> (システム管理) .> (管理者認証) : <> } @enduml ``` ~~~ ### 4. アクティビティ図 処理の流れやワークフローを表現する図です。 ```uml @startuml start :ユーザーがログイン; if (認証成功?) then (yes) :ダッシュボードを表示; fork :通知を確認; fork again :最新のデータを読み込む; end fork :タスクを選択; else (no) :ログインエラーを表示; :再試行を促す; stop endif :タスクを実行; :ログアウト; stop @enduml ``` ~~~ ```uml @startuml start :ユーザーがログイン; if (認証成功?) then (yes) :ダッシュボードを表示; fork :通知を確認; fork again :最新のデータを読み込む; end fork :タスクを選択; else (no) :ログインエラーを表示; :再試行を促す; stop endif :タスクを実行; :ログアウト; stop @enduml ``` ~~~ ### 5. 状態遷移図（ステートマシン図） システムやオブジェクトの状態の変化を表現する図です。 ```uml @startuml [*] --> 待機中 待機中 --> 処理中 : イベント発生 処理中 --> 待機中 : 処理完了 処理中 --> エラー : エラー発生 エラー --> 待機中 : リセット 待機中 --> [*] : 終了 エラー --> [*] : 強制終了 state 処理中 { [*] --> データ読込 データ読込 --> データ処理 データ処理 --> データ保存 データ保存 --> [*] } @enduml ``` ~~~ ```uml @startuml [*] --> 待機中 待機中 --> 処理中 : イベント発生 処理中 --> 待機中 : 処理完了 処理中 --> エラー : エラー発生 エラー --> 待機中 : リセット 待機中 --> [*] : 終了 エラー --> [*] : 強制終了 state 処理中 { [*] --> データ読込 データ読込 --> データ処理 データ処理 --> データ保存 データ保存 --> [*] } @enduml ``` ~~~ ### 6. コンポーネント図 システムのコンポーネント間の関係を表現する図です。 ```uml @startuml package "フロントエンド" { [Webブラウザ] as WebBrowser [UIコンポーネント] as UI } package "バックエンド" { [APIサーバー] as API [認証サービス] as Auth [データ処理サービス] as DataProcessor } database "データベース" { [ユーザーDB] as UserDB [コンテンツDB] as ContentDB } WebBrowser --> UI : 表示 UI --> API : リクエスト送信 API --> Auth : 認証要求 API --> DataProcessor : データ要求 Auth --> UserDB : 認証情報確認 DataProcessor --> ContentDB : データ取得 @enduml ``` ~~~ ```uml @startuml package "フロントエンド" { [Webブラウザ] as WebBrowser [UIコンポーネント] as UI } package "バックエンド" { [APIサーバー] as API [認証サービス] as Auth [データ処理サービス] as DataProcessor } database "データベース" { [ユーザーDB] as UserDB [コンテンツDB] as ContentDB } WebBrowser --> UI : 表示 UI --> API : リクエスト送信 API --> Auth : 認証要求 API --> DataProcessor : データ要求 Auth --> UserDB : 認証情報確認 DataProcessor --> ContentDB : データ取得 @enduml ``` ~~~ ### 7. ER図（エンティティ関連図） データベースのテーブル間の関係を表現する図です。 ```uml @startuml entity "ユーザー" as users { * ユーザーID : integer <> -- * ユーザー名 : varchar * Email : varchar パスワードハッシュ : varchar 登録日時 : datetime } entity "投稿" as posts { * 投稿ID : integer <> -- * ユーザーID : integer <> * タイトル : varchar * 内容 : text 作成日時 : datetime 更新日時 : datetime } entity "コメント" as comments { * コメントID : integer <> -- * 投稿ID : integer <> * ユーザーID : integer <> * 内容 : text 作成日時 : datetime } users ||--o{ posts posts ||--o{ comments users ||--o{ comments @enduml ``` ~~~ ```uml @startuml entity "ユーザー" as users { * ユーザーID : integer <> -- * ユーザー名 : varchar * Email : varchar パスワードハッシュ : varchar 登録日時 : datetime } entity "投稿" as posts { * 投稿ID : integer <> -- * ユーザーID : integer <> * タイトル : varchar * 内容 : text 作成日時 : datetime 更新日時 : datetime } entity "コメント" as comments { * コメントID : integer <> -- * 投稿ID : integer <> * ユーザーID : integer <> * 内容 : text 作成日時 : datetime } users ||--o{ posts posts ||--o{ comments users ||--o{ comments @enduml ``` ~~~ ### 8. マインドマップ アイデアや概念を階層的に整理する図です。 ```uml @startmindmap * 自動車の分類 ** エンジンの種類による分類 *** ガソリンエンジン *** ディーゼルエンジン *** ハイブリッドエンジン *** 電気エンジン ** 体形による分類 *** セダン *** ハッチバック *** SUV ** 用途による分類 *** 個人用 *** 商用 @endmindmap ``` ~~~ ```uml @startmindmap * 自動車の分類 ** エンジンの種類による分類 *** ガソリンエンジン *** ディーゼルエンジン *** ハイブリッドエンジン *** 電気エンジン ** 体形による分類 *** セダン *** ハッチバック *** SUV ** 用途による分類 *** 個人用 *** 商用 @endmindmap ``` ~~~ ### 9. ガントチャート プロジェクトのスケジュールを表現する図です。 ```uml @startgantt project starts 2025-03-01 saturday are closed sunday are closed -- 要件定義フェーズ -- [要件ヒアリング] lasts 3 days [要件定義書作成] lasts 5 days [要件定義書作成] starts at [要件ヒアリング]'s end -- 設計フェーズ -- [基本設計] lasts 10 days [基本設計] starts at [要件定義書作成]'s end [詳細設計] lasts 15 days [詳細設計] starts at [基本設計]'s end -- 開発フェーズ -- [フロントエンド開発] lasts 20 days [バックエンド開発] lasts 25 days [フロントエンド開発] starts at [詳細設計]'s end [バックエンド開発] starts at [詳細設計]'s end -- テストフェーズ -- [単体テスト] lasts 5 days [単体テスト] starts at [バックエンド開発]'s end @endgantt ``` ~~~ ```uml @startgantt project starts 2025-03-01 saturday are closed sunday are closed -- 要件定義フェーズ -- [要件ヒアリング] lasts 3 days [要件定義書作成] lasts 5 days [要件定義書作成] starts at [要件ヒアリング]'s end -- 設計フェーズ -- [基本設計] lasts 10 days [基本設計] starts at [要件定義書作成]'s end [詳細設計] lasts 15 days [詳細設計] starts at [基本設計]'s end -- 開発フェーズ -- [フロントエンド開発] lasts 20 days [バックエンド開発] lasts 25 days [フロントエンド開発] starts at [詳細設計]'s end [バックエンド開発] starts at [詳細設計]'s end -- テストフェーズ -- [単体テスト] lasts 5 days [単体テスト] starts at [バックエンド開発]'s end @endgantt ``` ~~~ ### 10. ワイヤーフレーム（Salt） UIのモックアップを表現する図です。 ```uml @startsalt {+ ユーザー管理画面 { ユーザーID | "ID001" 氏名 | "山田太郎" メールアドレス | "yamada@example.com" 権限 | ^管理者^一般ユーザー^閲覧者^ } {[保存] [キャンセル]} {^"ユーザー一覧" {# # | ID | 氏名 | メールアドレス | 権限 1 | ID001 | 山田太郎 | yamada@example.com | 管理者 2 | ID002 | 鈴木花子 | suzuki@example.com | 一般ユーザー 3 | ID003 | 佐藤次郎 | sato@example.com | 閲覧者 } } } @endsalt ``` ~~~ ```uml @startsalt {+ ユーザー管理画面 { ユーザーID | "ID001" 氏名 | "山田太郎" メールアドレス | "yamada@example.com" 権限 | ^管理者^一般ユーザー^閲覧者^ } {[保存] [キャンセル]} {^"ユーザー一覧" {# # | ID | 氏名 | メールアドレス | 権限 1 | ID001 | 山田太郎 | yamada@example.com | 管理者 2 | ID002 | 鈴木花子 | suzuki@example.com | 一般ユーザー 3 | ID003 | 佐藤次郎 | sato@example.com | 閲覧者 } } } @endsalt ``` ~~~ ### 11. ネットワーク図 ```uml @startuml nwdiag { network DMZ { address = "192.168.1.0/24" web01 [address = "192.168.1.10"] web02 [address = "192.168.1.11"] proxy [address = "192.168.1.1"] } network 内部ネットワーク { address = "10.0.0.0/24" proxy [address = "10.0.0.1"] app01 [address = "10.0.0.10"] app02 [address = "10.0.0.11"] db01 [address = "10.0.0.20"] db02 [address = "10.0.0.21"] } network 管理ネットワーク { address = "10.1.0.0/24" app01 [address = "10.1.0.10"] app02 [address = "10.1.0.11"] db01 [address = "10.1.0.20"] db02 [address = "10.1.0.21"] mgmt [address = "10.1.0.1"] } } @enduml ``` ~~~ ```uml @startuml nwdiag { network DMZ { address = "192.168.1.0/24" web01 [address = "192.168.1.10"] web02 [address = "192.168.1.11"] proxy [address = "192.168.1.1"] } network 内部ネットワーク { address = "10.0.0.0/24" proxy [address = "10.0.0.1"] app01 [address = "10.0.0.10"] app02 [address = "10.0.0.11"] db01 [address = "10.0.0.20"] db02 [address = "10.0.0.21"] } network 管理ネットワーク { address = "10.1.0.0/24" app01 [address = "10.1.0.10"] app02 [address = "10.1.0.11"] db01 [address = "10.1.0.20"] db02 [address = "10.1.0.21"] mgmt [address = "10.1.0.1"] } } @enduml ``` ~~~ ## まとめ PlantUMLは、テキストベースでUML図やその他のダイアグラムを手軽に作成できる強力なツールです。DocBaseと組み合わせることで、チームメンバー間での設計やアイデアの共有がスムーズになり、ドキュメントの作成・更新が効率化されます。また、プロジェクトの進捗状況や課題を視覚的に把握し、チーム全体の意識共有が促進されます。 この記事で紹介した11種類の図は、ソフトウェア開発のさまざまな側面をカバーしており、設計からプロジェクト管理、UIデザインまで幅広く活用できます。テキストベースであるため、変更履歴の追跡やバージョン管理との連携もスムーズです。 これにより、チームの生産性が向上し、メンバー間の情報共有がより活発になります :+1: ## 関連 - [PlantUML公式サイト](https://plantuml.com/) - [Markdown記法と書き方](/posts/13697) - [Mermaid (マーメイド) 記法と書き方](/posts/3719897) [^1]: 酢飯の上になんか色々載せた食べ物 --- ### マニュアル作成、ナレッジ共有なら「DocBase」 [![スクリーンショット 2024-05-27 16.46.03.png](https://image.docbase.io/uploads/d272e20f-7b7c-4d86-9c09-bb2c46badd78.png =WxH)](https://docbase.io/) 「情報や知識の共有がうまくいかない、特定の人に偏ってしまう」 「知識の再利用がうまくできれば、強い組織にできるのではないか？」 DocBaseはこのような弊社の課題から生まれたサービスです。 情報やナレッジの共有だけでなく、マニュアル整備が進まないのも、次のような「共有するための情報を作る難しさ」があります。 - 正しく立派なドキュメントを作らなくてはいけない - 情報が多すぎてまとめる時間がない DocBaseでは「正しく立派なドキュメントを作る」ではなく、「**小さく始めて、情報を育てて、チームを育てる**」をコンセプトにメモという小さな単位での情報共有、複数のメモを体系的にまとめて情報を育てる、複数人で同時にメモを作るということができるようになっています。 ### DocBaseの特長 - **3つの編集モード**で誰でも使える、爆速で共有できる新エディター - マニュアル作成に便利な**画像に矢印やテキストを簡単に配置**できるペイントモード - **OfficeファイルやPDFの中身も全文検索**できる強力な検索機能 - **ワンクリックで他のドキュメントを参照**できるから情報の再利用が簡単 - みんなでメモを作り上げる強力な**同時編集機能** - シングルサインオンや2段階認証、操作履歴、ISMS取得など**安心のセキュリティ** - **ChatGPTやClaudeなど様々なAIアプリとの連携機能**でナレッジ共有を簡単自動化 👉 [AIアプリとの連携機能](https://help.docbase.io/posts/3919854) 👉 [その他、豊富な機能](https://docbase.io/features) ![feature.jpg](https://image.docbase.io/uploads/afbb63ce-64a7-4575-897b-d71c2e8e704b.jpg =WxH) [![btn\_docbase\_banner.png](https://image.docbase.io/uploads/f8f94aff-8135-4ce3-be7b-3ff1ca3796a5.png =300x86)](https://docbase.io/teams/new)　[![btn\_docs\_dl\_banner.png](https://image.docbase.io/uploads/9f569fd5-5a38-4a64-901b-20c64aba907d.png =300x86)](https://docbase.io/document_requests/new)