Tutorial

Hasilkan diagram arsitektur

Gunakan IBM Bob untuk menganalisis codebase Galaxium Travels dan menghasilkan diagram UML class, sequence diagram, dan use case diagram Mermaid.

Diagram arsitektur memberikan bahasa visual bersama untuk codebase sebelum kamu memodifikasinya. Dalam tutorial ini, kamu menggunakan Bob untuk membaca file sumber Galaxium Travels dan menghasilkan tiga jenis diagram UML menggunakan Mermaid. Kamu menggunakan Ask mode untuk mengeksplorasi kode dengan aman, kemudian beralih ke Agent mode untuk menyimpan diagram ke proyek.

Prasyarat

  • Bob IDE terinstal.
  • Git terinstal secara lokal.
  • Familiar dengan dasar-dasar penggunaan Bob.

Setup workspace-mu

Clone repository Galaxium Travels

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

Inisialisasi konteks proyek

Masukkan perintah /init di field input antarmuka chat.

 /init

Beralih ke Ask mode

Pilih Ask di pemilih mode. Ask mode bersifat read-only.

Hasilkan diagram UML class

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.

Hasilkan sequence diagram

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.

Hasilkan use case diagram

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.

Simpan diagram ke repository

Beralih ke Agent mode dan minta Bob menyimpan diagram ke repository.

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

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

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

Langkah selanjutnya

Bagaimana topik ini?