# LikeC4 — Architecture Diagrams as Code

> Define software architecture models in a DSL and generate interactive, always-up-to-date diagrams automatically.

## Install

Save in your project root:

# LikeC4 — Architecture Diagrams as Code

## Quick Use
```bash
# Install CLI
npm install -g likec4

# Initialize a new project
likec4 init

# Start the live preview server
likec4 serve

# Export diagrams as PNG, SVG, or React components
likec4 export png -o ./diagrams
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-7095ab66
Author: AI Open Source