When an agent includes a fenced code block with the language likec4 or c4 in its response, the session view renders it as an interactive architecture diagram instead of plain code. The diagram supports zooming, panning, view navigation, and contextual actions on elements.
The agent writes standard LikeC4 DSL inside a fenced code block:
```likec4
specification {
element system
element service
}
model {
cloud = system 'Cloud Platform' {
api = service 'API Gateway'
db = service 'Database'
api -> db 'reads/writes'
}
}
views {
view index {
include *
}
}
```
The DSL is sent to a server-side parser that produces a layouted model, which is then rendered as an interactive diagram in the session view.
Because agent responses stream token by token, the markdown layer waits for the code block to close before mounting the diagram. Every render, it scans the raw markdown for a closing ``` fence after the source; until that fence arrives, a loading placeholder is shown in place of the diagram. No debounce or delay — the moment the closing fence is present, the DSL is sent to /api/diagrams/likec4 once, and the diagram mounts when the parsed model returns.
This replaces an earlier 600ms debounce that could either fire too early (parsing an incomplete block) or too late (parsing a block that was already complete). Closing-fence detection is deterministic — the request goes out exactly when the source is complete, and once only.
If the DSL is invalid or the parser fails, the block displays an error banner above the raw source, titled "LikeC4 diagram failed to render" and showing the parser's error message. A copy-to-clipboard button next to the title copies just the error message, which is handy for pasting back into the prompt to ask the agent to fix it. The source code itself is still rendered below with syntax highlighting so the problem can be inspected and copied separately.
In its inline position within the session event stream, the diagram does not intercept scroll or drag gestures by default. This means scrolling over the diagram scrolls the page normally.
To pan and zoom the diagram, hold the Shift key:
In fullscreen mode (see below), pan and zoom work without Shift.
A toolbar appears in the top-right corner of the diagram when you hover over it. It contains two buttons:
If the LikeC4 source defines multiple views, the built-in LikeC4 dropdown menu (top-left of the diagram) lists all available views. Clicking a view navigates to it within the same diagram block. Back/forward navigation buttons appear when you have navigated between views.
Clicking any element (node) in the diagram opens a context menu at the cursor position. The menu always includes two default items:
API Gateway)cloud.api)Clicking either option appends the text to the current prompt. If there is already text in the prompt, it is separated by a blank line.
Elements can define custom context menu actions using the LikeC4 metadata block. Each action is a string in the actions array using the format:
Label | Prompt text
The label is the short text shown in the menu. The prompt text is the full, self-contained instruction that gets inserted into the prompt when clicked. The prompt text should include enough context (element name, role, system) that it makes sense as a standalone question.
Example:
api = service 'API Gateway' {
description 'REST API entry point for all client requests'
metadata {
actions [
'Explain auth flow | Explain how the API Gateway service authenticates incoming requests, including token validation and the middleware chain',
'Review error handling | Describe the error handling strategy in the API Gateway, including how 4xx and 5xx responses are structured and logged',
'Show dependencies | List all downstream services that the API Gateway calls, and describe the failure modes if any of them are unavailable'
]
}
}
When this element is clicked, the context menu shows:
cloud.apiCustom actions appear above the divider; the default items appear below.
If an action string does not contain |, the entire string is used as both the label and the inserted text.
To get an agent to produce diagrams with useful metadata, include instructions like this in a persona or system prompt:
When you generate LikeC4 architecture diagrams, add a
metadatablock to each element with anactionsarray. Each action is a string in the formatLabel | Prompt text. The label is a short description shown in a context menu. The prompt text is a self-contained question or instruction that makes sense on its own — it should name the element and include enough context that a reader unfamiliar with the diagram could understand what's being asked.Guidelines for writing actions:
- The label should be 2-4 words — an action the user can scan quickly
- The prompt text should be a complete sentence that stands alone as a question or instruction
- Include the element's name and role in the prompt text so it's unambiguous without diagram context
- Focus on questions that are architecturally interesting: integration points, failure modes, data flows, security boundaries, scaling constraints
- Aim for 2-5 actions per element, tailored to that element's role in the system
A minimal LikeC4 source requires three sections:
specification defines the element kinds (e.g. system, service, user) and optionally relationship kinds, tags, and stylesmodel defines the elements, their nesting, and relationships between themviews defines one or more diagram views that select which elements and relationships to displayFor the full DSL reference, see the LikeC4 documentation.