Live Demo: The Architecture Portal
Everything on This Page Was Generated by AI
The NovaTrek Architecture Portal is a live, deployed website built entirely during this proof of concept. Every page, every diagram, every Swagger UI — generated from OpenAPI specs and workspace context by AI-assisted workflows.
Visit the Portal
https://mango-sand-083b8ce0f.4.azurestaticapps.net
Open in a new tab to explore alongside this presentation.
Guided Tour
1. Enterprise System Context
What to look at: The enterprise-level C4 diagram showing all 19 microservices grouped by domain.
Key features:
- Every service box is clickable — click to navigate to the service's deep-dive page
- The PCI DSS Compliance Zone highlights payment data flows in red
- External systems (Payment Gateway, Stripe API, mapping providers) are shown in gray
- Cross-domain relationships show which services communicate
Where to find it: Navigate to any microservice page and look for the "System Context" section, or find the Enterprise C4 on the portal home page.
2. Microservice Deep-Dive Pages
What to look at: Pick any microservice — for example, svc-check-in (the most connected service).
Key features on each page:
- Service metadata — domain, owner, version, data store technology
- Endpoint documentation — every API endpoint with a clickable SVG sequence diagram
- Cross-service integrations — which services this one calls, with deep links to the target endpoint
- C4 context diagram — all upstream and downstream dependencies
- Links to Swagger UI — interactive API documentation for this service
What to notice: Click a relationship arrow in the C4 diagram. It navigates to the specific endpoint on the target service's page — not just the service, but the exact operation. This is what "navigable architecture" means.
3. Swagger UI Pages
What to look at: The interactive API documentation for any service.
Where to find it: Portal Home > Service Catalog > click any service tile.
Key features:
- Full OpenAPI spec rendered as interactive documentation
- Every endpoint expandable with request/response schemas
- Download link for the raw YAML spec
- Navigation back to the Service Catalog and Portal Home
4. Sequence Diagrams
What to look at: The SVG sequence diagrams on any microservice page.
Key features:
- Each endpoint has its own sequence diagram showing the request lifecycle
- External service calls are shown as interactions between participants
- PCI-tagged flows (on svc-payments) have red arrows and pink backgrounds
- Diagrams are SVGs with clickable elements — participant boxes link to the target service's page
- Fullscreen view available for detailed analysis
By the Numbers
This portal was generated from:
| Input | Output |
|---|---|
| 19 OpenAPI YAML specs | 19 microservice deep-dive pages |
| Cross-service integration map | 139 endpoint sequence diagrams (SVG) |
| Service dependency graph | 20 C4 context diagrams (SVG) |
| Application consumer definitions | 3 application pages + 25 integration diagrams (SVG) |
| Service metadata | 19 Swagger UI pages (interactive HTML) |
| Architecture content | 57 total Markdown pages |
Total: 301 published artifacts from a workspace of OpenAPI specs and architecture content.
What This Demonstrates
| Claim | Evidence in the Portal |
|---|---|
| "Diagrams are auto-generated" | 184 SVGs rendered from PlantUML source, all generated from specs |
| "Cross-links are maintained automatically" | Every C4 arrow links to a real endpoint on the target service page |
| "Swagger UI is embedded" | 19 interactive API doc pages with inline JSON specs |
| "PCI compliance is visualized" | Red data flow lines in enterprise C4 and per-service diagrams |
| "Everything is searchable" | Use the search bar — full-text search across all 57 pages |
| "Publishing is automated" | The entire portal deploys in under 30 seconds via swa deploy |
This portal required zero manual diagram creation, zero manual cross-linking, and zero manual page authoring. The generators read OpenAPI specs and produce everything. When a spec changes, the portal updates automatically on the next build.