PlantUMLでどのような図を描くことができますか？（完全ガイド）

@startuml
  
title ホテル管理システム

' インターフェースを定義
interface IReservable {
    + makeReservation(customer: Customer, dates: DateRange): boolean
    + cancelReservation(reservationId: String): boolean
    + checkAvailability(date: Date): boolean
}

interface IPayable {
    + processPayment(amount: double): boolean
    + issueRefund(reservationId: String): boolean
    + getPaymentStatus(): String
}

' 抽象クラスを定義
abstract class Person {
    - id: String
    - name: String
    - email: String
    - phone: String
    + getId(): String
    + getName(): String
    + getContactInfo(): String
    + updateContactInfo(info: String): void
}

' 実装クラスを定義
class Customer {
    - loyaltyPoints: int
    - totalStays: int
    - preferences: List
    + earnLoyaltyPoints(stayCost: double): void
    + redeemLoyaltyPoints(points: int): boolean
    + getLoyaltyTier(): String
    + addPreference(preference: String): void
}

class Room {
    - roomNumber: String
    - roomType: RoomType
    - capacity: int
    - pricePerNight: double
    - amenities: List
    - isAvailable: boolean
    + bookRoom(customer: Customer, dates: DateRange): boolean
    + releaseRoom(): void
    + getPrice(customer: Customer): double
    + addAmenity(amenity: String): void
    + getRoomStatus(): String
}

class Reservation {
    - reservationId: String
    - checkInDate: Date
    - checkOutDate: Date
    - totalPrice: double
    - status: ReservationStatus
    - specialRequests: String
    + calculateTotalPrice(): double
    + confirmReservation(): void
    + checkIn(): void
    + checkOut(): boolean
    + updateDates(newCheckIn: Date, newCheckOut: Date): boolean
    + getDuration(): int
}

' 列挙型
enum RoomType {
    STANDARD
    DELUXE
    SUITE
    PRESIDENTIAL
}

' 列挙型
enum ReservationStatus {
    PENDING
    CONFIRMED
    CHECKED_IN
    CHECKED_OUT
    CANCELLED
}

' 関係性
' インターフェースの実装（破線と三角形）
IReservable <|.. Reservation : 実装
IPayable <|.. Reservation : 実装

' 抽象継承（実線と三角形）
Person <|-- Customer : 拡張

' 合成（実線のダイアモンド） - RoomはReservationの一部
Reservation *-- "1..*" Room : 含む >

' 関連（単純な実線）と多重度
Customer "1" -- "0..*" Reservation : 作成 >

' 依存（破線矢印） - CustomerはRoomTypeに依存
Customer ..> RoomType : ロイヤルティ層はこれに基づく >

' カスタムラベル付き関連
Reservation "1" --o "1" Customer : 予約された >

' 抽象クラスによるインターフェースの実現（オプションの追加接続）
IReservable <|.. Room : 実装

@enduml

@startuml
title Webアプリケーションコンポーネント図

package "クライアント層" {
    [Webブラウザ] as Browser
    [モバイルアプリ] as Mobile
}

package "アプリケーションサーバー" {
    [APIゲートウェイ] as Gateway
    [ユーザー管理サービス] as UserService
    [注文管理サービス] as OrderService
    [支払いサービス] as PaymentService
}

package "データベース層" {
    database "ユーザーDB" as UserDB
    database "注文DB" as OrderDB
}

package "サードパーティサービス" {
    [Stripe API] as Stripe
}

' 接続
Browser --> Gateway : HTTP / REST
Mobile --> Gateway : HTTP / REST

Gateway --> UserService : 内部REST
Gateway --> OrderService : 内部REST

UserService --> UserDB : 読み取り/書き込み
OrderService --> OrderDB : 読み取り/書き込み
OrderService --> PaymentService : 支払い処理

PaymentService --> Stripe : HTTPS / API
@enduml

@startuml
title デプロイメント図 - 3層構造Webアプリケーション

skinparam componentStyle rectangle

node "クライアントデスクトップ" as clientNode {
  node "Webブラウザ" as browser {
    artifact "Webアプリフロントエンド (HTML/JS)" as frontend
  }
}

node "アプリケーションサーバー" as appServerNode {
  node "Servletコンテナ (Tomcat)" as tomcat {
    artifact "バックエンドAPI (WARファイル)" as appApi
  }
}

node "データベースサーバー" as databaseNode {
  database "PostgreSQL" as postgres {
    artifact "アプリケーションデータベーススキーマ" as dbSchema
  }
}

clientNode -- appServerNode : HTTPS (ポート443)
appServerNode -- databaseNode : JDBC (ポート5432)

@enduml

@startuml
title ユーザー認証フロー

actor "ユーザー" as user
participant "Webアプリ" as app
participant "認証API" as auth
database "ユーザーDB" as db

user -> app : 認証情報入力
activate app

app -> auth : POST /api/v1/login
activate auth

auth -> db : メールアドレスでユーザーを照会
activate db
db --> auth : ユーザー記録とハッシュを返却
deactivate db

alt 有効な認証情報
    auth -> auth : パスワードを検証しJWTを生成
    auth --> app : 200 OK (トークンとプロファイル)
    app --> user : ダッシュボードにリダイレクト
else 無効な認証情報
    auth --> app : 401 Unauthorized (エラー)
    app --> user : 「無効な認証情報」を表示
end

deactivate auth
deactivate app
@enduml

@startuml
title オンラインショッピングシステム - ユースケース図

left to right direction

actor カスタマー
actor "登録済みカスタマー" as RegCustomer
actor "決済ゲートウェイ" as PaymentSystem

カスタマー <|-- RegCustomer rectangle "ECシステム" { usecase "製品を閲覧" as UC_Browse usecase "アイテムを検索" as UC_Search usecase "カートを管理" as UC_Cart usecase "注文をチェックアウト" as UC_Checkout usecase "割引クーポンを適用" as UC_Coupon usecase "決済を処理" as UC_Payment usecase "注文履歴を表示" as UC_History } カスタマー --> UC_Browse
カスタマー --> UC_Search
カスタマー --> UC_Cart
カスタマー --> UC_Checkout

RegCustomer --> UC_History

UC_Checkout .> UC_Payment : <>
UC_Checkout <.. UC_Coupon : <>

UC_Payment -- PaymentSystem
@enduml

@startuml
title 注文履行プロセス

|顧客|
start
:注文を提出;
:支払い情報を送信;

|注文システム|
if (支払いは有効か?) then (はい)
  :在庫を予約;
  
  ' 並行処理の分割
  fork
    |倉庫|
    :棚から商品をピック;
    :商品を箱に詰める;
  fork again
    |請求|
    :請求書PDFを生成;
    :支払い方法に請求;
  end fork

  |配送|
  :配送ラベルを付ける;
  :配達業者に引き渡す;
  
  |顧客|
  :商品を受け取る;
  stop
else (いいえ)
  |注文システム|
  :支払い失敗通知を送信;
  |顧客|
  :支払い方法を更新;
  stop
endif
@enduml

@startuml
title インターネット通販注文ライフサイクル

[*] --> Pending : 注文が提出された

state Pending {
  [*] --> AwaitingPayment
  AwaitingPayment --> PaymentFailed : 支払いエラー
  PaymentFailed --> AwaitingPayment : 支払いを再試行
}

Pending --> Processing : 支払いが承認された
Pending --> Cancelled : ユーザーが注文をキャンセル

state Processing {
  [*] --> Packing
  Packing --> ReadyForShipment : 品質検査通過
}

Processing --> Shipped : 配送業者に引き渡された
Shipped --> Delivered : 配送確認済み
Shipped --> Returned : 配送失敗／拒否

Delivered --> [*]
Cancelled --> [*]
Returned --> [*]
@enduml

@startuml
title SPIデータ転送タイミング図

robust "クロック (SCLK)" as CLK
binary "チップセレクト (CS)" as CS
binary "マスタアウト (MOSI)" as MOSI
concise "データバス (MISO)" as MISO

@0
CSはHigh
CLKはLow
MOSIはLow
MISOは"アイドル"

@1
CSはLow
MISOは"ヘッダー"

@2
CLKはHigh
MOSIはHigh

@3
CLKはLow

@4
CLKはHigh
MOSIはLow
MISOは"ペイロード"

@5
CLKはLow

@6
CSはHigh
CLKはLow
MOSIはLow
MISOは"アイドル"

@enduml

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

TITLE インターネットバンキングシステムのシステムコンテキスト図

Person(customer, "個人銀行顧客", "個人の銀行口座を持つ銀行の顧客です。")
System(banking_system, "インターネットバンキングシステム", "顧客が自分の銀行口座の情報を確認し、支払いを行うことを可能にします。")

System_Ext(mainframe, "メインフレームバンキングシステム", "顧客、口座、取引などのすべての核心的なバンキング情報を保存します。")
System_Ext(email_system, "メールシステム", "内部のMicrosoft Exchangeメールシステムです。")

Rel(customer, banking_system, "口座残高を確認し、支払いに使用")
Rel(banking_system, mainframe, "口座情報を取得し、支払いに使用")
Rel(banking_system, email_system, "メールを送信に使用")
Rel_Back(email_system, customer, "メールを送信")
@enduml

@startuml
!include <archimate/Archimate>

title ArchiMateサンプル - オンライン請求書支払い

Grouping(business, "ビジネス層"){
  Business_Process(payBillProcess, "請求書支払いプロセス")
  Business_Object(bankAccount, "顧客の銀行口座")
  Business_Service(paymentService, "請求書支払いビジネスサービス")
}

Grouping(application, "アプリケーション層"){
  Application_Component(bankingApp, "モバイルバンキングアプリケーション")
  Application_Function(paymentProcessing, "支払い処理ロジック")
  Application_DataObject(transactionRecord, "取引データペイロード")
}

Grouping(technology, "テクノロジー層"){
  Technology_Artifact(jwtToken, "暗号化されたセッショントークン")
  Technology_Service(apiGateway, "APIゲートウェイサービス")
  Technology_Service(dbService, "コアデータベースサービス")
}

Rel_Flow_Right(payBillProcess, bankAccount, "")
Rel_Serving_Up(paymentService, payBillProcess, "")
Rel_Specialization_Up(paymentProcessing, paymentService, "")
Rel_Flow_Right(transactionRecord, paymentProcessing, "")
Rel_Assignment_Left(bankingApp, paymentProcessing, "")
Rel_Realization_Up(jwtToken, transactionRecord, "")
Rel_Serving_Up(apiGateway, paymentProcessing, "")
Rel_Serving_Up(dbService, apiGateway, "")
@enduml

@startuml
title イーコマースデータベーススキーマ（クロウズフット）

' エンティティの円アイコンを非表示にする
hide circle
skinparam linetype ortho

entity "ユーザー" as user {
  * user_id : INT <>
  --
  * email : VARCHAR(255)
  * password_hash : VARCHAR(255)
  * created_at : TIMESTAMP
}

entity "顧客プロフィール" as profile {
  * profile_id : INT <>
  --
  * user_id : INT <>
  * first_name : VARCHAR(100)
  * last_name : VARCHAR(100)
    phone : VARCHAR(20)
}

entity "注文" as order {
  * order_id : INT <>
  --
  * user_id : INT <>
  * order_date : TIMESTAMP
  * total_amount : DECIMAL(10,2)
  * status : VARCHAR(50)
}

entity "注文アイテム" as item {
  * order_item_id : INT <>
  --
  * order_id : INT <>
  * product_id : INT <>
  * quantity : INT
  * unit_price : DECIMAL(10,2)
}

entity "商品" as product {
  * product_id : INT <>
  --
  * sku : VARCHAR(50)
  * name : VARCHAR(150)
    description : TEXT
  * price : DECIMAL(10,2)
}

' 関係
user ||--o| profile : "所有"
user ||--o{ order : "作成"
order ||--|{ item : "含む"
product ||--o{ item : "含まれる"

@enduml

@startnwdiag
title 企業ネットワークトポロジー

nwdiag {
  network External_Internet {
    address = "0.0.0.0/0"
    user_client [address = "203.0.113.15", description = "リモートユーザー"];
    edge_firewall [address = "192.168.1.1", description = "境界ファイアウォール"];
  }

  network DMZ_Zone {
    address = "192.168.1.0/24"
    edge_firewall;
    load_balancer [address = "192.168.1.10", description = "Nginxロードバランサー"];
    mail_server [address = "192.168.1.25", description = "SMTPサーバー"];
    internal_firewall [address = "192.168.1.254", description = "内部ファイアウォール"];
  }

  network Private_LAN {
    address = "10.0.1.0/24"
    internal_firewall;
    app_server_01 [address = "10.0.1.50", description = "APIノード1"];
    app_server_02 [address = "10.0.1.51", description = "APIノード2"];
    db_master [address = "10.0.1.100", description = "PostgreSQLプライマリ"];
  }

  network Management_Subnet {
    address = "10.0.99.0/24"
    internal_firewall;
    admin_bastion [address = "10.0.99.5", description = "SSHバステオンホスト"];
    monitoring_node [address = "10.0.99.20", description = "Prometheusホスト"];
  }
}
@endnwdiag

gantt
    タイトル ソフトウェア製品リリーススケジュール
    dateFormat YYYY-MM-DD
    axisFormat %b %d

    セクション 計画と設計
    要件収集 :a1, 2026-09-01, 10d
    アーキテクチャ設計 :a2, a1の後, 10d

    セクション 開発
    バックエンドAPI開発 :b1, a2の後, 15d
    フロントエンドUI開発 :b2, a2の後, 15d

    セクション テストとリリース
    統合テスト :c1, b1とb2の後, 8d
    セキュリティ監査 :c2, c1の後, 5d
    本番リリース :マイルストーン, m1, c2の後, 0d

@startwbs
title ウェブサイトリデザインWBS

* ウェブサイトリデザインプロジェクト
** 1. ディスカバリーと戦略
*** 1.1 ステークホルダーインタビュー
*** 1.2 競合分析
*** 1.3 範囲と戦略の承認
** 2. UX/UIデザイン
*** 2.1 ワイヤフレーミング
**** 2.1.1 デスクトップレイアウト
**** 2.1.2 モバイルレイアウト
*** 2.2 デザインシステム
**** 2.2.1 コンポーネントライブラリ
**** 2.2.2 タイポグラフィとスタイルガイド
** 3. 技術開発
*** 3.1 フロントエンド
**** 3.1.1 ページテンプレート
**** 3.1.2 API統合
*** 3.2 CMSとバックエンド
**** 3.2.1 カスタム投稿タイプ
**** 3.2.2 データベース移行
** 4. QAとリリース
*** 4.1 ブラウザ間テスト
*** 4.2 コンテンツ移行
*** 4.3 DNS切り替えと本番稼働
@endwbs

@startmindmap
title インターネット通販プラットフォーム機能マップ

* インターネット通販プラットフォーム
** ユーザーアカウント管理
*** ソーシャル認証（Google、Apple）
*** 2段階認証
*** 注文履歴と追跡
** 商品カタログと検索
*** フェイステッド検索とフィルター
*** 在庫同期
*** 商品レビューと評価
** クイックチェックアウトと決済
*** 支払いゲートウェイ（Stripe、PayPal）
*** クーポンとプロモーションエンジン
*** 1クリックゲストチェックアウト
** カスタマーサポート
*** ライブチャットアシスタント
*** 自動返品ポータル
@endmindmap

@startuml
autonumber
actor User
participant "VPasCodeエディタ" as Editor
participant "AIエンジン" as AI

User -> Editor: PlantUMLコードを貼り付け
Editor -> Editor: 形式を自動検出＆リアルタイムレンダリング
alt 構文エラーが検出された
    User -> Editor: 「AIで修正」をクリック
    Editor -> AI: 破損したコードを送信
    AI --> Editor: 修正されたコードと差分を返却
end
Editor --> User: クリーンなベクタ図（SVG/PNG）を表示
@enduml