LikeC4 Show and Tell

A very short Carpentries-style lesson introducing LikeC4 through a worked demo. With extensions to show a data flow view, and a deployment view.

Repo structure

There are two significant parts to this repo:

• example LikeC4 files for reference
• a course describing how to create the reference files from the ground up

Examples

To view the example diagram in this repo you can run the documented docker command or other tools in the repo root.

Course

Introduction

Software diagrams are frequently less helpful than the creators would hope.

Often,abstractions of different levels are muddled and diagrams present both too much detail and too little information at the same time.

C4 Model

The C4 Model for software diagrams aims to mitigate these problems by providing a clear structure for the different levels software is organised at.

It sets out four levels of diagram:

Context: shows the system as a single box and its relationships to users and other systems.

Container: shows the containers (applications, databases, etc.) that make up the system and their relationships.

Component: shows the components that make up a container and their relationships.

Code: shows the code elements that make up a component and their relationships.

Context diagrams are useful for communicating with non-technical stakeholders, while container and component diagrams are more useful for technical audiences. Code diagrams are rarely used.

Challenges

The C4 model is a great starting point for software diagrams, however, preparing the diagrams manually in tools such as draw.io or Visio is time consuming and error prone. It also cannot be version controlled.

Even when the diagrams are made and maintained, they are not engaging for non-technical users who can struggle to explore the diagrams and understand the relationships between the different elements.

LikeC4

LikeC4 solves these problems by providing a code based approach to creating C4 diagrams.

LikeC4 allows you to create C4 diagrams using a simple DSL (Domain Specific Language) allowing the diagram to live alongside the codebase and be version controlled.

It also provides a web-based viewer that allows users to interactively explore the diagrams and understand the relationships between the different elements in a natural way.

If you would like to see a functioning LikeC4 diagram of a system being developed within the RSE team, you can visit this webpage and the source code is available in this repo.

If you are interested in creating your own diagrams you can read on for a few short interactive lessons on how to get started with LikeC4.

Lessons

1. Setup Links to the official LikeC4 editor and Docker docs, including the VS Code extension.

2. Main demo Build up a LikeC4 model from a simple context diagram through containers, relationships, views, and styling.

3. Data flows Show how a dynamic view can explain request and response paths more clearly than a static architecture diagram alone.

4. Deployment diagrams Introduce creating a deployment diagram, reusing the existing models and adding hardware details.

Audience

This material is an extension of the Show and Tell that will be given by Oliver Woolland on 2026-05-20. It is aimed at RSEs at the University of Manchester but can serve as a general but limited introduction to LikeC4.