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”?

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)
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?

specification { // define "types" of architecture elements
  element actor {
    style {
      shape person // how to render
    }
  }
  element system
  element component
  relationship async // allow "typed" relationship
}

model { // describe your architecture, single source of truth
  customer = actor 'Customer' {
    description 'A user of our product with active subscription'
    -> ui 'opens in browser' // how relationships are
  }
  cloud = system 'Our SaaS' {
    backend = component 'Backend' {
      description '
        Implements business logic
        and provides GraphQL API
      '
    }

    ui = component 'Frontend' {
      description 'NextJs application'
      style {
        shape browser
      }
    }

    ui -[async]-> backend 'requests via HTTPS'
  }
}

views {
  view index {
    include *, cloud.*

    style cloud.* {
      color green
    }
  }
}

Run to preview:

npx likec4 start

And this is rendered (click to explore):

Check the Tutorial - for a quick overview of LikeC4.