User Guide
Write architecture diagrams as code, right inside a Confluence page. You describe your system in LikeC4 DSL, and the macro renders a clean C4 diagram inline — no external drawing tool, no image files to keep in sync. Everything is rendered in your browser.
1. Quick Start
Step 1 — Insert the macro
On any Confluence page, type /c4 and choose C4 Architecture Diagram.
Step 2 — Start from a template
The macro opens with an empty editor. Click Templates in the header to browse the built-in template library.
Pick a template, preview it on the right, then click Use this template. If your editor already has content, you will be asked to confirm before it is replaced.
Step 3 — Edit and preview
Type in the left pane; the preview on the right updates as you type. Syntax highlighting, autocomplete, and inline error markers guide you along the way.
Step 4 — Save
Click Save. The diagram is published to the page.
Tip: Start with Minimal starter — it is the smallest complete model, with comments explaining the three blocks every LikeC4 file needs.
2. Interface
2.1 The editor
The editor opens as a full-width dialog with three areas: a header of controls, a split body (DSL on the left, live preview on the right), and a footer with validation and save actions.
Header
Control | What it does |
|---|---|
Templates | Opens the template library (10 ready-to-use models) |
Collapse on page | Wraps the diagram in a collapsible block that starts closed for readers |
Collapsed title | The label shown on the collapsed bar (appears only when the toggle is on) |
Export | Download SVG, Download PNG, or Copy image to the clipboard |
Documentation / Support | Opens the online documentation and the support portal |
Body
Area | What it does |
|---|---|
DSL editor (left) | Syntax highlighting, code folding, autocomplete, inline error underlines |
View selector (right) | Switches between views when your model defines more than one |
Maximize preview | Expands the preview to fill the dialog, with full pan, zoom, and search |
Split divider | Drag to change the width of the editor and preview panes |
Footer
Control | What it does |
|---|---|
Format | Tidies up indentation and spacing (disabled while there are syntax errors) |
No problems / N problems | Validation status. Click the counter to jump to the first error |
Cancel | Closes the editor. Warns you first if you have unsaved changes |
Save | Publishes the diagram to the page |
2.2 The diagram on the page
Readers see the diagram rendered inline, scaled to the page width. Hovering over it reveals an Open fullscreen button in the top-right corner. Individual elements and relationship labels can be clicked to open their details.
3. Features
3.1 Fullscreen viewing
Readers open fullscreen from the button in the diagram's top-right corner. Fullscreen unlocks the full interactive canvas.
Interaction | How |
|---|---|
Pan | Drag the canvas |
Zoom | Scroll, or use the |
Search | Press |
Element details | Click an element |
Relationship details | Click a relationship label |
Focus mode | Double-click an element to dim everything unrelated to it |
Drill down | Click an element that has |
Legend | Open the notation panel to see what each element kind means |
3.2 Collapsible block
Long pages get crowded quickly. Turn on Collapse on page to tuck the diagram behind a one-line bar that readers expand only when they need it.
Clicking the chevron on the right expands it in place. The title itself is not clickable, which avoids accidental toggling while reading.
The block always starts collapsed when the page loads, and the diagram inside stays ready — so PDF and Word exports still include it.
3.3 Exporting images
Use the Export menu in the editor header to take the current view out of Confluence.
Option | Result |
|---|---|
Download SVG | Vector file, ideal for slides and further editing |
Download PNG | Raster file at 3× resolution on a white background |
Copy image | Puts the PNG on your clipboard for pasting into Slack, email, or a doc |
Files are named c4-<view>-<timestamp>, so repeated exports never overwrite each other.
3.4 PDF and Word export
When someone exports the Confluence page to PDF or Word, the diagram is included as an image automatically. This works from the moment you save the macro — no extra step required.
4. Configuration
All settings live in the macro editor; there is no global admin configuration.
Setting | Where | Default | Notes |
|---|---|---|---|
DSL source | Left editor pane | Empty | The model itself. Required before you can save |
Selected view | View selector | First view | Determines what readers see on the page |
Collapse on page | Header toggle | Off | Wraps the diagram in a collapsible block |
Collapsed title | Header text field |
| Maximum 60 characters; a counter shows how many are left |
5. FAQ
Why is nothing showing up in the preview? Check the footer. If it reads N problems, click it to jump straight to the first error. If it reads No problems but the canvas is empty, your views block is probably missing an include statement.
Why is a nested element missing from my diagram? include * brings in top-level elements only. Reference nested children explicitly, or use a scoped view such as view containers of platform.
Can a parent element point at its own child? No. Relationships between an element and its own descendant are not allowed — connect siblings instead, or move the relationship one level up.
My #tag causes an error. Why? Tags must be the first thing inside an element body, before description, technology, and other properties.
Is my DSL sent to an external server? No. Parsing, layout, and rendering all happen in your browser, and the DSL is stored in the macro on the page.
6. Quick Reference
DSL skeleton
specification {
element person {
style {
shape person
color green
}
}
element system
}
model {
user = person 'End User'
app = system 'My Platform' {
description 'What it does'
technology 'Go'
}
user -> app 'Uses'
}
views {
view index {
title 'System Context'
include *
}
}