Code generation

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`.
`background`	Options: `dots`, `lines`, `cross`, `transparent`, `solid`, or `undefined`. Default value is `dots`.
`overlay`	Customize the views browser overlay. Check the available types.

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

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>

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

likec4 codegen views-data --outfile ./src/likec4.generated.ts

#Aliases
likec4 codegen views ...
likec4 codegen ts ...