RepoDaily · 2026-07-25 · Infrastructure / Runtime

LikeC4: Architecture-as-Code Diagrams That Stay in Sync with Reality

#18 Infrastructure / Runtime TypeScript +339 likec4/likec4 Open repository

An MIT-licensed TypeScript modeling language and toolchain inspired by C4 and Structurizr, rendering live architecture diagrams from declarative source files you fully control.

Repo typeInfrastructure / Runtime
Best forEngineering organizations that want version-controlled, customizable C4-style architecture diagrams generated from declarative model files rather than hand-maintained images.
Risk levelLow — MIT-licensed, npm-distributed, with a Docker image and VSCode/Open VSX extensions for local and CI use.
Time to evaluate30 minutes to write a first model and run `npx likec4 start` from the template repository.

Primary question: Can your organization commit to maintaining a declarative architecture model in source control alongside application code?

88/100

RepoDaily adoption score

RepoDaily rates this as 88/100 (strong) for adoption: evidence, installation path, production risk, differentiation, license clarity, and AI/agent fit are scored from the article sources and adoption notes.

Directional score from RepoDaily sources and adoption notes, not a benchmark.Risk: Low
100Evidence quality

6 source(s) across 4 source category/categories, plus a RepoDaily-specific evidence module when available.

100Installability

5 workflow step(s), 4 next-action step(s), and 4 command/install signal(s) were detected.

70Maintenance confidence

Trending momentum is +339 stars, with maintenance/release/issue signals counted when present.

94Production readiness

Risk is marked low, with 4 security note(s) and 3 explicit skip condition(s).

92Differentiation

2 opportunity lens item(s), 4 alternative(s), and 4 type-specific section(s) support differentiation.

82License clarity

License source or license wording is present.

60Agent / AI fit

2 AI/agent-related signal(s) were detected in the article text and metadata.

Project overview

LikeC4 is a modeling language and toolchain for describing software architecture and generating diagrams from that model. The project is written in TypeScript, distributed on npm as the `likec4` package at version 1.59.2, and released under the MIT License (copyright 2023-2026, Denis Davydkov). It provides a CLI, a browser-based playground, a VSCode extension, an Open VSX extension, and a Docker image for CI pipelines.

The project is inspired by the C4 Model and Structurizr DSL but adds flexibility. The README explicitly states you can customize notation, define your own element types, and nest architecture levels to any depth rather than being locked into a fixed set of C4 layers. Diagrams are rendered live from source files instead of drawn by hand, which means they stay current as long as the model is maintained.

Unlike a generic diagramming tool, LikeC4 treats architecture as code. Models are text files that live in your repository, get reviewed in pull requests, and render identically for every viewer. The npm version badge and VSCode marketplace badge in the README confirm distribution through standard JavaScript and editor toolchains. A live playground at playground.likec4.dev and a deployed template at template.likec4.dev let evaluators see output before installing anything.

Problem it solves

  • Architecture diagrams created in drag-and-drop tools drift from reality within weeks because nothing forces the image to update when code changes.
  • Generic diagram tools produce visuals with no semantic meaning — elements are boxes and arrows, not typed components with validated relationships.
  • Existing C4 tools like Structurizr DSL provide semantics but enforce a fixed notation and element hierarchy that may not match your organization's vocabulary.
  • Sharing architecture diagrams across distributed teams typically means exporting static images or PDFs, losing the ability to navigate, zoom, or drill into nested views.

How it works

  1. Write a LikeC4 model in a declarative source file specifying elements, relationships, and views using the LikeC4 modeling language.
  2. Run `npx likec4 start` from the CLI to launch a local preview server that renders the model as interactive diagrams in the browser.
  3. Customize notation, element kinds, and nested levels to match your domain — LikeC4 does not impose a fixed set of C4 levels.
  4. Open the model in the VSCode or Open VSX extension for inline editing, syntax validation, and preview without leaving the editor.
  5. For CI or automated rendering, use the Docker image (node:22.22.3-bookworm-slim base with Graphviz and Playwright 1.60.0) to generate outputs headlessly.

Fastest Path to a Working Diagram

  • Clone the template repository likec4/template or open it directly in StackBlitz via the README link.
  • Visit the live deployed template at https://template.likec4.dev/view/index to see rendered output immediately.
  • Install locally with `npx likec4 start` — no global install required; the CLI fetches the latest npm version on first run.
  • Follow the official tutorial at https://likec4.dev/tutorial/ for a guided walkthrough of the modeling language syntax.
  • For editor integration, install the VSCode extension (likec4.likec4-vscode) from the marketplace or the Open VSX extension (likec4/likec4-vscode) for non-Microsoft editors.

Integration Surface

LikeC4 integrates at three levels: npm package, editor extension, and Docker image. The npm package `likec4` exposes the CLI with commands such as `start` for local preview. The VSCode extension (identifier likec4.likec4-vscode) and Open VSX extension (likec4/likec4-vscode) provide in-editor modeling with syntax support and live preview panels.

The Dockerfile builds a two-stage image. Stage 1 compiles Graphviz from source inside node:22.22.3-bookworm because, as the Dockerfile comment notes, no binary distributions exist for recent Graphviz versions. Stage 2 creates a slim runner (node:22.22.3-bookworm-slim) with Playwright 1.60.0 and chromium for headless rendering. The entrypoint is `/usr/local/bin/likec4` and ports 5173 and 24678 are exposed — the default dev-server ports for the LikeC4 preview.

Maintenance and Dependency Risk

  • Version 1.59.2 is the current release per package.json, with development sustained through OpenCollective and GitHub Sponsors.
  • The engines field in package.json requires Node.js >=22.22.3; CONTRIBUTING.md specifies Node.js >=22.21.1 and pnpm for local contributors.
  • The Dockerfile builds Graphviz from source because recent versions lack prebuilt binaries, adding build time to the image layer but handled automatically by the provided Dockerfile.
  • E2E tests under /e2e pack likec4 to a tarball, install it in an isolated workspace, generate spec files from the model, and run Playwright — confirming real-world packaging is tested, not just unit logic.

Docker Deployment Notes

The Docker image uses node:22.22.3-bookworm-slim as the runner base. Graphviz is compiled in a separate build stage and copied into the runner, ensuring recent Graphviz features without relying on distro packages. Playwright 1.60.0 with chromium is installed via `npx -y playwright@1.60.0 install chromium --with-deps` for headless screenshot and PDF generation.

The LIKEC4_VER build arg defaults to `latest`, and the image installs likec4 globally with `npm install -g likec4@${LIKEC4_VER}`. The working directory is `/data`, ports 5173 and 24678 are exposed, and the default CMD is `-h` (help) — so you must override the command to serve diagrams or export images.

Who should pay attention?

Good fit if

  • Your architecture diagrams are outdated within a sprint because no one updates the Visio or draw.io file.
  • You want architecture models reviewed in pull requests alongside code, not stored in a separate wiki.
  • You need C4-style diagrams but with custom element types and notation that Structurizr DSL does not support.
  • You need to render architecture diagrams in CI for documentation generation or compliance artifacts.

Skip for now if

  • You need UML class diagrams, sequence diagrams, or ER schemas — LikeC4 is focused on architecture context, container, and component views.
  • Your team has no appetite for maintaining a declarative model file and prefers hand-drawn diagrams.
  • You need real-time auto-discovery of services from running infrastructure rather than a curated model.

Risks and cautions

Low

MIT-licensed, npm-distributed, with Docker and editor extensions. The main risk is organizational commitment to maintaining the model, not technical lock-in.

  • MIT License (copyright 2023-2026 Denis Davydkov) imposes no restrictions on commercial use or redistribution.
  • Models are plain-text files with no proprietary runtime; if LikeC4 development stopped, diagrams could be regenerated from source by any future renderer.
  • Node.js >=22.22.3 requirement is specific and may require updating older CI runners, but the Docker image eliminates this concern for pipeline use.
  • Graphviz must be built from source in Docker because recent versions lack binary distributions — a build-time complexity handled by the provided Dockerfile but relevant for teams rebuilding the image.
  • The Docker image installs Playwright with `--with-deps`, which pulls additional system packages — review the apt package list if you run the image in a hardened environment.
  • The npm package is installed globally in the Docker image via `npm install -g likec4@${LIKEC4_VER}`; pin LIKEC4_VER to a specific version to avoid unexpected drift.
  • MIT License is permissive with no copyleft obligations; the full text is in the repository LICENSE file.
  • The project uses husky for git hooks and nano-staged for pre-commit formatting (dprint fmt), which runs locally and does not transmit model data externally.

Alternatives to compare

ApproachWhen to useTrade-off
Structurizr DSL
You want strict C4 model compliance with a mature DSL and do not need custom notation.Open source DSL; Structurizr cloud service has paid tiers.
Mermaid
You need lightweight diagrams embedded in Markdown or GitHub READMEs with minimal setup.MIT-licensed, free.
PlantUML
You need UML and architectural diagrams from text with a long-established community and broad diagram types.Open source, free.
C4 Model (methodology only)
You want the conceptual framework and notation guide without a specific tool implementation.Free methodology documentation at c4model.com.

What this trend reveals

Replace stale Confluence architecture pages with a model that renders on every commit

Point your documentation pipeline at the LikeC4 Docker image, render diagrams in CI, and publish HTML to your wiki. Every merge updates the visual, eliminating manual screenshot refreshes.

The Docker image exposes ports 5173 and 24678 and includes Playwright 1.60.0 for headless rendering, confirming CI-friendly output generation is a supported path.

Use custom element types to map domain-specific architecture vocabulary

LikeC4 allows defining your own notation and nested levels, unlike fixed C4 tools. Map internal terminology such as lambda functions, queues, or data products to typed elements with consistent styling.

The README states LikeC4 is 'inspired by C4 Model and Structurizr DSL, but provides some flexibility' including custom notation, element types, and any number of nested levels.

Best next action

Write a 10-line model and preview it in under five minutes

The fastest validation is to write a minimal LikeC4 model and see the rendered output. Use the StackBlitz link from the README or the npm CLI locally.

  1. Open https://template.likec4.dev/view/index to see what rendered output looks like.
  2. Click the StackBlitz badge in the README to open the likec4/template repository in a browser-based IDE.
  3. Edit the .c4 source file, adding two elements and a relationship, and watch the preview update.
  4. If you prefer local execution, run `npx likec4 start` in a new directory and open the localhost URL shown in the terminal.

RepoDaily verdict

LikeC4 turns architecture diagrams from decaying artifacts into version-controlled source files. With MIT licensing, a Docker image for CI, editor extensions for daily use, and the flexibility to define custom notation beyond stock C4, it earns its trending spot for organizations serious about keeping architecture documentation honest.

Sources