Skip to content

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


Local installation

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

Terminal window
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:

Terminal window
npx likec4 ...

Global installation

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

Terminal window
npx likec4 [command]

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

Terminal window
npm install --global likec4
# Then, you can call `likec4` directly:
likec4 [command]


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

Terminal window
likec4 build -h
likec4 gen react -h

Preview diagrams

In a folder with LikeC4 sources:

Terminal window
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.

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.

Terminal window
likec4 build -o ./dist
--outputOutput directory
--base, --base-urlBase URL the app is being served from, e.g. ”/” or “/pages/“
--use-hash-historyHash-based navigation, e.g. ”/#/view” instead of “/view”
--use-dotUse local binaries of Graphviz (“dot”) instead of bundled WASM
--webcomponent-prefixPrefix for web components, e.g. “c4” generates <c4-view ../>

There is also a supplementary command to preview the build:

Terminal window
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

Terminal window
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

Export to JSON

Terminal window
likec4 export json -o dump.json

Generate Mermaid, Dot, D2

Via codegen:

Terminal window
likec4 gen mmd
likec4 gen mermaid
likec4 gen dot
likec4 gen d2