Generowanie diagramów architektury
Użyj IBM Bob do analizy bazy kodu Galaxium Travels i wygenerowania diagramów klas UML Mermaid, diagramów sekwencji i diagramów przypadków użycia. Dowiedz się, jak używać wzmianek kontekstowych w trybie Ask do eksploracji kodu oraz trybu Agent do zapisywania wyników w repozytorium.
Diagramy architektury dają wspólny język wizualny dla bazy kodu przed jej modyfikacją. W tym samouczku używasz Boba do odczytania plików źródłowych Galaxium Travels i wygenerowania trzech typów diagramów UML: diagramu klas UML, diagramu sekwencji i diagramu przypadków użycia. Używasz trybu Ask do bezpiecznej eksploracji kodu i generowania znaczników diagramu, które wykorzystują Mermaid. Następnie przełączasz się na tryb Agent, aby zapisać diagramy w projekcie.
GitHub zapewnia natywne wsparcie dla diagramów Mermaid w plikach Markdown, więc możesz zapisać wygenerowane diagramy jako pliki .md i wyświetlić je
wyrenderowane na GitHubie.
W tym samouczku wynik Boba może różnić się od przykładów w zależności od aktualnego stanu bazy kodu. Użyj wygenerowanych znaczników jako punktu wyjścia i dopracuj je według potrzeb.
Kluczowe funkcje, których się nauczysz
- Wzmianki kontekstowe: Odwołuj się do
konkretnych plików i folderów w swoich promptach używając symbolu
@. Wzmianki kontekstowe pozwalają Bobowi wiedzieć dokładnie, które pliki analizować, aby generować dokładne diagramy. - Tryb Ask: Czytaj i analizuj kod bez wprowadzania przez Boba zmian w plikach.
- Tryb Agent: Pozwól Bobowi pisać pliki autonomicznie, aby utrwalić wygenerowane artefakty w projekcie.
Wymagania wstępne
Aby ukończyć ten samouczek, potrzebujesz następujących rzeczy:
- Zainstalowane Bob IDE.
- Lokalnie zainstalowany Git, abyś mógł sklonować przykładowe repozytorium Galaxium Travels.
- Znajomość podstaw korzystania z Boba. Jeśli jesteś nowy w Bobie, zacznij od samouczka szybkiego startu.
Skonfiguruj swój obszar roboczy
Sklonuj repozytorium Galaxium Travels
W terminalu uruchom następujące polecenie, aby sklonować przykładowe repozytorium Galaxium Travels:
git clone https://github.com/ibm/galaxium-travels.gitUruchom IBM Bob
Uruchom IDE IBM Bob na swoim komputerze.
Otwórz przykładowy projekt
W IDE Boba otwórz folder galaxium-travels, który sklonowałeś. Jeśli Bob zapyta "Czy ufasz
autorom plików w folderze?", kliknij Tak, ufam
autorom.
Przejrzyj plik README.md w katalogu głównym, aby uzyskać przegląd aplikacji i jej architektury. Aplikacja Galaxium Travels symuluje system rezerwacji lotów z frontendem React, backendem Python FastAPI i usługą wstrzymania zapasów Java. Baza kodu jest celowo złożona i reprezentatywna dla rzeczywistych aplikacji, co czyni ją doskonałym kandydatem do generowania diagramów architektury.
Otwórz interfejs czatu Boba
Jeśli interfejs czatu nie jest jeszcze otwarty, kliknij ikonę Boba na pasku nawigacji lub użyj skrótu Option + Command + B (Mac) lub Ctrl + Alt + B (Windows).
Zainicjuj kontekst projektu
Bob domyślnie uruchamia się w trybie Agent. Jeśli zmieniłeś tryb, upewnij się, że przełączysz się na tryb Agent przed uruchomieniem polecenia inicjalizacji. Bob musi zapisać pliki, aby skonfigurować kontekst projektu.
Wprowadź polecenie /init w polu wprowadzania interfejsu czatu. Jeśli masz
wyłączone automatyczne zatwierdzanie, Bob poprosi o pozwolenie na odczytanie plików i zapisanie
plików AGENTS.md.
/initBob odczytuje odpowiednie pliki w projekcie. Bob następnie generuje główny
plik AGENTS.md w katalogu głównym. Bob tworzy również
folder .bob, który zawiera AGENTS.md dla każdego trybu.
Przejrzyj wygenerowane pliki AGENTS.md, aby zrozumieć, jak Bob skonfigurował
kontekst projektu i jakie możliwości ma Bob w każdym trybie.
Przełącz się na tryb Ask
Wybierz Ask w selektorze trybu poniżej pola wprowadzania czatu. Możesz również
wpisać /ask w polu wprowadzania czatu, aby zmienić tryb.
W przeciwieństwie do trybu Agent, tryb Ask jest tylko do odczytu. Bob może odczytywać i analizować pliki, ale nie może niczego tworzyć ani modyfikować, co czyni go bezpiecznym do eksploracji kodu.
Wygeneruj diagram klas UML
Diagram klas UML mapuje model danych aplikacji: encje (klasy), ich atrybuty i relacje między nimi. Dla Galaxium Travels obejmuje to modele Python SQLAlchemy w backendzie i klasy domenowe Java w usłudze wstrzymania zapasów.
Utwórz prompt do analizy modeli danych w obu usługach i wygenerowania
classDiagram Mermaid. Użyj wzmianek kontekstowych, aby określić odpowiednie pliki dla
Boba do analizy. Domyślnie Bob generuje diagram Mermaid jako wyrenderowany obraz.
Aby przejrzeć surowe znaczniki Mermaid, dodaj instrukcję "Wygeneruj tylko
blok kodu Mermaid. Nie renderuj diagramu Mermaid." do swojego promptu.
W trybie Ask wprowadź następujący prompt w polu wprowadzania czatu:
Przeanalizuj modele danych w @booking_system_backend/models.py i
klasy domenowe Java w @booking_system_inventory_hold_service/src/main/java/com/galaxium/holdservice/domain.
Wygeneruj classDiagram Mermaid, który pokazuje wszystkie klasy, ich atrybuty,
ich metody (jeśli istnieją) i relacje między nimi.
Uwzględnij enum BookingStatus.
Wygeneruj znaczniki Mermaid. Nie renderuj diagramu Mermaid.Bob odczytuje oba pliki i generuje znaczniki diagramu podobne do następujących:
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 entityIdWygeneruj diagram sekwencji
Diagram sekwencji pokazuje, jak komponenty współdziałają w czasie wykonywania w określonym przepływie, uporządkowane według czasu. Przepływ rezerwacji Galaxium Travels obejmuje frontend React, backend Python FastAPI i usługę wstrzymania zapasów Java.
Utwórz prompt do śledzenia pełnego przepływu rezerwacji i wygenerowania
sequenceDiagram Mermaid. Użyj wzmianek kontekstowych, aby określić odpowiednie pliki dla Boba do
analizy. Im bardziej szczegółowy jesteś w swoim prompcie o tym, które pliki analizować
i jaki przepływ chcesz zdiagramować, tym dokładniejszy jest wynik.
W trybie Ask wprowadź następujący prompt w polu wprowadzania czatu:
Przeanalizuj przepływ rezerwacji w @booking_system_frontend/src/services,
@booking_system_backend/server.py, @booking_system_backend/services/booking.py,
i @booking_system_inventory_hold_service/src/main/java/com/galaxium/holdservice/api.
Wygeneruj sequenceDiagram Mermaid pokazujący pełny przepływ dla
użytkownika rezerwującego lot, w tym kroki wyceny i wstrzymania z usługą Java.
Wygeneruj znaczniki Mermaid. Nie renderuj diagramu Mermaid.Bob śledzi łańcuch interakcji i generuje znaczniki diagramu podobne do następujących:
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 ✗
endWygeneruj diagram przypadków użycia
Diagram przypadków użycia identyfikuje aktorów w systemie i możliwości, które każdy
aktor może wykonywać. Mermaid nie ma natywnego typu diagramu przypadków użycia, więc
reprezentujesz to za pomocą flowchart LR, który grupuje przypadki użycia według aktora.
Utwórz prompt do identyfikacji wszystkich aktorów i ich przypadków użycia w całej aplikacji. Aktorzy obejmują typy użytkowników i systemy zewnętrzne. Użyj wzmianek kontekstowych, aby określić odpowiednie pliki dla Boba do analizy, w tym strony frontendowe, endpointy REST backendu i narzędzia MCP. Im bardziej szczegółowy jesteś w swoim prompcie o tym, które pliki analizować, tym dokładniejszy jest wynik. Dodatkowo poinstruuj Boba, aby escapował nawiasy klamrowe w znacznikach Mermaid, aby renderer Mermaid nie próbował interpretować nawiasów klamrowych jako składni szablonu.
W trybie Ask wprowadź następujący prompt w polu wprowadzania czatu:
Przeanalizuj pełną aplikację Galaxium Travels.
Zidentyfikuj wszystkich aktorów (typy użytkowników lub systemy zewnętrzne) i przypadki użycia, które każdy
aktor może wykonać, na podstawie stron frontendowych, endpointów REST backendu
i narzędzi MCP.
Wygeneruj flowchart LR Mermaid, który reprezentuje to jako diagram przypadków użycia,
grupując przypadki użycia pod ich odpowiednimi aktorami za pomocą podgrafów.
Escapuj nawiasy klamrowe w znacznikach Mermaid, aby renderer Mermaid nie
próbował interpretować nawiasów klamrowych jako składni szablonu.
Wygeneruj znaczniki Mermaid. Nie renderuj diagramu Mermaid.Bob analizuje aplikację i generuje znaczniki diagramu podobne do następujących:
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/{user_id} — get user bookings]
R6[POST /cancel/{booking_id} — cancel booking]
R7[POST /quotes — create quote proxy]
R8[GET /quotes/{id} — get quote proxy]
R9[POST /quotes/{id}/holds — create hold proxy]
R10[GET /holds/{id} — get hold proxy]
R11[POST /holds/{id}/confirm — confirm hold proxy]
R12[POST /holds/{id}/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| RestAPIZapisz diagramy w repozytorium
Przełącz Boba na tryb Agent i poproś go o zapisanie wygenerowanych diagramów w
repozytorium. Każdy diagram jest zapisywany jako plik Markdown w nowym
folderze docs/architecture/.
Przełącz się na tryb Agent
Wybierz Agent w selektorze trybu lub wpisz /agent w polu wprowadzania czatu.
Zapisz wszystkie trzy diagramy
Poproś Boba o utworzenie plików dokumentacji architektury.
Utwórz folder docs/architecture/ w katalogu głównym repozytorium.
Zapisz każdy z trzech diagramów, które wygenerowaliśmy, jako osobne pliki Markdown:
- class-diagram.md — diagram klas UML
- sequence-diagram.md — diagram sekwencji przepływu rezerwacji
- use-case-diagram.md — diagram przepływu przypadków użycia
Każdy plik powinien mieć krótki nagłówek tytułu, blok kodu Mermaid, który
wygenerowaliśmy, i krótki opis diagramu.Bob tworzy trzy pliki. Kliknij Approve i Save dla każdego pliku, który Bob zapisuje.
Zweryfikuj wynik
Otwórz każdy plik w eksploratorze plików Boba, aby potwierdzić, że bloki kodu Mermaid są obecne. Masz następujące opcje weryfikacji diagramów:
-
Poproś Boba o pokazanie podglądu pliku Markdown.
W polu wprowadzania czatu wprowadź następujący prompt:
Pokaż mi podgląd docs/architecture/class-diagram.mdBob renderuje plik Markdown, w tym diagram Mermaid, w interfejsie czatu. Kliknij wyrenderowany diagram, aby otworzyć go w większym widoku.
Możesz to zrobić dla każdego z trzech plików, aby zobaczyć wszystkie wyrenderowane diagramy.
-
Wklej znaczniki diagramu do Mermaid Live Editor, aby wyświetlić podgląd wyrenderowanego diagramu.
-
Zatwierdź i wypchnij zmiany do repozytorium GitHub. Następnie wyświetl pliki na GitHubie, aby zobaczyć wyrenderowane diagramy.
Rozwiązywanie problemów
Bob generuje znaczniki Mermaid, które się nie kompilują
Parser Mermaid jest rygorystyczny. Nawet pojedynczy nieprawidłowy znak, nieobsługiwane słowo kluczowe lub brakujący znak nowej linii może spowodować, że diagram zawiedzie po cichu lub wygeneruje błąd parsowania. Użyj następującego podejścia do zdiagnozowania i naprawienia problemu.
Zidentyfikuj wadliwą linię
Gdy Bob generuje błąd parsowania, wynik zawiera numer linii i fragment problematycznego kodu.
Jeśli Bob nie generuje błędu parsera, wklej znaczniki do Mermaid Live Editor. Edytor podświetla problematyczną linię i pokazuje błąd parsera, co może pomóc w zidentyfikowaniu problemu.
Możesz również wizualnie sprawdzić znaczniki pod kątem typowych problemów, takich jak nieescapowane znaki specjalne w etykietach, niezamknięte podgrafy lub błędy składni w strzałkach.
| Objaw | Prawdopodobna przyczyna | Rozwiązanie |
|---|---|---|
Błąd parsowania w pobliżu { lub } | Nieescapowane nawiasy klamrowe w etykietach węzłów flowchart lub classDiagram | Zamień { na { i } na } lub przeformułuj etykietę |
Błąd parsowania w pobliżu ( lub ) | Nawiasy w ID węzła | Owiń etykietę w cudzysłowy: A["label (note)"] |
Nieoczekiwany błąd end lub subgraph | Niezamknięty podgraf | Upewnij się, że każdy blok subgraph ma odpowiadający end |
| Nierozpoznany typ strzałki | Nieprawidłowa składnia strzałki dla typu diagramu | --> jest dla flowchart; classDiagram używa -->, ..>, --|> itp.; sequenceDiagram używa ->>, -->> |
| Węzeł zdefiniowany, ale niepołączony | Osierocony węzeł nie powoduje błędu, ale może zmylić niektóre renderery | Połącz węzeł lub usuń go |
| Diagram renderuje się częściowo, a następnie zatrzymuje | Etykieta zawiera gołe " | Escapuj cudzysłowy wewnątrz etykiet: A["it\'s a label"] |
Poproś Boba o naprawienie problemu
Podaj Bobowi błąd parsera i wadliwą linię. Następnie poproś Boba o naprawienie konkretnych linii.
Na przykład:
classDiagram Mermaid nie może być sparsowany z tym błędem:
Parse error on line 42: ...unexpected token 'NEWLINE'
Oto odpowiedni blok:
Booking ..> BookingStatus : status (active)
Napraw składnię, aby się kompilowała bez zmiany struktury diagramu.Bob może celować w wąską poprawkę bez regenerowania treści, którą już przejrzałeś.
Poproś Boba o walidację przed wygenerowaniem
Jeśli regenerujesz diagram od zera, dodaj wyraźną instrukcję walidacji do promptu:
Przed wygenerowaniem bloku Mermaid, mentalnie go sparsuj i potwierdź, że każdy ID węzła
jest prawidłowy, każdy podgraf jest zamknięty i wszystkie znaki specjalne w etykietach są escapowane.Zawęź zakres, gdy diagram jest duży
Jeśli diagram z wieloma węzłami nadal generuje nieprawidłowe znaczniki, poproś Boba o wygenerowanie go w sekcjach, takich jak najpierw modele Python, a następnie modele Java. Następnie poproś Boba o złożenie bloków. Mniejsze generacje są łatwiejsze dla Boba do walidacji i łatwiejsze dla ciebie do porównania.
Następne kroki
W tym samouczku użyłeś wzmianek kontekstowych i trybu Ask do eksploracji bazy kodu Galaxium Travels i wygenerowania trzech typów diagramów architektury z Bobem, a następnie użyłeś trybu Agent do zapisania ich w repozytorium. Kontynuuj z następującymi zasobami:
- Eksploruj samouczki wprowadzające Boba, aby dowiedzieć się więcej o możliwościach Boba z aplikacją Galaxium Travels.
- Śledź samouczek Planowanie i implementacja złożonych funkcji, aby użyć przepływu pracy Plan → Agent do dodania nowych funkcjonalności.
- Przeczytaj najlepsze praktyki Boba, aby nauczyć się skutecznych strategii promptowania do korzystania z Boba.
Poznawanie nieznanej bazy kodu
Użyj IBM Bob, aby szybko zrozumieć nieznaną aplikację — jej cel, strukturę projektu, architekturę, stos technologiczny, kluczowe komponenty, pokrycie testami i model wdrożenia. Możesz to zrobić bez polegania na nieaktualnej dokumentacji lub czekania na pomoc kolegów.
Generuj raporty audytowe i dokumentację zgodności
Użyj IBM Bob do analizy bazy kodu Galaxium Travels i tworzenia ustrukturyzowanych raportów audytowych obejmujących jakość kodu, stan zależności, dług techniczny i postawę zgodności. Dowiedz się, jak tworzyć dokumentację gotową dla interesariuszy z analizy wspomaganej przez AI.