Open Source 2.9k

Architecture as Code

Describe your system architecture with code. Visualize, validate and share — all from a single source of truth.

Get Started View on GitHub

landscape-view.c4

How it works

Write. See. Ship.

A streamlined workflow that takes you from architecture definition to shareable diagrams in three simple steps.

Write

Define your architecture using a simple, expressive DSL. Describe components, relationships and boundaries as code.

model {
  customer = actor 'Customer'
  cloud = system 'Our SaaS' {
    ui = component 'Frontend'
    api = component 'Backend'
    ui -> api 'requests'
  }
  customer -> ui
}

See

Get instant visual diagrams generated from your code. Explore different views of your system at any level of detail.

Ship

Export diagrams, embed in docs, or share interactive views with your team. Keep everyone aligned on architecture.

terminal

$ likec4 build
  Building static site...
$ likec4 generate react
  Generated React components
$ likec4 serve
  Serving at http://localhost:5173

Capabilities

Everything you need

A complete toolkit for modeling, visualizing, and validating your software architecture — all from code.

Your Language

Define your system with a clean DSL, designed for clarity and control. LLM-friendly syntax that AI agents understand natively.

specification {
  element actor {
    style {
      shape person
    }
  }
  element system
  element component
  relationship async
}

Versioned

Store diagrams in Git, track changes, and collaborate using familiar workflows.

AI-Friendly

Expose your architecture context to AI agents via MCP server or API — no extra effort.

Interactive Views

Navigate and explore your architecture diagrams interactively. Drill down into components and relationships.

Integrate Anywhere

Embed interactive diagrams into docs, websites or apps — via Vite Plugin, React or Web Components.

Diff & Validation

Validate changes automatically. Catch architectural drift and breaking changes before they ship.

Demo

See it in action

architecture.c4

model {
  customer = actor 'Customer' {
    description 'A user of our product'
  }
  cloud = system 'Our SaaS' {
    description 'Our product'
  }
  customer -> cloud 'uses to manage data'
}

model {
  customer = actor 'Customer' {
    description 'A user of our product'
  }
  cloud = system 'Our SaaS' {
    description 'Our product'
    ui = component 'Frontend'
    customer -> ui 'opens in browser'
  }
  customer -> cloud 'uses to manage data'
}

model {
  customer = actor 'Customer' {
    description 'A user of our product'
  }
  cloud = system 'Our SaaS' {
    description 'Our product'
    ui = component 'Frontend'
    customer -> ui 'opens in browser'
    backend = component 'Backend'
    ui -> backend 'requests via HTTPS'
  }
  customer -> cloud 'uses to manage data'
}

preview

Launch Playground Try it yourself in interactive playground

Built by the community

Thanks to everyone who has contributed to LikeC4.

Star on GitHub Join Discord