Toolchain for your architecture diagrams

Architecture-as-a-code with live diagrams

What is LikeC4?

LikeC4 is a set of tools and DSL, that describes architecture as a single model and then compiled into multiple diagrams.

Your code is single source of truth.
Any change, refinement or deprecation is reflected automatically in the architecture diagrams.
No more outdated documentation!
And history of changes is your version control system.

LikeC4 provides:

architecture-as-a-code with native IDE support
development server with live reload
static website generation (live demo)
React and Webcomponents generation to embed to your website
CI/CD automation via CLI and GitHub Actions
export to various formats:
- PNG
- Mermaid
- D2
- DOT (Graphviz)

You can use LikeC4 standalone or integrate with existing toolchain.

Why “like”?

LikeC4 is inspired by the C4 model and Structurizr DSL, and goes beyond them by offering flexibility and customization.
You can use your ubiquitous language, your terms and any number of nested levels.

If you never heard about C4 Model, check the website.

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 { // single source of truth
  customer = actor 'Customer' {
    description 'A user of our product with active subscription'
    -> ui 'opens in browser'
  }
  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 {
    title 'Landscape view'
    include *, cloud.*

    style cloud.* {
      color green
    }
  }
}

Run CLI to preview:

likec4 start

And this is rendered (click to explore):

Check the Tutorial - for a quick overview of LikeC4.