C4 is a type of system architecture diagram that offers a distinction between levels of detail, ranging from an overview and context of IT landscapes all the way to code and classes.

  1. System Context (users and dependencies)
  2. Containers (overall shape and tech choices)
  3. Components (logical components and interactions with containers)
  4. Code (implementation details)

1. System Context

  • the thing you are building and stuff around it
  • e.g. users
  • e.g. banking system, email system

2. Containers

  • a application of a datastore
  • not docker ;)
  • typically communicating between containers using network
  • e.g. webapp, api, database etc.

3. Components (logical components and interactions with containers)

  • a grouping of “stuff” with boundaries
  • running inside a container
  • architecture should be reflecting code level
    • e.g. language level modules / packages / dlls etc

4. Code (implementation details)

  • recommendation is to not do level 4 diagrams
  • not worth it, can often be generated automatically
  • e.g. class diagram

notation

  • put titles on pictures, including diagram type
  • layout sticky notes
  • visual consistency
  • avoid using acronyms

elements

  • first forget about color and shapes
  • favor unidirectional arrows
    • thing a calls thing b
    • thing a depends on thing b
    • match the text on the arrow
  • only use colors to complement a diagram that already makes sense without them

relations

  • focus on intent of relationship
    • e.g. makes api calls using
  • use dashed lines to indicate
  • add words to make relations more explicit
    • try speaking out relations as a sentence

legends

  • explain shapes line styles, borders acryonyms

takeaways

  • Diagrams are like Maps: you know what you get when you ask for a local map

resources