likec4

Define your software architecture as code and get always up-to-date, interactive C4 diagrams generated automatically from a DSL.

3.8Kstars
250forks
MIT License
TypeScript

LikeC4 is an open-source architecture-as-code toolchain inspired by the C4 Model and Structurizr DSL. Instead of drawing diagrams by hand in tools that quickly go stale, you describe your software systems, components, and relationships in a purpose-built DSL, and LikeC4 generates live, interactive diagrams from that single source of truth.

What sets LikeC4 apart from strict C4 Model tools is its flexibility: you can define your own element types, custom notation, colors, and any number of nesting levels to perfectly match your team’s architecture vocabulary. The toolchain supports multiple diagram views over the same model, so you can show the same system from different perspectives without duplicating any information.

The project ships as a CLI (npx likec4 start) for instant local preview, a Vite plugin for embedding diagrams inside existing web applications, a React component library for fully interactive embedded diagrams, a VS Code extension with syntax highlighting and live preview, and export capabilities to PNG, SVG, JSON, DrawIO, Mermaid, D2, and PlantUML formats.

LikeC4 is actively maintained with weekly releases, a Discord community, and contributions from teams at companies including NVIDIA. It integrates as a zero-infrastructure tool — your architecture lives in version-controlled text files alongside your code.

What You Get

  • A purpose-built DSL for defining systems, containers, components, relationships, deployment nodes, and custom element kinds with your own notation
  • A VS Code extension with syntax highlighting, validation, auto-complete, and an integrated live diagram preview panel
  • A CLI tool (likec4 start) for instant local dev server preview and likec4 export for PNG, SVG, JSON, DrawIO, Mermaid, D2, and PlantUML output
  • A Vite plugin and React component library for embedding interactive, pannable/zoomable diagrams directly in documentation websites or internal portals
  • Multiple named views over the same architecture model so you can show system context, container, and component perspectives without duplicating element definitions
  • An MCP (Model Context Protocol) server so AI coding assistants can read your architecture model and provide context-aware answers
  • A LeanIX bridge for syncing architecture data between LikeC4 models and the LeanIX EA tool

Common Use Cases

  • Living architecture documentation — teams check in .c4 files next to their code so architecture diagrams stay in sync with every pull request instead of rotting in Confluence
  • Onboarding new engineers — generate a browsable interactive site from the model so new hires can navigate from system context down to component level without asking anyone
  • Architecture review presentations — export specific views to PNG or embed the Vite-powered SPA in a docs site for stakeholder walkthroughs with real navigation
  • Multi-team system mapping — define shared elements once and compose them into per-team views, keeping a single authoritative model across microservice boundaries
  • AI-assisted architecture queries — connect the MCP server to Copilot or Claude so developers can ask natural-language questions about system dependencies and get answers grounded in the actual model
  • DrawIO round-tripping — import existing DrawIO diagrams into LikeC4, maintain them as code, and export back for stakeholders who prefer the GUI

Under The Hood

Architecture LikeC4 is structured as a tightly-integrated monorepo of purpose-built packages where each layer has a single responsibility: the language package owns the DSL grammar and Language Server Protocol implementation (built on Langium), the core package owns the typed model and view computation, the layouts package owns Graphviz-based positioning, the diagram package owns the React/XYFlow rendering layer, and the generators package owns format-specific export adapters. Data flows in one direction — parse to model to layout to render — with no circular dependencies between layers. This separation means the language server, CLI, VS Code extension, and Vite plugin all consume the same core model without reimplementing business logic, and a change to the DSL grammar propagates cleanly through the pipeline without touching rendering code.

Tech Stack The entire toolchain is TypeScript running on Node.js 22+, built and distributed as ES modules via a Turborepo monorepo with pnpm workspaces. The DSL is defined using Langium, a TypeScript-first language framework that generates a full Language Server Protocol implementation from the grammar file, providing hover, auto-complete, validation, and go-to-definition in VS Code for free. Diagram layout uses Graphviz (via a WASM adapter for browser environments), the interactive diagram UI is built on React and XY Flow (React Flow), and the local dev server and Vite plugin both use Vite for HMR. Exports are handled by format-specific generators for Mermaid, D2, PlantUML, DrawIO XML, and SVG/PNG via Playwright headless rendering. Tests run with Vitest; end-to-end tests use Playwright.

Code Quality The project has an extensive test suite with over 247 spec files spanning unit tests for the core model and generators, integration tests for the language server, and Playwright-driven end-to-end tests for the rendered diagram SPA. TypeScript is used in strict mode throughout, and the codebase shows consistent use of branded types, discriminated unions, and explicit null handling to prevent invalid states at compile time. CI runs on GitHub Actions with separate jobs for type-checking, linting (oxlint), unit tests, and end-to-end browser tests. Code formatting is enforced by dprint with pre-commit hooks via nano-staged. The Langium grammar file is well-commented and the CONTRIBUTING.md provides clear onboarding instructions.

What Makes It Unique Unlike Structurizr (strict C4 levels only) or PlantUML (markup syntax with limited interactivity), LikeC4 combines a fully customizable type system — you define your own element kinds, relationship kinds, and color schemes — with a first-class interactive web rendering layer via XY Flow and a native Vite plugin integration. The WASM-based Graphviz adapter means layout computation runs in the browser without a server, enabling fully static embedded diagrams. The MCP server integration is a distinctive forward-looking feature that lets AI assistants treat the architecture model as a queryable knowledge base. The combination of DSL-as-code, interactive SPA output, multi-format export, and AI integration in a single coherent toolchain is not replicated by any single existing tool.

Self-Hosting

LikeC4 is released under the MIT License, which grants unrestricted rights to use, copy, modify, merge, publish, distribute, sublicense, and sell copies of the software. There are no copyleft obligations, no contributor license agreements beyond the standard MIT terms, and no distinction between personal, commercial, or enterprise use. You can embed it in proprietary pipelines, ship it inside closed-source documentation portals, or offer it as part of a commercial service without any licensing fees or restrictions.

Running LikeC4 yourself is deliberately low-overhead. The core workflow requires only Node.js 22+ and a text editor — there is no database, no server process to maintain, and no cloud account to configure. Architecture definitions live in plain text files under version control, so your existing CI/CD infrastructure handles backup, history, and access control. The Vite plugin or the static SPA export can be deployed to any static hosting platform (GitHub Pages, Vercel, S3, etc.) with zero ongoing operational burden. The VS Code extension installs from the marketplace and talks to the language server locally with no network dependency.

Because LikeC4 has no hosted SaaS offering of its own, there is no managed tier to compare against — what you self-host is the complete feature set. Support is community-driven through GitHub Discussions and a Discord server; there is no commercial support SLA or enterprise support contract available. Teams requiring guaranteed response times or professional services would need to budget for internal ownership or third-party consulting. The project does accept financial contributions via OpenCollective and GitHub Sponsors to fund ongoing development.

Join founders buildingwith open source

Opinionated takes, migration guides, cost-saving tips, and insights from the open source ecosystem.

Subscribe on Substack

No spam. Unsubscribe anytime.

Join 750+ subscribers
No spam. Unsubscribe anytime.

Search