Schema-to-Screen — TOGAF architecture design

The Architecture Development Method applied to one product: agentic, RAG-grounded generation of GraphQL contracts and on-demand React UI over thousands of tables. One page per phase, every diagram responsive — SVG figures scale to any screen and can be zoomed; maps, matrices and catalogs reflow.

Interactive architecture ↗

NavigatorThe ADM wheel — click a phase

Tailored for a product architecture: Phases A–D carry the design diagrams; E and F carry the transition roadmap; G and H are expressed as the platform's own gates and drift handling. Requirements Management sits in the centre and traces to every gate.

Preliminary principles · tailoring · governance A Architecture Vision solution concept · stakeholders drivers → outcomes · scenario B Business Architecture capability map · value stream process swimlanes · roles C Data Architecture conceptual model · lifecycle classification · CRUD C Application Architecture components · interfaces interaction matrix · sequences D Technology Architecture platform decomposition environments · deployment E Opportunities & Solutions gap analysis · work packages transition architectures F Migration Planning M0 → M6 roadmap exit criteria · dependencies G Implementation Governance the nine gates as compliance checkpoints · review H Architecture Change Management drift as change triggers · degraded state · re-verification Requirements Management catalog · NFRs · traceability

InventoryDiagrams and catalogs in this set

PhaseArtifactFormPage
PreliminaryArchitecture principles catalog · tailoring decisionscatalogRequirements & principles
A · VisionSolution concept diagram · stakeholder map · driver → goal → objective → outcome chain · business scenarioSVG · grid · chainArchitecture vision
B · BusinessBusiness capability map (heat-mapped) · value stream · process flow (swimlanes) · actor/role–capability matrix · business services cataloggrid · SVG · matrixBusiness architecture
C · DataConceptual data model · data lifecycle & dissemination · data security (classification × enforcement point) · entity/component CRUD matrixSVG · matrixData architecture
C · ApplicationApplication component & communication diagram · application interaction matrix · generation-run sequence · runtime request sequenceSVG · matrixApplication architecture
D · TechnologyPlatform decomposition · environments & locations · networked computing / deployment diagram · technology standards cataloggrid · SVG · catalogTechnology architecture
E · OpportunitiesGap analysis matrix · work packages · transition architecturesmatrix · timelineRoadmap
F · MigrationImplementation & migration plan M0 → M6 with exit criteria and dependenciestimelineRoadmap
G · GovernanceCompliance checkpoints = the nine verifier gates + human review; architecture contractcatalogGovernance
H · ChangeChange triggers (catalog drift, policy change, model retirement) · degraded state · re-verificationcatalogChange management
RequirementsRequirements catalog (functional + NFR) with traceability to components and gates · risk registercatalogRequirements

How to readConventions used across the set

Colour = concern

Blue — generation agents and orchestration · Teal — grounding (catalog, policy) · Green — verification · Amber — human decisions · Pink — governed runtime · Grey — data and external actors.

Status tags

NEW capability or component introduced by Schema-to-Screen · ENHANCED existing capability changed · EXISTING unchanged, integrated.

Any device

SVG figures scale to width; use the Fit / 150% / 200% buttons on a phone, then scroll inside the figure. Grids, matrices and catalogs reflow to one column below ~640px. Print produces one figure per block.

Honesty

This is a target architecture for a reference implementation. Counts and metrics are design targets, not measurements. The worked scenario (Customer Success account-risk 360) is generic and synthetic.