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 Typescript:
  • React components
  • Webcomponents
  • Typed data

Install

Local installation

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

npm install --save-dev likec4

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

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

To use the binary, you can call it with npx while in the project directory:

npx likec4 ...

Global installation

To use the CLI globally, you can call it with npx:

npx likec4 [command]

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 in a local web server.
Any changes in the sources trigger a super-fast hot update and you see changes in the browser immediately.

Tip

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

Build static website

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

likec4 build -o ./dist

Option	Description
--output	Output directory
--base, --base-url	Base URL the app is being served from, e.g. ”/” or “/pages/“
--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 ../>

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 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 it if it’s not found.

Export to JSON

likec4 export json -o dump.json

Generate Mermaid, Dot, D2

Via codegen:

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

Generate components Learn how to generate React and Webcomponents