Code generation
React
This will generate a jsx-file with React component (and type definitions .d.ts
if you use TypeScript):
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> )}
Property | Description |
---|---|
viewId | Typed enumeration of your views |
interactive | Clicking on the view opens a modal with the views browser. Default value is true . |
injectFontCss | Injects CSS to load IBM Plex Sans font from CDN. Default value is true |
background | Options: dots , lines , cross , transparent , solid , or undefined .Default value is transparent . |
browserBackground | Options: dots , lines , cross , transparent , solid , or undefined .Default value is dots . |
Any other property will be passed to the underlying div
element.
Webcomponent
likec4 codegen webcomponent -o ./src/likec4-webcomponent.js
You can use it in your HTML:
<script src="./src/likec4-webcomponent.js"></script><likec4-view view-id="index"></likec4-view>
By default, this will generate a likec4-view
webcomponent.
To change the prefix use option -w, --webcomponent-prefix
.
For example:
likec4 codegen webcomponent -w custom-c4 -o ./src/likec4-webcomponent.js
<custom-c4-view view-id="index"></custom-c4-view>
Typed Model
Generate a TypeScript file with LikeC4Views
object, which contains all diagrams and their metadata.
likec4 codegen views-data --outfile ./src/likec4.generated.ts
#Aliaseslikec4 codegen views ...likec4 codegen ts ...