C4MJS makes it easier to store architecture as code and view it by providing:
- @c4mjs/cli Command line tool to compile the yaml/json workspace definition
- c4model.app React App to view your workspace as interactive C4 Diagraphs rendered by Graphviz
To preview an example workspace visit https://c4model.app/
The Workspace allows us to describe our architecture in YAML/JSON
$ref parsing is done automatically so you can bundle/split your architecture docs as you see fit, see Swagger for more info.
See Big Bank Plc Example for an illustrative example of workspace splitting.
The CLI reads the workspace and creates a bundle. This bundle is then hosted and c4model.app reads and renders it, all on the client.
mkdir architecture && cd architecture
npx @c4mjs/cli init
npm install && npm run build
This will now generate a workspace.json
file in the folders root. 🚀
Serve it
npm run serve
Visit c4model.app to view it, pop the URL http://localhost:9876/workspace.json
into the bar.
🎉 Tada 🎉
Explore the workspace using the interactive viewer.
See the full Docs and Workspace api at https://c4mjs.github.io/c4mjs/#/
Workspace defined in YAML/JSON with hosted Schemas for intellisense:
- https://c4model.app/cli/Workspace.schema.json
- https://c4model.app/cli/Group.schema.json
- https://c4model.app/cli/Person.schema.json
- https://c4model.app/cli/System.schema.json
- https://c4model.app/cli/Container.schema.json
- https://c4model.app/cli/Component.schema.json
Loosely coupled App allowing you to create your own apps using @c4mjs/graphviz
Completely Open Source Codebase, all in this repo.
All bundling and rendering is performed client side, no hosting required and no schemas sent anywhere!
Take advantage of all your current development practices to manage and maintain your c4 model architecture.
- Check the homepage for the C4Model
- Highly recommend watching the C4Model presentation to get a solid understanding of the concepts