Toolchain for your architecture diagrams

Architecture-as-a-code with live diagrams

What is LikeC4?

LikeC4 is a powerful set of tools and a Domain-Specific Language (DSL) designed to describe your architecture as a single, cohesive model, which is then compiled into multiple diagrams.

Your code is the single source of truth, and only you own it.
Any change, refinement or deprecation is reflected automatically.
No more outdated diagrams!
And with version control, your history of changes is always at your fingertips.

LikeC4 offers:

Architecture-as-a-code with IDE support
A development server with live reload capabilities
Static website generation — check out the live demo
React and Web Components for embedding in your website
Vite plugin for seamless integration
API to traverse your model
CI/CD automation via CLI and GitHub Actions
Export options to multiple formats:
- PNG
- Mermaid
- D2
- DOT (Graphviz)
- PlantUML
MCP Server

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

Why “like”?

The name “LikeC4” reflects its inspiration from the C4 Model and Structurizr DSL, while extending and offering enhanced flexibility and customization.

You can use your own ubiquitous language, define your terms, and create as many nested levels as needed.

What does LikeC4 look like?

// You start with defining your terms and ...
specification {
  // ... "types" of your elements
  element actor {
    style {
      shape person // how to render
    }
  }
  element system
  element component
  // and "typed" relationships (if you need)
  relationship async
}

// Here goes your model, the single source of truth
model {
  customer = actor 'Customer' {
    description 'A user of our product with active subscription'
    -> ui 'opens in browser'
  }

  cloud = system 'Our SaaS' {
    backend = component 'Backend' {
      icon tech:graphql
      description 'Implements business logic and provides GraphQL API'
    }

    ui = component 'Frontend' {
      description 'NextJS application'
      style {
        icon tech:nextjs
        shape browser
      }
    }

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

// And finally, you define what to render
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):

Get started How to quickly start with LikeC4 and create your first architecture diagram