LikeC4 Template

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

• LikeC4 sources (/src)
• Model validation (/test/validate-model.spec.ts)
• Deploy to github pages (pages.yml)
• Project configuration with custom generator (likec4.config.ts)

Demo - https://template.likec4.dev

Try it online:

Or:

• github.dev
• vscode.dev

You will get popup suggesting to install "LikeC4" extension.
Agree to get syntax highlighting, completions and other features in likec4 files

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 documentation

LikeC4 requires Node.js version 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/

Custom generator

likec4.config.ts includes an example of custom generator that generates CSV file with relationships:

npm run generate:relationships-csv

Model validation

test/validate-model.spec.ts includes an example of model validation tests:

npm run test

Check documentation for more details

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