Skip to content
LikeC4
Docs Playground

Generate Web Components

NPM VersionNPM Downloads

Install

Section titled “Install”

Ensure you have likec4 in your dependencies:

npm i likec4

Web Component

Section titled “Web Component”

Generate javascript bundle with web component:

npx likec4 codegen webcomponent -o ./src/likec4-webcomponent.js

Use it:

<script src="./src/likec4-webcomponent.js"></script>
<likec4-view view-id="index"></likec4-view>

By default, cli generates a likec4-view web component.
You can change the likec4 prefix by -w, --webcomponent-prefix.

For example:

npx likec4 codegen webcomponent -w custom-c4 -o ./src/likec4-webcomponent.js

And in HTML:

<custom-c4-view view-id="index" browser="true" dynamic-variant="sequence"></custom-c4-view>

| Property | Description | | ----------------- | ----------------------------------------------------------------------------------------------------- | | view-id | Your view id | | browser | Whether to show views browser popup (default true) | | dynamic-variant | How dynamic view should be rendered
Possible values: diagram or sequence (default diagram) | | color-scheme | Force light or dark color scheme
Possible values: light or dark (default: follows system) |