Skip to content
LikeC4
DocsPlayground

Model Builder

The Builder creates a LikeC4 model in TypeScript, without DSL files. Use it in unit tests, in generators that turn other sources into architecture models, or anywhere you need a model built in code. Import it from likec4/model/builder (or @likec4/core/builder). Element ids, view ids, kinds and tags are type-checked as you build.
To load a model from DSL files, see LikeC4 API. To extend a model loaded from DSL files, see Change the model from code.

Two styles

Section titled “Two styles”

The Builder supports two styles: chained methods, or composition functions you get for a specification.

import { Builder } from 'likec4/model/builder'


const model = Builder
  .specification({
    elements: {
      actor: {
        style: {
          shape: 'person',
        },
      },
      system: {},
      component: {},
    },
    relationships: {
      likes: {},
    },
    tags: ['tag1', 'tag2'],
  })
  .model(({ actor, system, component, relTo, rel }, _) =>
    _(
      actor('alice'),
      actor('bob'),
      rel('alice', 'bob', {
        tags: ['tag1'], // code completion for tags
        kind: 'likes',  // code completion for kind
      }),
      system('cloud', { tags: ['tag1', 'tag2'] }).with(
        component('backend').with(
          component('api'),
          component('db'),
          // code completion for element ids
          rel('cloud.backend.api', 'cloud.backend.db'),
        ),
        component('frontend').with(
          relTo('cloud.backend.api'),
        ),
      ),
    )
  )
  .views(({ view, viewOf, $include, $style }, _) =>
    _(
      view('index', 'Index').with(
        $include('cloud.*'),
      ),
      viewOf('frontend', 'cloud.frontend').with(
        // code completion for predicates
        $include('* -> cloud.**'),
        $style('cloud.frontend', { color: 'red' }),
      ),
    )
  )
  .toLikeC4Model()

You can mix both styles, depending on your preference and use case.

Get the result

Section titled “Get the result”

A builder is not a model yet. Finish it with one of these methods:

  • toLikeC4Model() computes the views and returns a LikeC4Model you can query.
  • build() returns the parsed model data only. Views are not computed.

Both accept an optional project id, for example toLikeC4Model('my-project').

The returned model keeps the ids you declared, so mistakes show up as type errors:

import { Builder } from 'likec4/model/builder'


const model = Builder
  .specification({
    elements: ['system', 'component'],
  })
  .model(({ system, component }, _) =>
    _(
      system('cloud').with(
        component('frontend'),
      ),
    )
  )
  .views(({ view, $include }, _) =>
    _(
      view('index').with(
        $include('*'),
      ),
    )
  )
  .toLikeC4Model()


model.element('cloud.frontend') // ok
model.view('index')             // ok
model.view('landscape')         // type error: unknown view id