C4 Model

Created on: September 03, 2023Modified on: September 19, 2023

The C4 Model is a form of documenting architecture.

It stands for:

DSL

The bare minimum is:

Plaintext
workspace {
  model {
    // most of code here
  }
  views {
    theme default
  }
}

Inside the model you can have:

Once you have those defined you can make relationships using ->:

Plaintext
workspace {
  model {
    my_user = person "Person title" "Person description."
    my_system = softwareSystem "System Title" "System description"

    my_user -> my_system "Title of connection" "Connection description"
  }
  views {
    theme default
  }
}

The above generates: C4 Basic

Besides that you can also define components inside a software system:

Plaintext
workspace {
  // ✅  add this to allow dot notation used later
  !identifiers hierarchical
  model {
    my_user = person "Person title" "Person description."
    my_system = softwareSystem "System Title" "System description" {
        // ✅ adding a container called backend
        backend = container "Backend Title" "Backend Description" "Technology"
        db = container "Database" "Database Description" "MySQL"
        
        // ✅ make the connection between them
        backend -> db "Read and write" "Using JDBC"
    }

    my_user -> my_system "Title of connection" "Connection description"

    // ✅ we can also link entities inside/outside the system using this syntax. We use dot notation to express a component inside a system
    my_user -> my_system.backend "Use REST APIs" "JSON/HTTPS"
  }
  views {
    theme default
  }
}

With the above we can generate the same image as before when using the System Landscape view. However, in addition to that we can generate the Container diagram for the System my_system: C4 Container

The last important thing is that you can define tags:

Plaintext
workspace {
  !identifiers hierarchical
  model {
    my_user = person "Person title" "Person description."
    my_system = softwareSystem "System Title" "System description" {
        
        backend = container "Backend Title" "Backend Description" "Technology"
        // ✅ added a tag called "my_tag" at the end
        db = container "Database" "Database Description" "MySQL" "my_tag"
        
        backend -> db "Read and write" "Using JDBC"
    }

    my_user -> my_system "Title of connection" "Connection description"
    my_user -> my_system.backend "Use REST APIs" "JSON/HTTPS"
  }
  views {
    // ✅ added a style to be applied for anything tagged with "my_tag"
    // full reference here: https://docs.structurizr.com/dsl/language#element-style
    styles {
      element "my_tag" {
        shape Cylinder
      }
    }
    theme default
  }
}

Which generates the same thing but with database having a different shape.

C4 With Style