Generate Web Components
Install
Section titled “Install”Ensure you have likec4 in your dependencies:
npm i likec4pnpm add likec4yarn add likec4bun add likec4Web Component
Section titled “Web Component”Generate javascript bundle with web component:
npx likec4 codegen webcomponent -o ./src/likec4-webcomponent.jspnpx likec4 codegen webcomponent -o ./src/likec4-webcomponent.jsyarn dlx likec4 codegen webcomponent -o ./src/likec4-webcomponent.jsbunx likec4 codegen webcomponent -o ./src/likec4-webcomponent.jsUse 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.jspnpx likec4 codegen webcomponent -w custom-c4 -o ./src/likec4-webcomponent.jsyarn dlx likec4 codegen webcomponent -w custom-c4 -o ./src/likec4-webcomponent.jsbunx likec4 codegen webcomponent -w custom-c4 -o ./src/likec4-webcomponent.jsAnd 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) |