### Minimal LikeC4 DSL Example

Source: https://github.com/timseriakov/likec4-architecture-skill/blob/master/references/likec4-dsl-quickstart.md

A minimal working example of LikeC4 DSL, demonstrating the basic structure of specification, model, and views blocks. This serves as a starting point for creating new architecture models.

```c4
specification {
  element actor
  element system
  element container
}

model {
  user = actor "User"
  product = system "Product"
  web = container "Web App"
  api = container "API"

  user -> web "Uses"
  web -> api "Calls"
}

views {
  view context {
    include user
    include product
  }

  view containers {
    include user
    include web
    include api
  }
}
```

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

### Install LikeC4 Skill via Context7 Skills

Source: https://github.com/timseriakov/likec4-architecture-skill/blob/master/README.md

Installs the likec4-architecture-skill using the Context7 Skills CLI. It allows inspecting available skills and then installing the specific skill universally.

```shell
# inspect available skills in this repo
npx ctx7 skills info /timseriakov/likec4-architecture-skill

# install this skill
npx ctx7 skills install /timseriakov/likec4-architecture-skill likec4-architecture --universal
```

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

### Start LikeC4 CLI Live Preview Server

Source: https://context7.com/timseriakov/likec4-architecture-skill/llms.txt

Starts a development server for interactive diagram preview. The server runs locally and automatically reloads when file changes are detected, facilitating rapid development and iteration.

```sh
# Start live preview server
npx likec4 start

# Server starts at http://localhost:3000
# Hot-reloads on file changes
```

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

### Install LikeC4 Architecture Skill

Source: https://context7.com/timseriakov/likec4-architecture-skill/llms.txt

Instructions for installing the LikeC4 Architecture Skill using either Vercel Skills or Context7 Skills CLI. This enables the use of AI for architecture diagramming.

```shell
# Option 1: Vercel Skills
npx skills add timseriakov/likec4-architecture-skill

# Option 2: Context7 Skills - inspect available skills
npx ctx7 skills info /timseriakov/likec4-architecture-skill

# Option 2: Context7 Skills - install the skill
npx ctx7 skills install /timseriakov/likec4-architecture-skill likec4-architecture --universal
```

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

### Install LikeC4 Skill via Vercel Skills

Source: https://github.com/timseriakov/likec4-architecture-skill/blob/master/README.md

Installs the likec4-architecture-skill using the Vercel Skills CLI. This is a straightforward command to add the skill to your project.

```shell
npx skills add timseriakov/likec4-architecture-skill
```

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

### LikeC4 DSL Views and Include Predicates

Source: https://github.com/timseriakov/likec4-architecture-skill/blob/master/references/likec4-dsl-quickstart.md

Demonstrates how to define views and use include predicates in the 'views' block of LikeC4 DSL. This allows for specifying which elements should be included in a particular diagram.

```c4
views {
  view index {
    include *
  }
}
```

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

### Create New Architecture Model with Likec4

Source: https://github.com/timseriakov/likec4-architecture-skill/blob/master/references/examples.md

This example shows how to create a new architecture model, including context and container views, and validate it using the Likec4 CLI. It assumes the user provides a request for a billing platform architecture.

```bash
npx likec4 validate
# (Implicit command to create/update .c4 files based on user request)
```

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

### LikeC4 DSL Relationships

Source: https://github.com/timseriakov/likec4-architecture-skill/blob/master/references/likec4-dsl-quickstart.md

Illustrates how to define relationships between elements in the 'model' block of LikeC4 DSL. This is used to show interactions or dependencies between different components.

```c4
model {
  web -> api "Calls"
}
```

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

### Quick Use: Copy Starter Model, Validate, and Preview LikeC4

Source: https://github.com/timseriakov/likec4-architecture-skill/blob/master/README.md

Demonstrates the quick usage of the likec4-architecture-skill. It involves copying a starter model, validating the LikeC4 model, and starting a local preview server.

```shell
# copy starter model into current project
mkdir -p ./docs/architecture
cp ./assets/likec4-starter/docs/architecture/model.c4 ./docs/architecture/model.c4

# validate
npx likec4 validate

# preview
npx likec4 start
```

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

### Bootstrap New Architecture Model with LikeC4

Source: https://context7.com/timseriakov/likec4-architecture-skill/llms.txt

Steps to initialize a new architecture model using the LikeC4 starter template. This involves creating a directory, copying the template, validating the model, and starting a live preview server.

```shell
# Create architecture directory
mkdir -p ./docs/architecture

# Copy starter model template
cp ./assets/likec4-starter/docs/architecture/model.c4 ./docs/architecture/model.c4

# Validate the model
npx likec4 validate

# Start live preview server
npx likec4 start
```

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

### Export Architecture Diagrams with Likec4

Source: https://github.com/timseriakov/likec4-architecture-skill/blob/master/references/examples.md

This example covers exporting architecture diagrams for documentation and CI artifacts using the Likec4 CLI. It includes commands for building the model and exporting it to PNG format.

```bash
npx likec4 build -o ./dist
npx likec4 export png -o ./assets/architecture
```

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

### LikeC4 DSL Element Declaration

Source: https://github.com/timseriakov/likec4-architecture-skill/blob/master/references/likec4-dsl-quickstart.md

Demonstrates how to declare an element within the 'model' block in LikeC4 DSL, including its technology and a description. This is useful for defining the components of your system architecture.

```c4
model {
  api = container "API" {
    technology "Node.js"
    description "Business logic and endpoints"
  }
}
```

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

### LikeC4 DSL Nested Elements

Source: https://github.com/timseriakov/likec4-architecture-skill/blob/master/references/likec4-dsl-quickstart.md

Shows how to define nested elements within the 'model' block in LikeC4 DSL. This allows for hierarchical representation of system components, such as containers within a system.

```c4
model {
  platform = system "Platform" {
    web = container "Web App"
    api = container "API"
  }
}
```

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

### LikeC4 DSL: Microservices with Queue Pattern

Source: https://context7.com/timseriakov/likec4-architecture-skill/llms.txt

An example of the microservices with queue pattern in LikeC4 DSL, modeling asynchronous communication and message-driven architectures. It defines services, a message queue, and their interactions.

```c4
specification {
  element actor
  element system
  element container
}

model {
  user = actor "User"

  gateway = container "API Gateway" {
    technology "Kong"
    description "Request routing and auth"
  }

  orderService = container "Order Service" {
    technology "Node.js"
    description "Order processing"
  }

  billingService = container "Billing Service" {
    technology "Go"
    description "Payment and invoicing"
  }

  queue = container "Message Queue" {
    technology "RabbitMQ"
    description "Async event bus"
  }

  db = container "Orders DB" {
    technology "PostgreSQL"
  }

  user -> gateway "Sends requests"
  gateway -> orderService "Routes orders"
  orderService -> queue "Publishes events"
  billingService -> queue "Consumes events"
  orderService -> db "Reads/Writes"
}

views {
  view containers {
    title "Microservices Architecture"
    include user
    include gateway
    include orderService
    include billingService
    include queue
    include db
    autoLayout TopBottom
  }
}
```

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

### LikeC4 DSL: Define Model Block

Source: https://context7.com/timseriakov/likec4-architecture-skill/llms.txt

Example of a LikeC4 DSL model block defining elements, their hierarchy, technology metadata, and directional relationships. This block forms the core of the architecture description.

```c4
model {
  user = actor "User"

  product = system "Product"

  web = container "Web App" {
    technology "Next.js"
    description "UI and user-facing workflows"
  }

  api = container "API" {
    technology "Node.js"
    description "Business logic and public/internal endpoints"
  }

  db = container "Primary DB" {
    technology "PostgreSQL"
    description "Transactional storage"
  }

  user -> web "Uses"
  web -> api "Calls"
  api -> db "Reads/Writes"
}
```

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

### Update Architecture Model After Code Change with Likec4

Source: https://github.com/timseriakov/likec4-architecture-skill/blob/master/references/examples.md

Demonstrates updating an existing architecture model to reflect code changes, such as adding new components like an async worker and Redis queue. It emphasizes maintaining stable IDs and revalidating the model.

```bash
# (Implicit commands to update .c4 files based on user request)
npx likec4 validate
```

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

### LikeC4 DSL: Define Views Block

Source: https://context7.com/timseriakov/likec4-architecture-skill/llms.txt

Example of a LikeC4 DSL views block used to create focused diagram views. It utilizes include predicates to control element visibility and can apply layout strategies.

```c4
views {
  view context {
    title "System Context"
    include user
    include product
  }

  view containers {
    title "Container View"
    include user
    include web
    include api
    include db
    autoLayout TopBottom
  }

  view index {
    include *
  }
}
```

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

### LikeC4 DSL: Define Specification Block

Source: https://context7.com/timseriakov/likec4-architecture-skill/llms.txt

Example of a LikeC4 DSL specification block used to define custom element types, relationship kinds, and tags within an architecture model. This sets up the vocabulary for the model.

```c4
specification {
  element actor
  element system
  element container
  element component
}
```

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

### Build LikeC4 CLI Static Site

Source: https://context7.com/timseriakov/likec4-architecture-skill/llms.txt

Builds a static site from your architecture models, suitable for deployment and hosting. The output is placed in a specified directory, typically containing an index.html file and associated assets.

```sh
# Build static site to ./dist directory
npx likec4 build -o ./dist

# Output: ./dist/index.html and assets
# Deploy to any static hosting (Vercel, Netlify, GitHub Pages)
```

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

### Export LikeC4 Diagrams as PNG Images

Source: https://context7.com/timseriakov/likec4-architecture-skill/llms.txt

Exports all architecture views as PNG images. This is useful for including diagrams in documentation, README files, or CI pipelines for artifact generation.

```sh
# Export all views as PNG images
npx likec4 export png -o ./assets/architecture

# Output: ./assets/architecture/<view-name>.png for each view
# Use in README, docs, or CI publishing
```

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

### Define LikeC4 Architecture Model with Updates

Source: https://context7.com/timseriakov/likec4-architecture-skill/llms.txt

Demonstrates how to update an existing LikeC4 architecture model by adding new elements and relationships while preserving stable IDs for existing components. This ensures backward compatibility and smooth evolution of the architecture.

```c4
model {
  // Existing elements (keep IDs stable)
  api = container "API" {
    technology "Node.js"
  }

  db = container "Primary DB" {
    technology "PostgreSQL"
  }

  // New elements added for async processing
  queue = container "Message Queue" {
    technology "Redis"
    description "Job queue for background tasks"
  }

  worker = container "Background Worker" {
    technology "Node.js"
    description "Processes async jobs"
  }

  // Existing relationships
  api -> db "Reads/Writes"

  // New relationships
  api -> queue "Enqueues jobs"
  worker -> queue "Processes jobs"
  worker -> db "Updates records"
}
```

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

### LikeC4 CLI: Validate Model

Source: https://context7.com/timseriakov/likec4-architecture-skill/llms.txt

Command to validate the syntax and relationships of LikeC4 architecture model files using the LikeC4 CLI. This is a crucial step before delivering architecture changes.

```shell
# Validate all .c4/.likec4 files in project
npx likec4 validate

# Expected output on success:
# ✓ Model validated successfully
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.