Docs
Tooling
CLI

CLI

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

  • Preview diagrams in a local web server (with fast hot-reload on changes)
  • Build a static website for sharing and embedding diagrams
  • Export to PNG, Mermaid, Dot, D2
  • Generate Typescript with:
    • React components
    • Structured 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 (opens in a new tab) while in the project directory:

npx likec4 ...

Global installation

To use the CLI globally, you can call it with npx (opens in a new tab):

npx likec4 [command]

If you want to use it in any arbitrary project without npx (opens in a new tab), 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 codegen react -h

Preview diagrams

In a folder with LikeC4 sources:

likec4 serve
# Aliases:
likec4 start
likec4 dev

This recursively searchs 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 use likec4 serve [path] 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:

likec4 build -o ./dist

Example https://template.likec4.dev (opens in a new tab)

When you deployed the website, you can use "Share" button to get a link to a specific diagram.

Tip:
likec4/template (opens in a new tab) repository 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 (opens in a new tab) for details.

Export to JSON

likec4 export json -o dump.json

Export to Mermaid, Dot, D2

Export to various formats via codegen:

likec4 codegen mmd
likec4 codegen mermaid
likec4 codegen dot
likec4 codegen d2

Generate React components

likec4 codegen react --outfile ./src/likec4.generated.tsx

Output file should have .tsx extension
By default, it generates likec4.generated.tsx in current directory

Generate structured data

Generate a TypeScript file with LikeC4Views object, which contains all diagrams and their metadata.

likec4 codegen views-data --outfile ./src/likec4.generated.ts
 
#Aliases
likec4 codegen views ...
likec4 codegen ts ...

Output file should have .ts extension
By default, it generates likec4.generated.ts in current directory

ToolingReact