Docs
Getting Started

What is LikeC4?

LikeC4 is a language, a DSL, that describes architecture as a single model and then compiled into multiple diagrams, from different perspectives and details.

You have a single source of truth - your code.
Any change, refinement or deprecation in the model is reflected automatically, keeping diagrams up-to-date and synchronized with the actual state.

Why "like"?

If you never heard about C4 Model, check the website (opens in a new tab), you get the idea very quickly.

LikeC4 inherits the simplicity of C4, but allows you to use your own notation, your element types and any number of nested levels and detalization.

Also, LikeC4 is a toolchain that provides:

  • architecture-as-a-code with native IDE support
  • development server with live reload
  • static website generation (live demo (opens in a new tab))
  • interactive and customizable React diagrams in-the-box
  • CI/CD automation via CLI and GitHub Actions
  • export to various formats:
    • PNG
    • Mermaid
    • D2
    • DOT (Graphviz)

You can use LikeC4 as a standalone tool or integrate it into your existing toolchain.

What does LikeC4 look like?

example.c4
specification {
  // Element kinds used in our architecture
  element actor {
    style {
      shape person
    }
  }
  element system
  element component
  // Relationship kind
  relationship async
}
 
// Describe the architecture
model {
  customer = actor 'Customer' {
    description 'Customer of Cloud System'
  }
  
  cloud = system 'Cloud System' {  
 
    backend = component 'Backend' {
      description 'Backend services and API'
    }
 
    ui = component 'Frontend' {
      description '
        All the frontend applications
        of Cloud System
      '
      style {
        shape browser
      }      
    }    
  }
 
  customer -> ui 'opens in browser'  
 
  // Relationship of predefined kind
  ui -[async]-> backend 'requests via GraphQL'
}
 
// What diagrams to generate
views {
  view of cloud {
    include *
 
    style * {
      color muted
    }   
    style cloud.* {
      color green
    }
  }
}

Quick Start

Follow the tutorial to get the idea, but if you are impatient and want to try:

From Template

Fork this template repository (opens in a new tab)
It provides a minimal setup to start with LikeC4 (live demo (opens in a new tab)).

Open in StackBlitz (opens in a new tab)

Tutorial