Skip to content

Code generation

React

This will generate a file with React component (and type definitions):

Terminal window
likec4 codegen react --outfile ./src/likec4.generated.jsx

Components are ready to be embedded, like in MDX.
The examples on this website are rendered with this approach.

import { LikeC4View } from './likec4.generated'
const App = () => {
return (
<div>
<LikeC4View viewId="index" />
</div>
)
}
PropertyDescription
viewIdTyped enumeration of your views
interactiveClicking on the view opens a modal with the views browser.
Default value is true.
backgroundOptions: dots, lines, cross, transparent, solid, or undefined.
Default value is dots.
overlayCustomize the views browser overlay. Check the available types.

Any other property will be passed to the underlying div element.

Webcomponent

Terminal window
likec4 codegen webcomponent -o ./src/likec4-webcomponent.js

By default, this will generate a likec4-view webcomponent.
To change the prefix use option -w, --webcomponent-prefix

You can use it in your HTML:

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

Typed Model

Generate a TypeScript file with LikeC4Views object, which contains all diagrams and their metadata.

Terminal window
likec4 codegen views-data --outfile ./src/likec4.generated.ts
#Aliases
likec4 codegen views ...
likec4 codegen ts ...