1 Introduction

Architecture diagrams often become outdated. When teams rely on manual drawing tools, the version in the diagram diverges from the system in production. 

The “Architecture as Code” paradigm strives for a single source of truth: treat your architecture model like code, version it, evolve it alongside the system.

LikeC4 is a domain-specific language (DSL) created for exactly that purpose.

It builds on the ideas of the C4 Model (Context → Container → Component → Code) but offers more flexibility: you define your own element kinds and arbitrary nesting levels.

Talk is cheap, here is the code to get you started immediately!

2 What LikeC4 offers

Each project that uses LikeC4 would consist of:

• A specification block where you define kinds of elements (actor, system, service, etc) and optionally their default styling. This can be defined in a spec.c4 file
• A model block where you instantiate elements, nest them, define relationships
• A views block where you specify which parts of the model to render in each diagram (via include/exclude predicates) and optionally style overrides for that view

3 LikeC4 Diagrams

In the sample code you can see the following diagrams/views of an imaginary saas.

Keep in mind that you can create as many views as you want, depending on the viewer. 

So if you create views for business people, you might want to keep it high level.

If you create views for more technical people, you can create more technical views. 

3.1 System Landscape

This is the top level view where we see the users, our saas platform and the payment gateway:

3.2 Containers of the saas platform

This is the second level of our architecture:

3.3. Backend Component View

Here we see all the backend components of our saas:

4 Running Locally

In the sample code you can find the following script that allows you to run LikeC4 locally in a docker container:

docker run --rm \
  -v "$PWD":/data \
  --init \
  -t \
  -p 5173:5173 \
  -p 24678:24678 \
  -e CHOKIDAR_USEPOLLING=1 \
  -e CHOKIDAR_INTERVAL=200 \
  likec4/likec4 \
  start

5 Tips for using LikeC4 effectively

• Define element kinds at the start of the file or in a specs.c4 file. Consistent kinds make views predictable and prevent duplication
• Use multiple views to simplify viewing and reading
  • Instead of showing every component in one diagram, split into views(landscape, container, component, and others). Stakeholders will find it easier to follow.
• Integrate diagrams into your documentation site
  • The Vite or React plugins let you embed LikeC4 diagrams directly in docs so they stay synchronized with architecture files.

6 Three gotchas to watch out for

• Too many nesting levels
  • Deep hierarchies make diagrams unreadable. Limit nesting to meaningful groupings.
• Over-customizing styles
  • Visual clarity should outweigh decoration. Use minimal color and icon changes to keep emphasis clear.
• Neglecting view updates
  • After model refactors, old include or exclude rules may miss new elements. Always re-validate with the CLI or Docker command.

7 Conclusion

LikeC4 treats architecture as part of the codebase rather than an external artifact.

The result is consistent, reviewable, and living documentation. With Docker, you can test or generate diagrams in minutes, no installation required.

Architecture as Code is not a slogan—it’s a practical step toward keeping what you draw aligned with what you deploy.