Context
An architecture DSL plus renderer in TypeScript and Vite. One .zarch file per system holds the model
for every C4 level: context, containers, components and code.
Problem
Architecture diagrams drift from the system and from each other: the context diagram lives in one tool, the container diagram in another, and nobody keeps them in sync. Readers also cannot move from the big picture to a detail without opening a different file.
Approach
- A compact text DSL: one file, all four C4 levels, version-controlled next to the code.
- A renderer that puts the whole model on one infinite canvas with continuous zoom. Zooming in reveals the next C4 level in place, so the context diagram and its containers are the same picture at different magnifications.
Outcome
Architecture is reviewed in pull requests like code, and a reader navigates from system context to a single component by zooming instead of by opening separate diagrams.
The repository is private. A walkthrough is available on request.