Release notes

Recent, user-facing changes, newest first. The exact build you're running is shown at the foot of the app menu (open the hamburger in the top-left corner of any screen).

Latest

Decisions travel as their own file.

Extract the decision set — the Decisions table's Export dialog gains Decisions file (.json): the project's full decision set as one small data file (table filters don't apply — a filter is a view, not an extract), following the published crayon-c4-decisions schema.
Import decisions into an existing project — the new Import… button on the Decisions table reads a decisions file or a whole project export (its decisions are extracted automatically) and shows you what would change before anything is written: new decisions are added, existing ones updated by id, and decisions the file doesn't mention are never removed.
Backup carries decisions — the all-projects backup includes each project's decisions in its bundle, and restore handles bundles with or without them. See Architecture decisions.

Styles explain themselves in the export legend.

A legend description on display types and line styles. Every display type and connection line style can carry a sentence saying what it means ("Async traffic over the queue"); the export legend prints your words instead of the generic description.
Named line styles now appear in the legend at all — one entry per style the shipped diagrams actually draw, with the line's own colour and dash as its swatch, in whichever legend block (C4 / F4 / deployment) uses it.
The style settings lead with the one colour that matters. Each row shows the Base colour — the one that generates the palette — with the derived detail colours (border, background, font, selection) unfolding only when you engage it or open the tune toggle. The legend description is edited right there.

Editor panes and small fixes.

Description is always in reach. Every editor's details pane now shows the Description field with the essentials at the top, instead of folding it away — C4 elements, diagrams, boundaries and connections, deployment items and connections, and all F4 forms alike.
A rolled-up [*] connection reads top-down. Picking one of its underlying connections opens that connection's details directly beneath the row you clicked, and the F4 connections resting on the edge moved into a collapsed Appears on fold.
Connection labels move in 1% steps (was 5%) — slider and on-canvas label drag alike, in all three editors; Alt still places freely.
The decision dialog opens taller, so a full record fits without resizing — and a size you drag it to still sticks.
The homepage headline no longer overflows on phones.
The app header no longer scrolls away on long documentation pages (release notes, docs, disclaimer) — it now stays pinned for the whole scroll.

Architecture decisions (ADRs), linked to the model. (Pro)

Record why the architecture is the way it is, and let the model tell you when a decision needs revisiting. See Architecture decisions. Pro gates the management screens only — the decision records themselves round-trip through JSON export, import and backup on every tier.

A Decisions record table (app menu → Decisions): MADR-style records — title, status (Proposed / Accepted / Deprecated / Superseded), date, markdown Context / Decision / Consequences — with sortable columns and filters on text, status (incl. the Needs-review queue), linked element, and date range.
Work from the element. Select any element and its details pane lists the decisions that apply, starts a new decision pre-linked to it, or links an existing one — each opens in place, in a modal, without leaving the diagram. Diagrams stay clean: no decision markers on the canvas.
Accepted = immutable. A decision is editable while Proposed; accepting freezes its content for good (no edits, no delete). Course changes happen by superseding or deprecating — exactly how ADRs are meant to work.
Link a decision to the model — C4 elements, connections, and deployment items or instances, many-to-many, each link keeping the element's name and type from link time.
Categorize decisions your way. Create categories ("data", "infrastructure") just by typing them; a decision takes as many as apply. The table filters by category — several at once narrows with AND — and the linked-element filter can include children, so filtering by a System finds every decision under it.
Removal flags review. Deleting a linked element flags its decisions Needs review and keeps the element's last-known name on the record. If it was the decision's last live link, you choose explicitly: keep as a historical record, re-link, or deprecate. Press Still valid to clear the flag and stamp the confirmation date. Renames never flag — links follow the stable id.
Supersede chains stay a straight line: marking a decision superseded links the pair and cascades the status along the chain.
Decisions in the document export. The export's Written details tab offers two independent placements — a full overview section at the end of the document, and/or a Decisions column on the rows of the elements, relationships and deployments each record links to — plus a status pick, so you can ship Accepted decisions only. The "What to export" step is now three tabs (Document, Diagram images, Written details).
Export straight from the Decisions table. The Export… button downloads the records the table currently shows (filters apply) as one Markdown document, grouped by category, status and/or linked element — in whichever nesting order you arrange, by drag or by the arrows.
Group the table itself. The same grouping is available on the Decisions table (Group…), with header rows and counts, for an overview without exporting. Groups are collapsible — per group (the chevron), per level, or all at once — and an active category or linked-element filter also narrows the group buckets, so a filtered-away category never resurfaces as a group. The table now opens sorted newest first.
Element grouping follows the C4 hierarchy (by default). When grouping by linked element, the buckets arrange System › Container › Component; a connection files under its endpoints' common ancestor and a deployed container under the element it deploys. Untick Nest by C4 hierarchy for a flat list.
Print the decisions to PDF. The table's Export dialog also offers Print / Save as PDF — the same grouped document, rendered for print.
Viewers show decisions read-only, floating. Opening a decision from a viewer's details panel shows a display-only card that floats over the diagram without dimming or blocking it — drag it by its header, resize it by its corner, keep working underneath. It reopens at the position and size you last gave it. Editing stays in the editors and on the Decisions screen — where the decision dialog is resizable too, and equally remembers its size.
Git-native files. The Markdown (.zip) export writes each decision as its own adr/*.md file with clean, deterministic diffs; the project JSON round-trips them losslessly.

An F4 connection is checked against the C4 model — and the model proposes the missing steps.

Draw first, then let the model have its say. An F4 line is a handoff between two elements of your architecture. When you draw one that the C4 model has no relationship for — but there is a route through the model — the editor offers to add the steps in between: one activity per element on the way, each in the lane bound to that element (created if it isn't on the board yet). Accept it and your line becomes the first hop of the chain; decline and the line stays exactly as you drew it. See Link to C4.
Validate the whole board. A Validate connections button in the F4 editor marks every line the C4 model doesn't cover — the same red mark, and the same coverage rule, the deployment editor already uses. A line without a relationship stays perfectly legal; the mark only tells you the models disagree.
Trace it both ways. An F4 connection's details pane lists the C4 relationships that support it — including ones declared deeper that roll up onto it — with a link to the C4 diagram that draws the line. And a C4 connection lists the F4 connections that rest on it, linking straight to each one with the line selected. Both directions work in the viewer and the editor alike.
Deep links to an F4 activity or connection now open the side panel too, so the link lands you on the thing it names instead of a silently selected diagram.

Move a connection's label with the mouse.

Drag the label along its line. The label is the handle: press it and slide it to where it reads best. It stays on its line — a label floating free no longer says which connection it belongs to. Press it twice to send it back to the middle, and hold Alt to place it between the steps the slider offers. See Relationships.
Where it sits belongs to the diagram. The same C4 connection is drawn on every diagram where both of its ends appear, and those diagrams lay their elements out differently — the spot that keeps the text clear of the boxes on one puts it under a card on another. Each diagram now remembers its own position for the line, and existing projects keep the position they had on every diagram that draws it.
The slider in the details pane still does the same job, and now sits beside the other things that are true of the drawn line: where it attaches and how it runs.

One arrowhead, one default line, and settings in tabs.

Set what a plain connection looks like. A project now has a default connection style — colour, thickness, dash and arrowhead — used by every line that doesn't name a style of its own. See Styling.
Choose the arrowhead. Filled arrow, open arrow, dot, diamond, or none — on the default and on each named line style. It draws on the canvas and in an exported SVG alike.
The style settings are three tabs — element types, display types, connections — instead of one long scroll, so adding a display type no longer means passing every line style on the way down.

Give a connection its own kind of line.

Colour, thickness and dash are yours to define — once, for the whole project — and every connection can name one. See Styling.

Define the styles in one place. The style settings dialog has a new Connection line styles section beside the node styles: name a style — Async, Secure, Legacy — and give it a colour, a width, and solid, dashed or dotted lines.
One set, all three diagram types. A style defined in the C4 dialog is the same style the deployment and F4 diagrams offer, so a kind of line reads the same wherever it is drawn. Rename or delete one and every connection using it, in every model, keeps up.
Pick it on the connection. Each connection's details pane has a Line style field, beside where the line attaches and how it runs. Leave it on Default line and nothing changes.
The selected line now glows. Selection used to be said with colour and thickness alone — which stops working the moment you can define a line that looks exactly that way. A selected line keeps its own dash and gains a glow, so you can always tell which one you have hold of.
Line styles travel with Copy / Paste styles between projects, and a copied diagram brings its connections' styles with it. A style the project doesn't have simply draws as a normal line.

Say what a rolled-up line means.

Where several deeper connections roll up into one line on a coarser diagram, that line showed [*] — no single connection's label could speak for the rest. You can now give the line its own label, and it shows on every diagram that draws that pair. See Relationships.
Every connection's Label field also carries a Higher levels list, so you can say what this connection means one or two levels up without leaving it.

Pick the diagram type from the header.

A C4 / D4 / F4 picker now sits beside the View/Edit toggle. Switching type keeps the mode you were in — the viewer stays the viewer, the editor stays the editor — and keeps you in the same project. See Working in the editors.

Export.

Describe a C4 element once, not once per diagram. A model draws the same element on several diagrams on purpose, so its type, technology and description were stated again under every one of them. The export panel's new C4 element detail setting lets you move those definitions into a single Elements section before the diagrams — which also names, per element, the diagrams it appears on — and each diagram then only lists what it shows. You can drop the per-diagram listings entirely, or leave everything exactly as it was. See Export.
Choose how much of the F4 listings the document carries: all of them (unchanged), only the ones that carry prose the picture could not fit, or none — leaving the F4 sections with their diagrams. See Export.
An F4 connection can carry a description beside its label: the label is what fits on the line, the description is the rest. It shows in the side panel and in the exported document.
The export screen's toolbar, settings and document now line up on one column, and the settings are grouped by what they have in common.

Code integration.

Set a repository up without AI. crayon-c4 init, and a setup command in the VS Code extension, propose which projects to leave out and how coarse the components should be, measure the effect, and write .crayon/config.json. See Document from code.
Readable component diagrams by default. A folder is now the component and its files sit below it as code, instead of every file being a component of its own — on a large repository that took one diagram from 242 elements to 50, with nothing lost: the detail moved one level down.
crayon-c4 validate <file> checks a model file against the published schema and the app's own rules, so a generated model can be corrected before anyone imports it.

Property panes that get to the point.

The details pane on the right of every editor used to list every field an element has, in one long stack — the name you set on everything sat in the same queue as the icon you set once a year. Now the few fields you actually use on every element are at the top, and the rest are in named sections you open when you want them.

Essentials first. A C4 element opens on name, element type and short description; a connection on its label and technology; a swimlane on its name and the C4 element it stands for. Everything else is one click away.
A closed section tells you what is in it. Each folded section shows its current value on its own line — in my system, Curved lines, Routed by hand, the opening words of a description, or how many members a boundary has. Nothing is hidden, only summarised; a dot marks a section holding something you set.
Your folds follow you. Open Appearance once and it stays open as you click from element to element, across every editor and every project, until you close it again.
Sections that are the element stay open — a group's members, a boundary event's interrupts, and where a connection attaches and how it runs. So do sections holding a problem, like an element whose parent has been deleted.
Actions that affect the whole element — add, copy, save as template, delete — now sit together on one rail at the foot of the pane.

Video tutorials in the docs.

A new Video tutorials page lists the recorded walkthroughs from the SQUORA YouTube channel. It reads the channel when you open it and shows the videos tagged Crayon-C4-Tutorial, so a newly published tutorial appears on its own — nothing has to be edited here for it to show up.
The landing page now carries YouTube and LinkedIn links in its footer.

Fixes.

The C4 viewer sometimes drew no connections at all. Measuring a card's width fed that width straight back into the card, so the canvas never settled and the lines were never placed. The viewer now draws its connections on every load, and stops re-rendering once it has.
Aligned elements really are aligned. The alignment guides measured a default card size rather than the card in front of you, so snapping two cards of different heights left their centres up to half a card apart — enough for a straight line between them to draw a visible jog. They now measure what the browser drew, and a line whose ends are near enough to level is drawn as one straight segment instead of a hairpin too small to render.
A nudge with the arrow keys sticks. Selecting an element and nudging it moved it on screen and then quietly threw the move away on the next redraw. Arrow keys now move by one pixel — a grid cell on the F4 canvas — ten with Shift, and the move is kept.
A boundary hugs its elements. Group frames were sized from an estimate of their contents rather than the contents, leaving a band of empty space along the bottom.
A connection label keeps its spaces while you type. Typing order placed into a connection's label stored orderplaced: the field tidies the value it saves, and it was doing that mid-sentence — eating the space the moment you paused between two words. Labels, technologies and the rolled-up level labels are now tidied when you leave the field, not while you are still in it. The same applied to an F4 connection's description, where a line of spaces blanked what you had written.

Recent

Route a connection yourself.

Every line still routes itself by default. When you want a particular one to take a particular path, you can now say so — on the C4 canvas and the deployment canvas alike. See Relationships and Connections.

Bend a line where you grab it. Select a connection and drag it: a waypoint appears at that spot and the line runs through it. Drag a waypoint to move it, double-click it to remove it. Remove the last one and the line goes back to routing itself.
A waypoint is a corner. The line turns at the point you placed, so dragging it either way redraws the route. Where a handle sits on a straight run it shows as a small bar along that run — it can only slide that way, and it says so before you touch it. Waypoints snap to the ends of their own line and to each other, with a guide showing what they lined up with; hold Alt to place one freely.
Back to automatic, or realign. A hand-routed line keeps its path when elements move — that is the point of routing it yourself. Realign re-seeds it from the route the diagram would pick now while keeping it under your control, and back to automatic hands it back entirely.
Curved or straight, per diagram. A C4 diagram can draw its connections as curves or as square corners; the choice belongs to the diagram.
Pick the side a line leaves from. Drag either end of a C4 connection onto the side of a card you want it to use, and it stays there. The same choice is in the connection's form, under its endpoints.
On the deployment canvas, a line drawn inside an instance is routed once and drawn the same way in every copy of that instance, in every environment.

A boundary that stays put.

Adding a group to a C4 diagram no longer removes the boundary around its subject. The subject boundary is always drawn around every one of the subject's elements on the diagram, and a group made only of those elements nests neatly inside it. See Containers & drill-down.
A deployed container whose C4 container was deleted now repairs itself on load instead of leaving a broken placement behind.

Earlier

Clearer C4 diagrams.

Boundary groups now carry an optional description, and it travels into the exported document alongside the group's members. See Containers & drill-down.
A diagram that is about a subject now draws only the connections its subject takes part in — lines between two other elements that merely both appear for context stay on the diagram they belong to. See Relationships.
Cards are denser, so more of a description fits without crowding.

Deployment.

Cleaner deployment nodes. Container frames now have solid borders with their name on a tab tucked into the top-left corner, and instance cards show their kind on a small corner tab. Labels sit clear of the connection lines, so nothing draws over a name. See Nodes & instances.
Type icons. A deployment type can now carry its own icon in the style dialog, the same way C4 element and display types do — an item with no icon of its own falls back to its type's icon.
Shared display types. Custom display types are now shared with the C4 model: define or recolour one in either the C4 or deployment style dialog and it updates in both, and renaming or deleting one keeps every C4 node and deployment item in step. See Nodes & instances.
Deployment lines hold their on-screen width when you zoom out, instead of thinning to a faint smear.
Connections between deployed elements are easier to draw and re-point, including a warning when a deployment connection has no matching C4 relationship behind it. See Connections.

Export.

The document export renders each diagram as a real vector SVG — it opens in Illustrator, Inkscape, Figma, and GitHub, and the files are far smaller. You can also choose PNG. See Export.
The deployment half of the export now describes every deployed element in full — type, tech, notes, nested children, and wiring — stated once and referenced per environment. See Export.

Editing.

C4 boundary groups can be moved and manually resized on the canvas, with a one-click return to auto-fit. See Containers & drill-down.
Copy a project's node styles or a single diagram and paste them into another project. See Manage projects.

Code integration.

The code-to-model toolchain reads a per-repository .crayon config, supports Java and React projects alongside the existing stacks, and can trace method-level flows. See Document from code.

Where next

FAQ — short answers to common questions.
Getting started — tour the screens and build a first diagram.
Export — get your diagrams out as a document, SVG, or PNG.