チュートリアル

アーキテクチャ図を生成する

IBM Bob を使って Galaxium Travels コードベースを解析し、Mermaid の UML クラス図・シーケンス図・ユースケース図を生成します。Ask mode でコードを探索し、Agent mode で結果をリポジトリに保存する方法を学びます。

アーキテクチャ図は、コードベースを変更する前に共通のビジュアル言語を提供してくれます。このチュートリアルでは、Bob を使って Galaxium Travels のソースファイルを読み込み、UML クラス図・シーケンス図・ユースケース図の 3 種類の UML 図を生成します。Ask mode を使ってコードを安全に探索しながら Mermaid 形式の図のマークアップを生成し、その後 Agent mode に切り替えて図をプロジェクトに保存します。

GitHub は Markdown ファイルで Mermaid 図をネイティブにサポートしているため、生成した図を .md ファイルとして保存すれば GitHub 上でレンダリングされた状態で確認できます。

このチュートリアルでは、コードベースの状態によって Bob の出力が例と異なる場合があります。生成されたマークアップはあくまでも出発点として、必要に応じて調整してください。

学べる主な機能

  • コンテキストメンション: @ 記号を使ってプロンプト内で特定のファイルやフォルダを参照できます。コンテキストメンションを使うことで、正確な図を生成するために Bob が分析すべきファイルを明示できます。
  • Ask mode: ファイルに変更を加えることなく、コードを読み込んで解析します。
  • Agent mode: Bob が自律的にファイルを書き込み、生成した成果物をプロジェクトに保存します。

前提条件

このチュートリアルを完了するには、以下が必要です。

  • Bob IDE がインストールされていること。
  • Galaxium Travels のサンプルリポジトリをクローンするために Git がローカルにインストールされていること。
  • Bob の基本的な操作に慣れていること。Bob を初めて使う場合は、先に クイックスタートチュートリアル を完了してください。

ワークスペースのセットアップ

Galaxium Travels リポジトリをクローンする

ターミナルで以下のコマンドを実行して、Galaxium Travels のサンプルリポジトリをクローンします。

git clone https://github.com/ibm/galaxium-travels.git

IBM Bob を起動する

コンピューターで IBM Bob IDE を起動します。

サンプルプロジェクトを開く

Bob IDE でクローンした galaxium-travels フォルダーを開きます。Bob から「フォルダー内のファイルの作成者を信頼しますか?」と尋ねられた場合は、「はい、作成者を信頼します」 をクリックしてください。

ルートディレクトリの README.md ファイルを確認して、アプリケーションとそのアーキテクチャの概要を把握しましょう。Galaxium Travels アプリは、React フロントエンド・Python FastAPI バックエンド・Java インベントリホールドサービスで構成されたフライト予約システムのシミュレーションです。このコードベースは意図的に複雑で現実世界のアプリケーションを模しているため、アーキテクチャ図を生成する素材として最適です。

Bob チャットインターフェースを開く

チャットインターフェースがまだ開いていない場合は、ナビゲーションバーの Bob アイコンをクリックするか、ショートカット Option + Command + B(Mac)または Ctrl + Alt + B(Windows)を使用してください。

プロジェクトコンテキストを初期化する

Bob は起動時デフォルトで Agent mode になっています。モードを変更していた場合は、初期化コマンドを実行する前に Agent mode に切り替えてください。Bob がプロジェクトコンテキストをセットアップするためにファイルの書き込みが必要になります。

チャットインターフェースの入力フィールドに /init コマンドを入力します。自動承認が無効になっている場合、Bob はファイルの読み込みと AGENTS.md ファイルの書き込みの許可を求めます。

 /init

Bob はプロジェクト内の関連ファイルを読み込み、ルートディレクトリにメインの AGENTS.md ファイルを生成します。また、各モード用の AGENTS.md を含む .bob フォルダーも作成されます。

生成された AGENTS.md ファイルを確認して、Bob がプロジェクトコンテキストをどのようにセットアップしたか、各モードでどのような機能が使えるかを理解しましょう。

Ask mode に切り替える

チャット入力フィールド下のモードセレクターで Ask を選択します。チャット入力フィールドに /ask と入力してモードを切り替えることもできます。

Agent mode とは異なり、Ask mode は読み取り専用です。Bob はファイルの読み込みと解析はできますが、作成や変更は一切行えないため、コードの探索を安全に行えます。

UML クラス図を生成する

UML クラス図は、アプリケーションのデータモデルを視覚化します。エンティティ(クラス)・属性・それらの関係性をマッピングします。Galaxium Travels では、バックエンドの Python SQLAlchemy モデルとインベントリホールドサービスの Java ドメインクラスが対象となります。

両サービスのデータモデルを解析して Mermaid の classDiagram を生成するプロンプトを作成します。Bob が分析すべき関連ファイルを指定するためにコンテキストメンションを使用します。デフォルトでは、Bob は Mermaid 図をレンダリングされた画像として出力します。生の Mermaid マークアップを確認したい場合は、プロンプトに「Output only the Mermaid code block. Do not render the Mermaid diagram.」という指示を追加してください。

Ask mode のチャット入力フィールドに以下のプロンプトを入力します。

Analyze the data models in @booking_system_backend/models.py and the 
Java domain classes in @booking_system_inventory_hold_service/src/main/java/com/galaxium/holdservice/domain.

Generate a Mermaid classDiagram that shows all classes, their attributes,
their methods (if any), and the relationships between them. 
Include the BookingStatus enum.

Output the Mermaid markup. Do not render the Mermaid diagram.

Bob は両ファイルを読み込み、以下のような図のマークアップを生成します。

classDiagram
    direction LR

    %% ── Python / SQLAlchemy (booking_system_backend/models.py) ──────────

    class User {
        +int user_id PK
        +str name
        +str email
    }

    class Flight {
        +int flight_id PK
        +str origin
        +str destination
        +str departure_time
        +str arrival_time
        +int base_price
        +int economy_seats_available
        +int business_seats_available
        +int galaxium_seats_available
    }

    class Booking {
        +int booking_id PK
        +int user_id FK
        +int flight_id FK
        +str status
        +str booking_time
        +str seat_class
        +int price_paid
    }

    class BookingStatus {
        <<enumeration>>
        BOOKED = "booked"
        CANCELLED = "cancelled"
        CANCELED = "cancelled"
        COMPLETED = "completed"
    }

    %% ── Java / JPA (holdservice/domain) ────────────────────────────────

    class Quote {
        +String quoteId PK
        +Integer flightId
        +String seatClass
        +Integer quantity
        +Integer travelerId
        +String travelerName
        +Long pricePerSeat
        +Long totalPrice
        +Instant expiresAt
        +QuoteStatus status
        +Instant createdAt
        #onCreate() void
    }

    class QuoteStatus {
        <<enumeration>>
        CREATED
    }

    class Hold {
        +String holdId PK
        +String quoteId FK
        +HoldStatus status
        +Instant reservedUntil
        +String externalBookingReference
        +String errorMessage
        +Instant createdAt
        +Instant updatedAt
        #onCreate() void
        #onUpdate() void
    }

    class HoldStatus {
        <<enumeration>>
        HELD
        EXPIRED
        CONFIRMED
        RELEASED
        CONFIRMATION_FAILED
    }

    class AuditEvent {
        +String eventId PK
        +String entityType
        +String entityId
        +String eventType
        +String details
        +Instant createdAt
        #onCreate() void
    }

    %% ── Relationships ───────────────────────────────────────────────────

    User        "1" --> "0..*" Booking      : places
    Flight      "1" --> "0..*" Booking      : booked on
    Booking          ..>        BookingStatus : status

    Quote       "1" --> "0..*" Hold         : generates
    Quote            ..>        QuoteStatus  : status
    Hold             ..>        HoldStatus   : status

    AuditEvent       ..>        Quote        : references entityId
    AuditEvent       ..>        Hold         : references entityId

シーケンス図を生成する

シーケンス図は、特定のフローにおいてコンポーネントが時系列でどのようにやり取りするかを示します。Galaxium Travels の予約フローは、React フロントエンド・Python FastAPI バックエンド・Java インベントリホールドサービスにまたがっています。

予約フロー全体をトレースして Mermaid の sequenceDiagram を生成するプロンプトを作成します。Bob が分析すべき関連ファイルを指定するためにコンテキストメンションを使用します。分析するファイルと図にしたいフローをプロンプトで具体的に指定するほど、出力の精度が上がります。

Ask mode のチャット入力フィールドに以下のプロンプトを入力します。

Analyze the booking flow across @booking_system_frontend/src/services,
@booking_system_backend/server.py, @booking_system_backend/services/booking.py,
and @booking_system_inventory_hold_service/src/main/java/com/galaxium/holdservice/api.

Generate a Mermaid sequenceDiagram showing the complete flow for a
user booking a flight, including the quote and hold steps with the Java service.

Output the Mermaid markup. Do not render the Mermaid diagram.

Bob はインタラクションの連鎖をトレースし、以下のような図のマークアップを生成します。

sequenceDiagram
    autonumber
    participant U  as User (Browser)
    participant FE as Frontend<br/>(api.ts)
    participant PY as Python Backend<br/>(server.py)
    participant BS as BookingService<br/>(booking.py)
    participant QC as QuoteController<br/>(Java)
    participant QS as QuoteService<br/>(Java)
    participant HC as HoldController<br/>(Java)
    participant HS as HoldService<br/>(Java)
    participant DB as Python SQLite
    participant JDB as Java SQLite

    Note over U,JDB: ── Phase 1: Create Quote ──────────────────────────────────

    U->>FE: createQuote({ flightId, seatClass,<br/>quantity, travelerId, travelerName })
    FE->>PY: POST /quotes
    PY->>QC: POST /api/v1/quotes
    QC->>QS: createQuote(request)
    QS->>QS: generateQuoteId() → "Q-2025-000001"
    QS->>QS: pricingService.calculatePrice(flightId, seatClass)
    QS->>JDB: save Quote (status=CREATED, expiresAt=+24h)
    QS->>JDB: save AuditEvent (QUOTE / CREATED)
    QC-->>PY: 201 Quote
    Note right of PY: Returns {"error":"..."} HTTP 200<br/>if Java service unreachable
    PY-->>FE: Quote JSON
    FE->>FE: assertNotProxyError(response.data)
    FE-->>U: quoteId

    Note over U,JDB: ── Phase 2: Create Hold ───────────────────────────────────

    U->>FE: createHold(quoteId)
    FE->>PY: POST /quotes/{quoteId}/holds
    PY->>HC: POST /api/v1/quotes/{quoteId}/holds
    HC->>HS: createHold(quoteId)
    HS->>JDB: findById(quoteId)
    JDB-->>HS: Quote
    HS->>HS: check quote not expired
    HS->>HS: generateHoldId() → "H-2025-000001"
    HS->>JDB: save Hold (status=HELD,<br/>reservedUntil=+15min)
    HS->>JDB: save AuditEvent (HOLD / CREATED)
    HC-->>PY: 201 Hold
    PY-->>FE: Hold JSON
    FE->>FE: assertNotProxyError(response.data)
    FE-->>U: holdId

    Note over U,JDB: ── Phase 3: Confirm Hold → Create Booking ─────────────────

    U->>FE: confirmHold(holdId)
    FE->>PY: POST /holds/{holdId}/confirm
    PY->>HC: POST /api/v1/holds/{holdId}/confirm
    HC->>HS: confirmHold(holdId)
    HS->>JDB: findById(holdId)
    JDB-->>HS: Hold
    HS->>HS: check status == HELD
    HS->>HS: check reservedUntil not passed
    HS->>JDB: findById(hold.quoteId)
    JDB-->>HS: Quote

    HS->>PY: POST /internal/bookings/from-hold<br/>{ travelerId, travelerName, flightId, seatClass }
    PY->>BS: book_flight(db, user_id, name,<br/>flight_id, seat_class)
    BS->>DB: query Flight (check seats available)
    BS->>DB: query User (validate user_id + name match)
    BS->>DB: decrement {seat_class}_seats_available
    BS->>DB: insert Booking (status="booked")
    DB-->>BS: Booking row
    BS-->>PY: BookingOut

    alt booking succeeded
        PY-->>HS: 200 { booking_id, ... }
        HS->>JDB: update Hold (status=CONFIRMED,<br/>externalBookingReference=booking_id)
        HS->>JDB: save AuditEvent (HOLD / CONFIRMED)
        HC-->>PY: 200 Hold (CONFIRMED)
        PY-->>FE: Hold JSON
        FE->>FE: assertNotProxyError(response.data)
        FE-->>U: Booking confirmed ✓
    else booking failed (name mismatch / no seats / user not found)
        PY-->>HS: 400 { error, error_code, details }
        HS->>JDB: update Hold (status=CONFIRMATION_FAILED,<br/>errorMessage=...)
        HS->>JDB: save AuditEvent (HOLD / CONFIRMATION_FAILED)
        HC-->>PY: 400 Bad Request
        PY-->>FE: error response
        FE-->>U: Error shown to user ✗
    end

ユースケース図を生成する

ユースケース図は、システム内のアクターと各アクターが実行できる機能を識別します。Mermaid にはネイティブのユースケース図タイプがないため、アクターごとにユースケースをグループ化した flowchart LR で表現します。

アプリケーション全体にわたるすべてのアクターとユースケースを識別するプロンプトを作成します。アクターにはユーザーの種類と外部システムが含まれます。フロントエンドのページ・バックエンドの REST エンドポイント・MCP ツールなど、Bob が分析すべき関連ファイルを指定するためにコンテキストメンションを使用します。分析するファイルをプロンプトで具体的に指定するほど、出力の精度が上がります。また、Mermaid レンダラーが波括弧をテンプレート構文として解釈しないよう、Mermaid マークアップ内の波括弧をエスケープするよう Bob に指示してください。

Ask mode のチャット入力フィールドに以下のプロンプトを入力します。

Analyze the full Galaxium Travels application. 

Identify all actors (user types or external systems) and the use cases each
actor can perform, based on the frontend pages, backend REST endpoints,
and MCP tools.

Generate a Mermaid flowchart LR that represents this as a use case diagram,
grouping use cases under their respective actors using subgraphs.

Escape curly braces in Mermaid markup so that the Mermaid renderer does not
attempt to interpret the curly braces as template syntax.

Output the Mermaid markup. Do not render the Mermaid diagram.

Bob はアプリケーションを解析し、以下のような図のマークアップを生成します。

flowchart LR

    subgraph Traveller["👤 Traveller (Browser)"]
        T1[Browse available flights]
        T2[Search flights by origin / destination]
        T3[Filter flights by date, price, seat class,\nduration, route category, time period]
        T4[Register account]
        T5[Sign in with name and email]
        T6[Select seat class\neconomy / business / galaxium]
        T7[Get price quote]
        T8[Place seat hold - 15-minute timer]
        T9[Confirm hold and create booking]
        T10[Release hold]
        T11[View active bookings]
        T12[View past bookings]
        T13[Cancel booking]
        T14[View pending holds with countdown]
        T15[Dismiss expired hold]
    end

    subgraph AIAgent["🤖 AI Agent (MCP Client)"]
        A1[list_flights]
        A2[register_user]
        A3[get_user_id]
        A4[book_flight]
        A5[get_bookings]
        A6[cancel_booking]
    end

    subgraph JavaService["☕ Java Hold Service\n(Internal System)"]
        J1[Confirm hold via POST /internal/bookings/from-hold]
        J2[Auto-expire holds after timeout]
    end

    subgraph RestAPI["🐍 Python REST API\n(External Consumers / Swagger)"]
        R1[GET  /flights — list and filter flights]
        R2[POST /register — register user]
        R3[GET  /user — look up user by name and email]
        R4[POST /book — book a flight]
        R5[GET  /bookings/&#123;user_id&#125; — get user bookings]
        R6[POST /cancel/&#123;booking_id&#125; — cancel booking]
        R7[POST /quotes — create quote proxy]
        R8[GET  /quotes/&#123;id&#125; — get quote proxy]
        R9[POST /quotes/&#123;id&#125;/holds — create hold proxy]
        R10[GET  /holds/&#123;id&#125; — get hold proxy]
        R11[POST /holds/&#123;id&#125;/confirm — confirm hold proxy]
        R12[POST /holds/&#123;id&#125;/release — release hold proxy]
        R13[GET  / — health check]
    end

    Traveller   -->|uses frontend which calls| RestAPI
    AIAgent     -->|MCP over HTTP at /mcp| RestAPI
    JavaService -->|calls back via internal endpoint| RestAPI

図をリポジトリに保存する

Bob を Agent mode に切り替えて、生成した図をリポジトリに保存するよう指示します。各図は新しく作成する docs/architecture/ フォルダー内に Markdown ファイルとして保存されます。

Agent mode に切り替える

モードセレクターで Agent を選択するか、チャット入力フィールドに /agent と入力します。

3 つの図をすべて保存する

Bob にアーキテクチャドキュメントファイルの作成を依頼します。

Create a docs/architecture/ folder in the repository root.

Save each of the three diagrams we generated as individual Markdown files:
- class-diagram.md — the UML class diagram
- sequence-diagram.md — the booking flow sequence diagram
- use-case-diagram.md — the use case flowchart

Each file should have a short title heading, the Mermaid code block we
generated, and a brief description of the diagram.

Bob が 3 つのファイルを作成します。Bob がファイルを書き込むたびに 承認 および 保存 をクリックしてください。

出力を確認する

Bob のファイルエクスプローラーで各ファイルを開き、Mermaid のコードフェンスブロックが正しく含まれているか確認します。図を確認する方法はいくつかあります。

  • Bob に Markdown ファイルのプレビューを表示するよう依頼します。

    チャット入力フィールドに以下のプロンプトを入力します。

      Show me a preview of docs/architecture/class-diagram.md

    Bob はチャットインターフェースで Mermaid 図を含む Markdown ファイルをレンダリングします。レンダリングされた図をクリックすると、拡大表示されます。

    3 つのファイルそれぞれでこの操作を行うことで、すべての図がレンダリングされた状態で確認できます。

  • 図のマークアップを Mermaid Live Editor に貼り付けて、レンダリング結果をプレビューします。

  • 変更を GitHub リポジトリに commit して push し、GitHub 上でファイルを表示してレンダリングされた図を確認します。

トラブルシューティング

Bob がコンパイルできない Mermaid マークアップを生成する

Mermaid のパーサーは厳格です。無効な文字が 1 つあるだけでも、サポートされていないキーワードや改行の欠落でも、図がサイレントに失敗したりパースエラーが発生したりする場合があります。以下の手順で問題を診断して修正してください。

問題のある行を特定する

Bob がパースエラーを出力した場合、その出力には行番号と問題のあるコードのスニペットが含まれます。

Bob がパーサーエラーを出力しない場合は、マークアップを Mermaid Live Editor に貼り付けてください。エディターが問題のある行を強調表示し、パーサーエラーを表示するため、問題の特定に役立ちます。

ラベル内のエスケープされていない特殊文字・閉じられていない subgraph・矢印の構文エラーなど、よくある問題がないかマークアップを目視で確認することもできます。

症状考えられる原因修正方法
{ または } 付近のパースエラーflowchart または classDiagram のノードラベルで波括弧がエスケープされていない{&#123; に、}&#125; に置き換えるか、ラベルの表現を変える
( または ) 付近のパースエラーノード ID に括弧が含まれているラベルをクォートで囲む: A["label (note)"]
end または subgraph の予期しないエラーsubgraph が閉じられていないすべての subgraph ブロックに対応する end があることを確認する
矢印の種類が認識されない図のタイプに対して誤った矢印構文を使用している-->flowchart 用。classDiagram-->, ..>, --|> など。sequenceDiagram->>, -->> を使用する
ノードが定義されているが接続されていない孤立したノードはエラーにならないが、一部のレンダラーで問題になる可能性があるノードを接続するか削除する
図の途中からレンダリングが止まるラベルに裸の " 文字が含まれているラベル内のクォートをエスケープする: A["it\'s a label"]

Bob に修正を依頼する

Bob にパーサーエラーと問題のある行を伝え、特定の行を修正するよう依頼します。

例:

The Mermaid classDiagram fails to parse with this error:
Parse error on line 42: ...unexpected token 'NEWLINE'

Here is the relevant block:
    Booking ..> BookingStatus : status (active)

Fix the syntax so it compiles without changing the diagram structure.

Bob は既にレビュー済みの内容を再生成することなく、ピンポイントで修正できます。

出力前に Bob に検証を依頼する

図を最初から再生成する場合は、プロンプトに明示的な検証の指示を追加してください。

Before outputting the Mermaid block, mentally parse it and confirm every node ID
is valid, every subgraph is closed, and all special characters in labels are escaped.

図が大きい場合はスコープを絞る

ノードが多い図で無効なマークアップが繰り返し生成される場合は、セクションに分けて Bob に生成させてください。たとえば、Python モデルを先に生成してから Java モデルを生成するといった方法です。その後、Bob にブロックを結合するよう依頼します。生成量を小さくすることで、Bob が検証しやすくなり、差分の確認もしやすくなります。

次のステップ

このチュートリアルでは、コンテキストメンションと Ask mode を使って Galaxium Travels コードベースを探索し、Bob で 3 種類のアーキテクチャ図を生成しました。そして Agent mode を使ってリポジトリに保存しました。以下のリソースで学習を続けてください。

  • Bob 入門チュートリアル で Galaxium Travels アプリを使いながら Bob の機能をさらに学びましょう。
  • 複雑な機能の計画と実装 チュートリアルで、Plan → Agent mode ワークフローを使って新機能を追加する方法を学びましょう。
  • Bob ベストプラクティス を読んで、Bob を効果的に使うためのプロンプト戦略を学びましょう。
このトピックはいかがですか?