likec4/likec4: Live Architecture Diagrams from Code

likec4/likec4: Live Architecture Diagrams from Code

Software architecture diagrams are a persistent pain point for development teams. They start accurate, then drift out of sync with the codebase within weeks. Manual updates in Confluence, Lucidchart, or draw.io become a chore that nobody owns. The result: diagrams that mislead more than they guide, especially during onboarding or incident response when accuracy matters most.

likec4/likec4 addresses this directly by treating architecture as code. It provides a modeling language and toolchain to generate diagrams that stay synchronized with your codebase—what the project calls "always up-to-date, live diagrams." Rather than maintaining diagrams separately, you define your architecture in a domain-specific language and regenerate visuals on demand. This shifts documentation from a lagging artifact to a living system component.

For teams practicing [INTERNAL_LINK: infrastructure-as-code] or seeking to reduce documentation debt, likec4 offers a pragmatic path forward. The project is open-source under MIT, actively maintained in TypeScript, and includes first-class VS Code integration.

What is likec4/likec4?

likec4 is a modeling language for software architecture paired with tools that generate diagrams from the model. It is inspired by the C4 Model and Structurizr DSL, but deliberately extends both with additional flexibility.

The project is maintained as an open-source repository at likec4/likec4 on GitHub, with 3,797 stars, 250 forks, and its last commit dated July 14, 2026—indicating active, recent development. The primary implementation language is TypeScript, and the project ships under the MIT License.

The "like" in LikeC4 signals its relationship to the C4 Model without being constrained by it. Where C4 prescribes four fixed levels (Context, Container, Component, Code), LikeC4 allows you to customize or define your own notation, element types, and any number of nested levels. This makes it suitable for organizations whose architectural abstractions don't map cleanly to C4's hierarchy, or who need domain-specific visual conventions.

The toolchain includes:

• A CLI for local development and CI/CD integration
• A VS Code extension for authoring with syntax highlighting and validation
• A playground and template repository for experimentation
• Support for deployment as live, browsable documentation

Key Features

Architecture-as-Code DSL LikeC4 provides a purpose-built language for describing systems, containers, components, and their relationships. The DSL supports custom element types and relationships, meaning you're not limited to "person," "software system," "container," and "component." You can model microservices, data pipelines, ML inference graphs, or organizational structures using vocabulary that matches your domain.

Live Diagram Generation Diagrams render from the model on demand. Change the code, regenerate the visual. This eliminates the manual synchronization loop that causes traditional architecture diagrams to decay. The project emphasizes "always actual and live diagrams from your code" as its core value proposition.

Nested Levels Beyond C4 Unlike strict C4 implementations, LikeC4 supports arbitrary nesting depth. This matters for complex systems where a "component" at one level contains sub-components that warrant their own diagrams, or where organizational boundaries don't fit the four-level model.

VS Code Integration The dedicated extension (available on both VS Code Marketplace and Open VSX) provides syntax highlighting, validation, and presumably autocomplete—though the README does not detail specific IDE features beyond installation metrics.

CLI-First Workflow The likec4 CLI supports local preview, build, and likely export operations. This enables integration with static site generators, documentation pipelines, and CI/CD workflows where generated diagrams can be published automatically.

Template Repository & Playground The project provides a template repository with a live deployment and a StackBlitz playground for zero-install experimentation. This lowers the barrier to evaluation before committing to adoption.

Use Cases

1. Microservices Architecture Documentation Teams with dozens or hundreds of services struggle to maintain accurate dependency maps. LikeC4's DSL can model services, their APIs, databases, and message queues as typed elements with explicit relationships. The generated diagrams stay current as the DSL file is version-controlled alongside service code.

2. Onboarding and Knowledge Transfer New engineers face steep learning curves understanding system boundaries. Live diagrams that reflect current architecture—rather than last quarter's—reduce time-to-productivity. The nested level support means you can present appropriately abstracted views: high-level context for executives, detailed component views for implementers.

3. Incident Response and System Evolution During incidents, teams need accurate system maps to trace blast radius and identify failure points. Static diagrams that omit recent architectural changes actively hinder response. LikeC4's code-based approach means diagrams can be regenerated from the same commit being investigated, ensuring alignment.

4. Custom Notation for Regulated Industries Organizations in finance, healthcare, or government often have mandated architectural frameworks (TOGAF, DoDAF, etc.). LikeC4's customizable element types and notation allow mapping these frameworks into the DSL, generating compliant diagrams without maintaining separate tooling.

5. Documentation-Driven Design Reviews Architecture review boards often require visual documentation. By authoring in LikeC4 before implementation, teams can validate structural decisions through reviewable diagrams, then preserve the same artifacts as implementation documentation.

Installation & Setup

The quickest path to running LikeC4 locally uses npx with the project's CLI:

# Start the local preview server
npx likec4 start

This command, reproduced directly from the project README, launches a development server for previewing diagrams as you edit .likec4 source files.

For persistent installation or CI/CD integration, install via npm:

# Install globally or as project dependency
npm install -g likec4
# or
npm install --save-dev likec4

The VS Code extension provides the authoring experience. Install from:

• Visual Studio Marketplace (badge indicates install count)
• Open VSX Registry for VS Code-compatible editors like VSCodium

For zero-setup exploration, use the StackBlitz template or clone the template repository:

git clone https://github.com/likec4/template.git
cd template
npx likec4 start

The template's deployed instance demonstrates the output format without requiring local installation.

Real Code Examples

The README includes one explicit source example, shown as a screenshot rather than extractable text. The image depicts a .likec4 file with syntax for defining elements and relationships. Based on the C4-inspired design and documented capabilities, the DSL structure follows this pattern:

// Define custom element types beyond standard C4
specification {
  element actor
  element system
  element service
  element database
}

// Model the architecture with typed elements and relationships
model {
  user = actor 'User' {
    description 'End user of the application'
  }

  webapp = system 'Web Application' {
    description 'React↗ Bright Coding Blog frontend served via CDN'
  }

  api = service 'API Gateway' {
    description 'Kong gateway handling auth and routing'
  }

  orders = service 'Order Service' {
    description 'Handles order lifecycle'
  }

  db = database 'PostgreSQL↗ Bright Coding Blog' {
    description 'Primary transactional store'
  }

  // Define relationships
  user -> webapp 'uses via browser'
  webapp -> api 'sends requests'
  api -> orders 'routes to'
  orders -> db 'reads/writes'
}

// Generate a specific view from the model
views {
  view index {
    title 'System Overview'
    include user, webapp, api, orders, db
  }
}

This reconstructed example illustrates the DSL's structure: specification for type definitions, model for element instances and relationships, and views for diagram generation scope. The actual syntax may vary; consult the project tutorial for authoritative reference.

The CLI renders this to interactive diagrams:

# Generate and serve diagrams from current directory
npx likec4 start

# Likely build command for static export (check CLI docs)
npx likec4 build

The README's result screenshot shows a rendered diagram with styled boxes, relationship arrows, and a clean layout—suggesting automatic graph positioning without manual coordinate specification.

Advanced Usage & Best Practices

Version Control Your Model Treat .likec4 files as source code. Review changes in pull requests alongside implementation changes. This creates an audit trail of architectural decisions and enables git blame for understanding when relationships were added or modified.

Generate in CI/CD Add npx likec4 build (or equivalent) to documentation pipelines. Publish outputs to internal documentation sites, ensuring diagrams reflect the branch being built. This is particularly valuable for [INTERNAL_LINK: developer-portals] that aggregate service documentation.

Start with the Template The likec4/template repository provides a working foundation. Fork it rather than starting from scratch to benefit from established patterns and configuration.

Use Nested Levels Judiciously The flexibility for arbitrary nesting is powerful but can produce diagrams that are too dense to parse. As a rule of thumb, limit any single view to 7-10 elements where possible, using multiple focused views rather than comprehensive but unreadable overviews.

Community Support The project maintains Discord and GitHub Discussions for help. Given the project's active commit history, these channels likely receive maintainer attention.

Comparison with Alternatives

Structurizr DSL is the closest conceptual match—both are C4-oriented, code-first approaches. Structurizr offers commercial support and a stricter model, which may appeal to enterprises needing governance. LikeC4's advantage is flexibility: custom element types and nesting suit teams whose architectures don't fit C4's four-level constraint.

PlantUML with C4 extensions provides broader UML support but lacks LikeC4's dedicated architecture focus and modern CLI/VS Code tooling. The skinparam-based styling is more verbose than LikeC4's presumably cleaner notation definitions.

Mermaid excels for quick diagrams embedded in Markdown but lacks the modeling rigor—no type system, no validation, no multi-view generation from a single model. It's complementary rather than competitive for architecture documentation.

FAQ

Q: What license does likec4 use? MIT License. Free for commercial and personal use with minimal restrictions.

Q: Does it require the C4 Model knowledge? Helpful but not mandatory. LikeC4 is inspired by C4 but extends it; the tutorial covers fundamentals.

Q: Can I use my own notation and icons? Yes. The specification block allows defining custom element types and visual styles.

Q: Is there a hosted/cloud version? The README does not mention one. Self-hosted via CLI build output or deployed template instances.

Q: How active is development? Last commit July 14, 2026, with 3,797 stars and ongoing community engagement via Discord.

Q: Can diagrams export to PNG/SVG/PDF? The README implies build output but doesn't specify formats. Check CLI documentation for current capabilities.

Q: Does it integrate with existing documentation tools? The generated output is web-deployable. Specific integrations (Docusaurus, MkDocs, etc.) aren't documented in the README.

Conclusion

likec4/likec4 occupies a specific niche: teams that need architecture diagrams to stay current without manual maintenance, but find strict C4 implementations too constraining. Its TypeScript-based toolchain, MIT licensing, and active development make it a low-risk option to evaluate.

The tool suits engineering organizations with enough architectural complexity to justify a DSL, and enough discipline to version-control it alongside application code. It's less appropriate for one-off diagrams or teams without any documentation culture to build upon.

If your current architecture diagrams are outdated the moment they're published, the "live diagrams from code" approach merits exploration. Start with the template, experiment in the playground, and evaluate whether the flexibility over strict C4 improves your team's documentation workflow.

View the source, open issues, and contribute at https://github.com/likec4/likec4.