likec4 / template

Example project and template repository

LikeC4 Template

This template is a simple example of how to use LikeC4.
Contains:

• LikeC4 sources (/src)
• Deploy to github pages (pages.yml)

Demo - https://template.likec4.dev

Try it online:

StackBlitz does not support extensions, so do not expect validation, syntax highlighting and other features in likec4 files.
Try this template online with github.dev and install extension.

How-to

1. Create a new repository from this template
2. Pull your repository and open in VSCode
3. Install suggested LikeC4 extension

Now you can edit likec4 sources, refactor, navigate and preview diagrams.

CLI

You can install globally, locally and use scripts from package.json, or just via npx
Check how to install likec4

LikeC4 requires Node.js version 18+, 20+

To start local server with live reload (for development or quick preview)
Inside the project folder:

npx likec4 start

Export to PNG:

npx likec4 export png -o png

Documentation: https://likec4.dev/docs/tools/cli/

Deployment

Deployment is the same as for any project built with vite.

1. Build static site (export to HTML, ready for deployment):

npx likec4 build -o ./dist

Check npx likec4 build --help for options and examples

2. Upload ./dist folder to your hosting

Github Pages

This template contains workflow to deploy to github pages on every push to main branch.
Check .github/workflows/pages.yml

License

This project is released under the MIT License