Generate React

Generate React components with views from your architecture model.

Install

Ensure you have likec4 in your dependencies:

npm i likec4

pnpm add likec4

yarn add likec4

bun add likec4

React

The following command generates a JavaScript bundle with React Component (and .d.ts):

npx likec4 codegen react --outfile ./src/likec4.generated.js

pnpx likec4 codegen react --outfile ./src/likec4.generated.js

yarn dlx likec4 codegen react --outfile ./src/likec4.generated.js

bunx likec4 codegen react --outfile ./src/likec4.generated.js

# Aliases
npx likec4 generate react -o ./src/likec4.generated.js
npx likec4 gen react -o ./src/likec4.generated.js

To use the component:

import { LikeC4View } from './likec4.generated'

const App = () => {
  return (
    <div>
      <LikeC4View viewId="index" />
    </div>
  )
}

Property	Description
`viewId`	Typed enumeration of your views
`where`	Optional, see filter
`injectFontCss`	Injects CSS with IBM Plex Sans font from CDN. Default is `true`

Filter

where is same view predicate, but applies dynamically and enables to show/hide elements based on the context. For example:

import { LikeC4View } from './likec4.generated'

// Keeps elements and relationships where:
// - tag is not 'legacy'
// - and
// - tag is 'v1' or 'v2'
const App = () => {
  return (
    <div>
      <LikeC4View
        viewId="index"
        where={{
          and: [
            { tag: { neq: 'legacy' } },
            {
              or: [
                { tag: { eq: 'v1' } },
                { tag: { eq: 'v2' } }
              ]
            }
          ]
        }}/>
    </div>
  )
}

Layout stays the same, i.e. elements are not rearranged.
Be aware, where applies both to elements and relationships.

ReactLikeC4

LikeC4View renders views from your model, and allows exploring in the popup browser.
Component works in most usecases, but if you need more - use ReactLikeC4:

import { ReactLikeC4, type LikeC4ViewId } from './likec4.generated'

const App = () => {
  const [viewId, setViewId] = useState<LikeC4ViewId>('index')
  return (
    <ReactLikeC4
      viewId={viewId}
      pannable
      zoomable={false}
      keepAspectRatio
      showNavigationButtons
      enableDynamicViewWalkthrough={false}
      enableElementDetails
      enableRelationshipDetails
      showDiagramTitle={false}
      onNavigateTo={setViewId}
      onNodeClick={...}
    />
  )
}

ReactLikeC4 is a low-level component, giving you more control and allowing react to the events. Check source code for available options.

Feel free to share your ideas or ask questions in GitHub discussions.

Code generation prepares component, which is already “bound” to your model.
But it is possible to use a generic from the library:

import { ReactLikeC4, LikeC4ModelProvider } from 'likec4/react'
import { RenderIcon, likeC4Model } from './likec4.generated'

const App = () => {
  return (
    <LikeC4ModelProvider likec4model={likeC4Model}>
      <ReactLikeC4
        viewId={"index"}
        renderIcon={RenderIcon} // Optional, used for bundled icons
        onEdgeClick={...}
      />
    </LikeC4ModelProvider>
  )
}