React Components

LikeC4 provides a set of React components, which you can use to render your architecture diagrams.

Codegen

When you run likec4 codegen react, it generates a file with typed react components.
They are "bound" to your model.

import {
  // type guard
  isViewId,
  // hook to sync viewId with url
  useViewId,   
  // all views
  LikeC4Views, 
  // components, that expects "typed" viewId
  Diagram,     
  Responsive,
  Fullscreen,
  Embedded,
  Browser,
} from '../generated-code'
 
<Embedded viewId={"cloud"} />
 
// ⛔️ Fail on compile:
<Embedded viewId={"not_existing_viewId"} />

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

Example

specification { // define "types" of architecture elements
  element actor {
    style {
      shape person // how to render
    }
  }
  element system
  element component
  relationship async // allow "typed" relationship
}
 
model { // describe your architecture, single source of truth
  customer = actor 'Customer' {
    description 'A user of our product with active subscription'
    -> ui 'opens in browser' // how relationships are
  }
  cloud = system 'Our SaaS' {
    backend = component 'Backend' {
      description '
        Implements business logic
        and provides GraphQL API
      '
    }
 
    ui = component 'Frontend' {
      description 'NextJs application'
      style {
        shape browser
      }
    }
 
    ui -[async]-> backend 'requests via HTTPS'
  }
}
 
views {
  view index {
    include *, cloud.*
 
    style cloud.* {
      color green
    }
  }
}

Code above is partial, see full source (opens in a new tab)

Run to generate react components:

likec4 codegen react -o likec4-generated.tsx

Now import the generated:

import { Embedded as LikeC4 } from '$/likec4-generated'
 
// ...
export const SomeScreen = () => (
  <LikeC4 viewId={"index"}/>
)

And this is rendered (click to explore):

rendering...

Library

Generated components are based on the library, which you can use directly.

npm install @likec4/diagrams

These are the base components to build your own views.
Components expect a structured data, which can be generated with CLI

Diagram

import { Diagram } from '@likec4/diagrams'
 
<Diagram
  diagram={diagram}
  animate={true}
  pannable={true}
  zoomable={true} 
  width={window.innerWidth}
  height={window.innerHeight}
  padding={16}
  onStageClick={/*  */}
  onNodeClick={/*  */}
  onEdgeClick={/*  */}
/>

The most basic component, renders a diagram.
You have to control width and height.

If you pass another diagram, it will be replaced with animation.

ResponsiveDiagram

Automatically resize to fit its container, while maintaining the aspect ratio of the diagram.

import { ResponsiveDiagram } from '@likec4/diagrams'
 
<ResponsiveDiagram
  diagram={diagram}
  animate={true}
  pannable={true}
  zoomable={true} 
  padding={[10, 20, 10, 20]}
  onStageClick={/*  */}
  onNodeClick={/*  */}
  onEdgeClick={/*  */}
/>

FullscreenDiagram

Renders diagram in a fullscreen overlay.

import { FullscreenDiagram, FullscreenDiagramTitle } from '@likec4/diagrams'
 
<FullscreenDiagram
  diagram={diagram}
  animate={true}
  pannable={true}
  zoomable={true} 
  padding={[10, 20, 10, 20]}
  closeOnEsc={true}
  closeOnOutsideClick={true} 
  onClose={/*  */}
  onStageClick={/*  */}
  onNodeClick={/*  */}
  onEdgeClick={/*  */}>
  <FullscreenDiagramTitle>
    {diagram.title}
  </FullscreenDiagramTitle>
</FullscreenDiagram>

May have children, which are rendered inside and above the diagram.
If you pass onClose handler, it will render a close button.

May be styled with css:

:root {
  --likec4-browser-overlay-bg: rgba(18, 18, 18, 0.8);
  --likec4-browser-backdrop: blur(4px);
  --likec4-overlay-z-index: 100;
}

EmbeddedDiagram

Renders ResponsiveDiagram, but on click renders the disclose view.

import { EmbeddedDiagram } from '@likec4/diagrams'
import { LikeC4Views } from '../generated-code'
 
<EmbeddedDiagram
  views={LikeC4Views}
  viewId={'cloud'}
/>

By default, Embedded diagram renders a FullscreenDiagramBrowser:

import { EmbeddedDiagram, FullscreenDiagramBrowser } from '@likec4/diagrams'
import { LikeC4Views } from '../generated-code'
 
<EmbeddedDiagram
  views={LikeC4Views}
  viewId={'cloud'}
  renderDisclose={({views, viewId, initialPosition, onClose}) =>
    <FullscreenDiagramBrowser
      views={views}
      initialViewId={viewId}
      initialPosition={initialPosition}
      onClose={onClose}
    />
  }
/>

FullscreenDiagramBrowser

Same as FullscreenDiagram, but also handles navigation between views.

import { FullscreenDiagramBrowser } from '@likec4/diagrams'
import { LikeC4Views } from '../generated-code'
 
<FullscreenDiagramBrowser
  views={LikeC4Views}
  initialViewId={'cloud'}
  onClose={/*  */}
/>

CLI VSCode Extension