A schema-driven, white-label architecture catalog that turns Markdown files into a beautiful, interactive static site.
Live Demo — explore a sample catalog with 6 domains and 180+ entities.
Documentation — getting started, features, modeling guide, and deployment.
Model your enterprise architecture using plain Markdown files with YAML frontmatter, define your schema in a single YAML mapping, and get a fully navigable catalog — dashboards, domain maps, element details, context graphs, event flows, and health scores — with zero custom code.
git clone https://github.com/ea-toolkit/architecture-catalog.git
cd architecture-catalog/catalog-ui
npm install
npm run dev
# → Open http://localhost:4321The catalog reads your registry-v2/ folder and renders everything automatically.
registry-mapping.yaml → registry-v2/**/*.md → catalog-ui/
(Schema) (Data) (Static site)
- Define your schema in
models/registry-mapping.yaml— types, fields, relationships, layers, branding - Add elements as Markdown files in
registry-v2/with YAML frontmatter - Build — the loader reads the schema, scans every
.mdfile, resolves cross-references, and generates a full static site
No databases, no servers, no vendor lock-in. Just files, Git, and a build step.
- Dashboard — domain cards with hover stats, element counts, dark/light theme
- Domain overview — elements grouped by type, maturity badges, relationship tables
- Element detail — metadata card, outgoing/incoming relationships, rich Markdown docs
- Context maps — interactive dependency graphs with search, filter, focus mode, PNG export
- Event flow maps — animated publish/consume diagrams with cross-domain connections
- Diagrams — PlantUML, BPMN, and draw.io rendered inline with zoom and source view
- Discover — search and filter across the entire catalog
- White-label — change a few lines of YAML to brand it as your own
- Vocabulary-agnostic — works with ArchiMate, TOGAF, C4, or any custom vocabulary
- Dark mode — default dark theme with toggle, consistent across all views
Full documentation with demo videos: docs-architecture-catalog.web.app
| Section | What you'll find |
|---|---|
| Getting Started | Installation, project structure, 5-minute quickstart |
| Features | Dashboard, context maps, event flows, diagrams — with videos |
| Modeling | Registry mapping, elements, relationships, domains |
| Configuration | YAML reference, branding, layers & types |
| Architecture | How it works, data pipeline, extending the UI |
| Tools | Validation, dashboard generator, Claude skills |
| Deployment | Firebase, GitHub Pages, Docker, static hosting |
git checkout -b feat/my-feature
# Make changes (schema, data, or UI)
cd catalog-ui && npm run build # ValidateSee the contributing guide for full details.
The catalog UI design is inspired by EventCatalog by David Boyne. EventCatalog is an excellent tool for documenting event-driven architectures — if that's your focus, check it out.
Architecture Catalog takes a different approach: vocabulary-agnostic, schema-driven, and built for enterprise architecture modelling across all layers (not just events).
MIT — see LICENSE for details.