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?
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:
- Online playgrounds:
- Online with github.dev (opens in a new tab)
- Online with vscode.dev (opens in a new tab)
- Install official VSCode extension (opens in a new tab)
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)).