LikeC4 — Architecture Diagrams as Code

Introduction

LikeC4 is a modeling language and toolset for defining software architecture as code and generating interactive diagrams from it. Inspired by the C4 model (Context, Containers, Components, Code), it lets teams describe their system structure in a lightweight DSL and produces live, browsable views that stay in sync with the source. No more stale diagrams that drift from reality.

What LikeC4 Does

• Defines architecture models in a readable DSL stored alongside code
• Generates interactive diagrams that update live as the model changes
• Exports diagrams as PNG, SVG, or embeddable React components
• Supports the C4 hierarchy of context, container, and component views
• Provides a VS Code extension with syntax highlighting and live preview

Architecture Overview

LikeC4 parses .likec4 source files into an internal model representation. The CLI or VS Code extension watches for file changes and re-renders diagrams in real time. The rendering engine produces interactive web-based views using a bundled React application. For static export, it renders to PNG or SVG. The toolchain is built with TypeScript and ships as a single npm package with no external dependencies beyond Node.js.

Self-Hosting & Configuration

• Install via npm, yarn, or pnpm globally or as a project dependency
• Create .likec4 files in your repository to define the architecture model
• Run likec4 serve for a local preview server with hot reload
• Use likec4 build to generate a static site for hosting on any web server
• VS Code extension available for in-editor preview and validation

Key Features

• Diagrams-as-code approach keeps architecture docs version-controlled
• Interactive views with zoom, drill-down, and element navigation
• Multiple export formats including PNG, SVG, and React components
• VS Code extension with live preview and syntax support
• Static site generation for hosting architecture docs on any platform

Comparison with Similar Tools

• Mermaid — text-to-diagram in Markdown; LikeC4 is specifically designed for C4 architecture
• Structurizr — Java-based C4 modeling; LikeC4 uses a simpler DSL with no JVM required
• PlantUML — general-purpose diagramming; LikeC4 focuses on interactive architecture views
• D2 — general diagramming language; LikeC4 enforces C4 model structure
• draw.io — visual editor; LikeC4 generates from code so diagrams never go stale

FAQ

Q: Do I need to know the C4 model to use LikeC4? A: Basic familiarity helps, but the DSL is intuitive. The C4 model simply organizes architecture into context, containers, and components.

Q: Can I embed diagrams in my documentation site? A: Yes. Export as React components for Docusaurus or Next.js, or embed the static site build as an iframe.

Q: Does LikeC4 support custom styling? A: Yes. You can define custom themes, colors, and shapes in the model files.

Q: How large a system can LikeC4 handle? A: It handles models with hundreds of elements and views. The hierarchical C4 approach naturally manages complexity through drill-down.

Sources

• https://github.com/likec4/likec4
• https://likec4.dev