LikeC4 CLI

The likec4 CLI is a tool for various operations and automation, such as:

• Start development server to preview diagrams (with hot-reload)
• Build a static website for sharing and embedding diagrams
• Export to PNG, Mermaid, Dot, D2
• Generate source code artifacts:
  • React components
  • Web Components
  • Typed data

Install

Local installation

If you’re using it in an npm project, install it as a development dependency:

npm

npm i -D likec4

pnpm

pnpm add -D likec4

yarn

yarn add -D likec4

bun

bun add -d likec4

You can reference it directly in the package.json#scripts object:

{
  scripts: {
    dev: 'likec4 dev ...',
    build: 'likec4 build ...'
  }
}

Global installation

To fetch and execute a package binary, without installing it as a dependency:

npm

npx likec4 start

pnpm

pnpx likec4 start

yarn

yarn dlx likec4 start

bun

bunx likec4 start

If you want to use it in any arbitrary project without npx, install it globally:

npm install --global likec4

# Then, you can call `likec4` directly:
likec4 [command]

Usage

Almost all commands have a --help option and provide usage examples.

likec4 build -h
likec4 gen react -h

Preview diagrams

In a folder with LikeC4 sources:

likec4 serve
# Aliases:
likec4 start
likec4 dev

This recursively searches for *.c4, *.likec4 files in current folder, parses and serves diagrams via local web server.
Any change in the sources triggers hot update in the browser immediately.

Tip

You can start the process in a separate terminal window and keep it running while you’re editing model in editor, or even serve multiple projects at once.

Caution

By default the web server listening localhost (127.0.0.1). If you want it to listen on all network interfaces add --listen 0.0.0.0 to the serve command.

Build static website

Build a single HTML with diagrams, ready to be deployed or embedded into your website. When you deployed the website, you can use “Share” button and get a link to a specific diagram.

The resulting website is strictly bound to the given base path (/ by default). A relocatable app can be built with --base "./".

likec4 build -o ./dist

Option	Description
--output	Output directory
--base, --base-url	Base URL the app is being served from, e.g. ”/”, “/pages/” or ”./” for a relocatable app
--use-hash-history	Hash-based navigation, e.g. ”/#/view” instead of “/view”
--use-dot	Use local binaries of Graphviz (“dot”) instead of bundled WASM
--webcomponent-prefix	Prefix for web components, e.g. “c4” generates <c4-view ../>
--title	Base title of the app pages (default is “LikeC4”)
--output-single-file	Generates a single self-contained HTML file

Note

Internally, CLI uses Vite to build the website, and likec4 build calls vite build.
Vite deploy documentation may also help you.

Repository likec4/template demonstrates how to deploy likec4 website to github pages.

There is also a supplementary command to preview the build:

likec4 preview -o ./dist

For example, this command can be used on CI, to compare diagrams with ones from the previous/main build.

Export to PNG

likec4 export png -o ./assets

This command starts local web server and uses Playwright to take screenshots.
If you plan to use it on CI, refer to Playwright documentation for details or consider LikeC4 GitHub Actions

Note

Export to PNG requires Playwright.
You will be prompted with a command to install if it’s not found.

Export to JSON

likec4 export json -o dump.json

Generate Mermaid, Dot, D2, PlantUml

Via codegen:

likec4 gen mmd
likec4 gen mermaid
likec4 gen dot
likec4 gen d2
likec4 gen plantuml

Generate components Learn how to generate React and Web Components

Validate

likec4 validate

This command checks for:

• syntax errors
• layout drift (outdated manual layout)

If any error is found the command ends with non-zero return code.