### Install and Run @likec4/mcp CLI

Source: https://likec4.dev/llms-full.txt

Installs the @likec4/mcp package globally and demonstrates starting the MCP server with streamable http transport.

```sh
npm install -g @likec4/mcp

# Start MCP server with streamable http transport
likec4-mcp --http --port 1234 /path/to/workspace

# See available options
likec4-mcp -h
```

--------------------------------

### Install and Run @likec4/mcp CLI

Source: https://likec4.dev/tooling/ai-tools

Install the @likec4/mcp package globally and run it as a CLI tool to start an MCP server with HTTP transport. Use '-h' to see all available options.

```bash
npm install -g @likec4/mcp
# Start MCP server with streamable http transport
likec4-mcp --http --port 1234 /path/to/workspace
# See available options
likec4-mcp -h
```

--------------------------------

### Configure @likec4/mcp Server

Source: https://likec4.dev/tooling/ai-tools

Example configuration for starting an MCP server using the @likec4/mcp package with stdio transport. Ensure LIKEC4_WORKSPACE is set or the current directory will be used.

```json
{
  "mcpServers": {
    "likec4": {
      "command": "npx",
      "args": [
        "-y",
        "@likec4/mcp"
      ],
      "env": {
        "LIKEC4_WORKSPACE": "${workspaceFolder}"
      }
    }
  }
}
```

--------------------------------

### Install likec4 with bun

Source: https://likec4.dev/tooling/code-generation/webcomponent

Installs the likec4 package using bun.

```bash
bun add likec4
```

--------------------------------

### Start LikeC4 Development Server

Source: https://likec4.dev/llms-full.txt

Run the `likec4 serve` command in a folder containing LikeC4 sources to start the development server. This provides a live preview with hot-reloading.

```sh
likec4 serve
```

--------------------------------

### Neovim Plugin Installation

Source: https://likec4.dev/tooling/editors

Install the likec4.nvim plugin for Neovim. This includes a build step to install the standalone language server.

```lua
{  'likec4/likec4.nvim',  build = 'npm install -g @likec4/lsp'}
```

--------------------------------

### Start LikeC4 Development Server

Source: https://likec4.dev/llms-full.txt

Starts a local web server that serves diagrams and hot-reloads on source file changes. It recursively searches for *.c4 and *.likec4 files.

```bash
likec4 start
likec4 dev
```

--------------------------------

### Install likec4 and vitest with bun

Source: https://likec4.dev/guides/validate-your-model

Use this command to install the likec4 and vitest packages using bun.

```bash
bun add likec4 vitest
```

--------------------------------

### Install LikeC4 Styles

Source: https://likec4.dev/tooling/react

Install the LikeC4 styles package using npm, pnpm, yarn, or bun.

```bash
npm i @likec4/styles
```

```bash
pnpm add @likec4/styles
```

```bash
yarn add @likec4/styles
```

```bash
bun add @likec4/styles
```

--------------------------------

### Project Organization Example

Source: https://likec4.dev/dsl/config/multi-projects

Example of organizing projects within a multi-project configuration. This demonstrates how to structure different parts of a large system.

```likec4
project (
  "MySystem",
  "my-system",
  "src/main/likec4",
  "build/likec4"
)

project (
  "MySystem-API",
  "my-system-api",
  "src/api/likec4",
  "build/api/likec4"
)
```

--------------------------------

### Install likec4 and vitest with npm

Source: https://likec4.dev/guides/validate-your-model

Use this command to install the likec4 and vitest packages using npm.

```bash
npm i likec4 vitest
```

--------------------------------

### Install Likec4 as a Development Dependency (bun)

Source: https://likec4.dev/tooling/cli

Install the Likec4 CLI as a development dependency in your bun project.

```bash
bun add -d likec4
```

--------------------------------

### Neovim Plugin Installation

Source: https://likec4.dev/llms-full.txt

Install the likec4.nvim plugin for Neovim. This requires Node.js to be installed globally.

```lua
{
  'likec4/likec4.nvim',
  build = 'npm install -g @likec4/lsp'
}
```

--------------------------------

### Start LikeC4 Language Server (LSP)

Source: https://likec4.dev/tooling/cli

Starts the LikeC4 language server for IDE integration. Requires one transport option to be specified.

```bash
likec4 lsp --stdio
```

```bash
likec4 lsp --node-ipc
```

```bash
likec4 lsp --socket 3000
```

```bash
likec4 lsp --pipe /tmp/likec4.pipe
```

--------------------------------

### Start Vite Development Server

Source: https://likec4.dev/tooling/vite-plugin

Commands to start the Vite development server using different package managers. After starting, navigate to http://localhost:5173/ to view the rendered diagram.

```bash
npm run dev
```

```bash
pnpm run dev
```

```bash
yarn run dev
```

```bash
bun run dev
```

--------------------------------

### Install likec4 with pnpm

Source: https://likec4.dev/tooling/code-generation/webcomponent

Installs the likec4 package using pnpm.

```bash
pnpm add likec4
```

--------------------------------

### Open LikeC4 Example in Browser Editors

Source: https://likec4.dev/tooling/editors

Links to open the example-cloud-system project in various browser-based IDEs.

```markdown
[github.dev](https://github.dev/likec4/example-cloud-system/blob/main/model.c4)
[vscode.dev](https://vscode.dev/github/likec4/example-cloud-system/blob/main/model.c4)
[Stackblitz](https://stackblitz.com/~/github/likec4/example-cloud-system/)
```

--------------------------------

### MkDocs Plugin Installation

Source: https://likec4.dev/llms-full.txt

Install the mkdocs-likec4 plugin using pip.

```shell
pip install mkdocs-likec4
```

--------------------------------

### Start local web server

Source: https://likec4.dev/llms-full.txt

Starts a local web server for LikeC4 development. Mounts the current directory to /data, enables color output, and publishes necessary ports for the server and HMR.

```sh
docker run --rm \
  -v $PWD:/data \
  --init \
  -t \
  -p 5173:5173 \
  -p 24678:24678 \
  -e CHOKIDAR_USEPOLLING=1 \
  -e CHOKIDAR_INTERVAL=200 \
  likec4/likec4 \
  start
```

--------------------------------

### Run LikeC4 CLI Command via GitHub Container Registry

Source: https://likec4.dev/tooling/docker

Example of how to run a LikeC4 CLI command, such as getting help for the export command, using the GitHub Container Registry image.

```bash
docker run --rm -t ghcr.io/likec4/likec4 export png -h
```

--------------------------------

### Start MCP Server for Cursor

Source: https://likec4.dev/tooling/ai-tools

After configuring `.cursor/mcp.json`, start the LikeC4 MCP server using the CLI with the `--http` flag.

```bash
likec4 mcp --http
```

--------------------------------

### Install likec4 and vitest with yarn

Source: https://likec4.dev/guides/validate-your-model

Use this command to install the likec4 and vitest packages using yarn.

```bash
yarn add likec4 vitest
```

--------------------------------

### Install likec4 with yarn

Source: https://likec4.dev/tooling/code-generation/webcomponent

Installs the likec4 package using yarn.

```bash
yarn add likec4
```

--------------------------------

### Install Likec4 Globally

Source: https://likec4.dev/tooling/cli

Install the Likec4 package globally on your system to use the 'likec4' command directly.

```bash
npm install --global likec4
```

--------------------------------

### Include Paths Configuration Example

Source: https://likec4.dev/dsl/config/multi-projects

Configure include paths to reference files from directories outside the current project. This example shows how to include files from a 'shared' directory.

```json
{  "$schema": "https://likec4.dev/schemas/config.json",  "name": "cloud",  "include": {    "paths": ["../shared"]  }}
```

--------------------------------

### Run LikeC4 CLI Command via Docker Hub

Source: https://likec4.dev/tooling/docker

Example of how to run a LikeC4 CLI command, such as getting help for the export command, using the Docker Hub image.

```bash
docker run --rm -t likec4/likec4 export png -h
```

--------------------------------

### Install likec4 with npm

Source: https://likec4.dev/tooling/code-generation/webcomponent

Installs the likec4 package using npm.

```bash
npm i likec4
```

--------------------------------

### Start Vite Development Server

Source: https://likec4.dev/llms-full.txt

Run the Vite development server to see your LikeC4 diagram integrated into the application.

```bash
npm run dev
```

```bash
pnpm dev
```

```bash
yarn dev
```

```bash
bun dev
```

--------------------------------

### Install likec4 and vitest with pnpm

Source: https://likec4.dev/guides/validate-your-model

Use this command to install the likec4 and vitest packages using pnpm.

```bash
pnpm add likec4 vitest
```

--------------------------------

### Start Local LikeC4 Web Server

Source: https://likec4.dev/tooling/docker

Run the LikeC4 Docker image to start a local web server for development. Mounts the current directory to /data and publishes necessary ports. Includes optional HMR port configuration.

```docker
docker run --rm \
  -v $PWD:/data \
  --init \
  -t \
  -p 5173:5173 \
  -p 24678:24678 \
  -e CHOKIDAR_USEPOLLING=1 \
  -e CHOKIDAR_INTERVAL=200 \
  likec4/likec4 \
  start
```

```docker
docker run --rm \
  -v $PWD:/data \
  --init \
  -t \
  -p 5173:5173 \
  -p 24700:24700 \
  -e CHOKIDAR_USEPOLLING=1 \
  -e CHOKIDAR_INTERVAL=200 \
  likec4/likec4 \
  start --hmr-port 24700
```

--------------------------------

### Install Likec4 as a Development Dependency (pnpm)

Source: https://likec4.dev/tooling/cli

Install the Likec4 CLI as a development dependency in your pnpm project.

```bash
pnpm add -D likec4
```

--------------------------------

### Install LikeC4 Skill

Source: https://likec4.dev/tooling/ai-tools

Install the LikeC4 skill into your project using npx. This command utilizes the Agent Skills Discovery protocol.

```bash
npx skills add https://likec4.dev/
```

--------------------------------

### Install Likec4 as a Development Dependency (yarn)

Source: https://likec4.dev/tooling/cli

Install the Likec4 CLI as a development dependency in your yarn project.

```bash
yarn add -D likec4
```

--------------------------------

### Payment Service Metadata Example

Source: https://likec4.dev/dsl/model

Demonstrates complex deployment and operational metadata for a microservice, using arrays for dependencies, environments, and rate limits.

```likec4
payment = service 'Payment Service' {
    metadata {
      language 'Go'
      version '2.1.4'
      port '8080'
      health_check_path '/health'
      dependencies ['database', 'redis', 'external-payment-api']
      environments ['dev', 'test', 'stage', 'prod']
      scaling_policy 'auto'
      min_replicas '2'
      max_replicas '10'
      circuit_breaker_enabled true
      rate_limits ['1000/minute', '100/second']
      compliance_standards ['PCI-DSS', 'SOC2']
    }
  }
```

--------------------------------

### Multi-project Workspace Example

Source: https://likec4.dev/tooling/vite-plugin

Demonstrates how to import and use LikeC4 views from different projects within a multi-project workspace.

```tsx
import { LikeC4View as ProjectA_LikeC4View } from 'likec4:react/project-a'
import { LikeC4View as ProjectB_LikeC4View } from 'likec4:react/project-b'

const example = () => (
  <>
    <ProjectA_LikeC4View viewId='index' />
    <ProjectB_LikeC4View viewId='index' />
  </>
)
```

--------------------------------

### Install LikeC4 Core and Diagram Packages

Source: https://likec4.dev/tooling/react

Install the necessary LikeC4 packages using npm, pnpm, yarn, or bun. These packages are essential for using LikeC4 in your project.

```bash
npm i @likec4/core @likec4/diagram
```

```bash
pnpm add @likec4/core @likec4/diagram
```

```bash
yarn add @likec4/core @likec4/diagram
```

```bash
bun add @likec4/core @likec4/diagram
```

--------------------------------

### Install Likec4 as a Development Dependency (npm)

Source: https://likec4.dev/tooling/cli

Install the Likec4 CLI as a development dependency in your npm project.

```bash
npm i -D likec4
```

--------------------------------

### Start MCP Server with Http Transport and Custom Path (CLI)

Source: https://likec4.dev/tooling/ai-tools

Start the LikeC4 MCP server using the CLI with `http` transport, specifying a custom directory for the workspace and the default port.

```bash
likec4 mcp --http ./src
```

--------------------------------

### Execute Likec4 Package Binary (bunx)

Source: https://likec4.dev/tooling/cli

Fetch and execute the Likec4 package binary using bunx without installing it as a dependency.

```bash
bunx likec4 start
```

--------------------------------

### Install Standalone LikeC4 Language Server

Source: https://likec4.dev/tooling/editors

Install the standalone language server globally using npm. This binary provides LSP features for editors without direct integration.

```bash
npm install -g @likec4/lsp
```

--------------------------------

### Start MCP Server with Stdio Transport (CLI)

Source: https://likec4.dev/tooling/ai-tools

Start the LikeC4 MCP server using the CLI with the `stdio` transport. This is the default behavior.

```bash
likec4 mcp
```

```bash
likec4 mcp --stdio
```

--------------------------------

### Incoming Relationship Predicate Example

Source: https://likec4.dev/llms-full.txt

Include elements that have incoming relationships from already visible elements. This example demonstrates how to include 'ui' and 'backend' based on relationships from 'customer' and 'ui.webApp'.

```likec4
view {
  // visible element
  include customer

  // include nothing, customer has no relation to backend
  include -> backend

  // add ui,
  // because customer has a relationship with nested ui.webApp
  include -> ui

  // add backend, because visible ui has a relationship to backend
  // derived from ui.webApp -> backend.api
  include -> backend
}

// This view includes customer and ui
view {
  include
    customer,
    -> cloud.*
}
```

--------------------------------

### Help Option for Likec4 Commands

Source: https://likec4.dev/tooling/cli

Access usage examples and help information for Likec4 commands using the --help flag.

```bash
likec4 build -h
```

```bash
likec4 gen react -h
```

--------------------------------

### Execute Likec4 Package Binary (pnpx)

Source: https://likec4.dev/tooling/cli

Fetch and execute the Likec4 package binary using pnpx without installing it as a dependency.

```bash
pnpx likec4 start
```

--------------------------------

### Minimal Project Configuration with @likec4/config

Source: https://likec4.dev/dsl/config/programmatic

A simplified configuration using the smaller `@likec4/config` package for basic project setup.

```typescript
import { defineConfig } from '@likec4/config'
export default defineConfig({
  name: 'my-project',
  title: 'My Project'
})
```

--------------------------------

### Execute Likec4 Package Binary (npx)

Source: https://likec4.dev/tooling/cli

Fetch and execute the Likec4 package binary using npx without installing it as a dependency.

```bash
npx likec4 start
```

--------------------------------

### Start MCP Server with Http Transport and Custom Port (CLI)

Source: https://likec4.dev/tooling/ai-tools

Start the LikeC4 MCP server using the CLI with `http` transport, specifying a custom port number.

```bash
likec4 mcp -p 1234
```

--------------------------------

### Install LikeC4 Dependency

Source: https://likec4.dev/llms-full.txt

Add the LikeC4 library as a development dependency to your project.

```bash
npm install likec4 --save-dev
```

```bash
pnpm install likec4 --save-dev
```

```bash
yarn add likec4 --dev
```

```bash
bun add likec4 --dev
```

--------------------------------

### Use Local CLI with Aspire

Source: https://likec4.dev/llms-full.txt

Integrate LikeC4 with Aspire using a locally installed CLI instead of a Docker container.

```csharp
builder.AddAspireC4().WithLocalCLI();
```

--------------------------------

### Configure Vite with LikeC4 Plugin

Source: https://likec4.dev/tooling/vite-plugin

Example Vite configuration file (vite.config.ts) showing how to add the LikeC4VitePlugin.

```typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react' 
import { LikeC4VitePlugin } from 'likec4/vite-plugin' 
export default defineConfig({
  plugins: [
    react(), 
     LikeC4VitePlugin()
  ]
})
```

--------------------------------

### Erode GitHub Actions Integration

Source: https://likec4.dev/llms-full.txt

Quick start example for integrating Erode into GitHub Actions for code change analysis.

```yaml
- uses: erode-app/erode@0
```

--------------------------------

### Execute Likec4 Package Binary (yarn dlx)

Source: https://likec4.dev/tooling/cli

Fetch and execute the Likec4 package binary using yarn dlx without installing it as a dependency.

```bash
yarn dlx likec4 start
```

--------------------------------

### Preview LikeC4 Build Locally

Source: https://likec4.dev/tooling/cli

Starts a local server to preview the static website generated by the `likec4 build` command. Useful for verifying the build output before deployment or for CI comparisons.

```bash
likec4 preview -o ./dist
```

--------------------------------

### Serve LikeC4 Diagrams Locally

Source: https://likec4.dev/tooling/cli

Starts a local development server that watches for changes in LikeC4 source files and automatically updates diagrams in the browser. Useful for active development.

```bash
likec4 serve
# Aliases:likec4 startlikec4 dev
```

--------------------------------

### Create Initial Model

Source: https://likec4.dev/llms-full.txt

Define the top-level elements of your architecture model, like 'Customer' and 'Our SaaS'.

```likec4
// tutorial.c4
 specification {
  element actor
  element system
}

model {
  customer = actor 'Customer'
  saas = system 'Our SaaS'
}
```

--------------------------------

### Advanced Include Configuration Options

Source: https://likec4.dev/dsl/config/multi-projects

Demonstrates advanced include configuration with options for max depth and file threshold to optimize performance and manage large includes.

```json
{  "$schema": "https://likec4.dev/schemas/config.json",  "name": "my-project",  "include": {    "paths": ["../shared", "../common/specs"],    "maxDepth": 5,    "fileThreshold": 50  }}
```

--------------------------------

### VSCode Extension Installation Badges

Source: https://likec4.dev/tooling/editors

These badges show the total installs for the LikeC4 VSCode extension from Visual Studio Marketplace and Open VSX.

```markdown
[![VSCode Installs](https://img.shields.io/visual-studio-marketplace/azure-devops/installs/total/likec4.likec4-vscode?label=vscode%20installs)](https://marketplace.visualstudio.com/items?itemName=likec4.likec4-vscode)
![Open VSX Installs](https://img.shields.io/open-vsx/dt/likec4/likec4-vscode?label=open-vsx&color=%23A60EE5)](https://open-vsx.org/extension/likec4/likec4-vscode)
```

--------------------------------

### Display Help for LikeC4 Build Command

Source: https://likec4.dev/llms-full.txt

Run this command to see all available options for the LikeC4 build command, including output directory, base URL, and history modes.

```sh
npx likec4 build -h
```

--------------------------------

### Install LikeC4 as a Development Dependency

Source: https://likec4.dev/llms-full.txt

Install the likec4 package as a development dependency in your npm project. This allows you to use the CLI for development and build tasks.

```json
{
  scripts: {
    dev: 'likec4 dev ...',
    build: 'likec4 build ...'
  }
}
```

--------------------------------

### Dynamic View Definition Example

Source: https://likec4.dev/dsl/views/dynamic

Defines a dynamic view with actors, systems, and components, illustrating their relationships and styles. This example shows how to structure a view for a cloud system.

```c4
specification {
  element actor {
    style {
      shape person
    }
  }
  element system
  element component
}

model {
  customer = actor 'Customer' {
    description 'Customer of Cloud System'
  }

  cloud = system 'Cloud System' {
    backend = component 'Backend' {
      description 'Backend services and API'

      auth = component 'Authentication'

      api = component 'Backend API' {
        description 'RESTful API'
      }

      api -> auth 'validates bearer token'
    }

    ui = component 'Frontend' {
      description 'All the frontend applications
      of Cloud System
      '
      style {
        shape browser
      }

      web = component 'Customer Dashboard' {
        description 'React Application'
        style {
          shape browser
        }
      }

      web -> auth
      web -> api 'requests'
    }
  }

  customer -> web 'opens in browser'
}

```

--------------------------------

### Generate 'hello' diagram for a project

Source: https://likec4.dev/dsl/config/programmatic

Use this command to generate a basic 'hello' diagram for a specified project. Ensure you are in the terminal within your project's workspace.

```bash
likec4 gen hello --project my-project
```

--------------------------------

### Generate LikeC4 Model in Global Setup

Source: https://likec4.dev/guides/validate-your-model

Optimizes tests by pre-generating the LikeC4 model during Vitest's global setup. This ensures the model is available and typed for use in tests.

```typescript
import { execSync } from 'node:child_process'
export default function() {
  execSync('npx likec4 gen model -o ./test/likec4-model.ts', {
    stdio: 'inherit'
  })
}
```

--------------------------------

### Get Help for LikeC4 Build Command

Source: https://likec4.dev/llms-full.txt

Access the help documentation for specific LikeC4 CLI commands. This is useful for understanding command options and usage.

```sh
likec4 build -h
```

--------------------------------

### GitHub Actions Workflow for Deploying to GitHub Pages

Source: https://likec4.dev/guides/deploy-github-pages

This workflow automates the build and deployment of a LikeC4 website to GitHub Pages on every push to the main branch. It checks out the code, sets up Bun, configures GitHub Pages, builds the site using LikeC4 CLI, and uploads the build artifact.

```yaml
name: Deploy Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]
  # Allows you to run this workflow manually from the Actions tab
  workflow_call:
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in progress and the latest queued.
# However, do NOT cancel in-progress runs, as we want to allow these production deployments to be completed.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Build job
  build-pages:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v5
      - uses: oven-sh/setup-bun@v2
      - uses: actions/configure-pages@v4
        id: pages
      - name: build
        run: |
          bunx likec4@latest build \
            --base "${{ steps.pages.outputs.base_path || '/' }}" \
            --output dist
      - name: upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist
```

--------------------------------

### Get Model Errors

Source: https://likec4.dev/tooling/model-api

Retrieves any validation errors found in the LikeC4 model.

```APIDOC
## likec4.getErrors()

### Description
Returns an array of errors detected during the model parsing and validation process.

### Method
`likec4.getErrors(): LikeC4Error[]`

### Return Value
An array of `LikeC4Error` objects, or an empty array if the model is valid.

### Example
```javascript
import { LikeC4 } from "likec4"
const likec4 = await LikeC4.fromSource(`....`)
console.log(likec4.getErrors())
```
```

--------------------------------

### Invalid Sourceless Relationship

Source: https://likec4.dev/llms-full.txt

An example of an invalid 'sourceless' relationship where the parent element cannot be the source.

```likec4
model {
  -> backend // ⛔️ Error: model can't be a source
}
```

--------------------------------

### Direct Likec4 Command Usage

Source: https://likec4.dev/tooling/cli

After global installation, you can call the 'likec4' command directly with a subcommand.

```bash
likec4 [command]
```

--------------------------------

### Define Element Kinds

Source: https://likec4.dev/llms-full.txt

Start by defining the basic types of elements in your architecture, such as 'actor' and 'system'.

```likec4
// tutorial.c4
specification {
  element actor
  element system
}
```

--------------------------------

### Get Model Validation Errors

Source: https://likec4.dev/tooling/model-api

Retrieves any validation errors found in the LikeC4 model after initialization.

```typescript
import { LikeC4 } from "likec4"
const likec4 = await LikeC4.fromSource(`....`)
// Validation errors
console.log(likec4.getErrors())
```

--------------------------------

### Referencing Outer Scope

Source: https://likec4.dev/llms-full.txt

Example showing how components can reference elements in outer scopes using FQN.

```likec4
model {
  service service1 {
    component api
    component frontend {
      -> api             
      -> service2.api    // references to outer scope
    }
  }
  service service2 {
    component api
  }
}
```

--------------------------------

### Advanced Include Configuration Options

Source: https://likec4.dev/llms-full.txt

Configure 'include' settings with 'paths', 'maxDepth' for directory traversal limit, and 'fileThreshold' to warn about loading too many files. These options help optimize performance and manage included files.

```json
{
  "$schema": "https://likec4.dev/schemas/config.json",
  "name": "my-project",
  "include": {
    "paths": ["../shared", "../common/specs"],
    "maxDepth": 5,
    "fileThreshold": 50
  }
}
```

--------------------------------

### Generate Web Component with npm

Source: https://likec4.dev/tooling/code-generation/webcomponent

Use this command to generate the web component bundle using npm. The output file will be named 'likec4-webcomponent.js'.

```bash
npx likec4 codegen webcomponent -o ./src/likec4-webcomponent.js
```

--------------------------------

### Override Default Image Alias

Source: https://likec4.dev/dsl/config

Example of overriding the default `@` image alias to point to a different directory.

```json
{
  "imageAliases": {
    "@": "./my-images"
  }
}
```

--------------------------------

### Using Summary and Description

Source: https://likec4.dev/llms-full.txt

Explains the usage of `summary` and `description` properties. The `summary` is displayed on diagrams, while `description` is shown in detail dialogs. If `summary` is provided and `description` is not, `summary` is used as the description.

```likec4
model {
  saas = softwareSystem {
    title 'SaaS'
    summary 'Provides services to customers'
    description '
      Detailed description
      ... 
    '
  }
}
```

--------------------------------

### Get Specific Diagram View

Source: https://likec4.dev/tooling/model-api

Retrieves a specific diagram view from the layouted model using its name.

```typescript
const diagram = model.view('index')
```

--------------------------------

### Add a Specific System View

Source: https://likec4.dev/llms-full.txt

Create a view focused on the 'saas' element to visualize its internal components and their relationships.

```likec4
// tutorial.c4
specification {
  element actor
  element system
  element component
}

model {
  customer = actor 'Customer'
  saas = system 'Our SaaS' {
    component ui
    component backend

    // UI requests data from the Backend
    ui -> backend

    // Customer uses the UI
    customer -> ui 'opens in browser'
  }
}

views {
  view index {
    include *
  }

  view of saas {
    include *
  }
}
```

--------------------------------

### Install LikeC4 for React

Source: https://likec4.dev/tooling/code-generation/react

Add the likec4 package to your project's dependencies using your preferred package manager.

```bash
npm i likec4
```

```bash
pnpm add likec4
```

```bash
yarn add likec4
```

```bash
bun add likec4
```

--------------------------------

### Build Static LikeC4 Website

Source: https://likec4.dev/tooling/docker

Use the LikeC4 Docker image to build a static website from your LikeC4 project. Mounts the current directory to /data and outputs to the 'dist' directory.

```docker
docker run -v $PWD:/data likec4/likec4 build -o dist
```

--------------------------------

### Build Static LikeC4 Website

Source: https://likec4.dev/tooling/cli

Builds a static website containing LikeC4 diagrams, ready for deployment. The output is bound to a base path, which can be customized for relocatable applications.

```bash
likec4 build -o ./dist
```