Release notes

User-facing changes, newest first, grouped by the release that shipped them. 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).

1.46.0

A release that takes the model out of the app and into the places teams already work — your Git repository and your Backstage catalog — plus a round of fixes to the C4 wand and to Flow (F4) route proposals.

Show each service's architecture in Backstage. The new CRAYON-C4 plugin adds a read-only Architecture tab to a Backstage catalog entity, drawn by the same viewer you use in the app and read straight from a model committed in the entity's repository — no CRAYON-C4 account needed. The model's decisions are shown alongside the diagrams. The model path is resolved through Backstage's own source-control integrations, so GitHub, GitLab, Bitbucket and Azure DevOps all work. See The Backstage plugin.

Push a project to GitHub, as one commit. Connect GitHub once in Settings, link a project to a repository, branch and folder from its project page, and Push to GitHub writes the project as a single commit — the diff-friendly project JSON plus one markdown file per decision. Pushes go to a dedicated branch (with an optional pull request), only the linked folder is touched, an unchanged project reports "nothing to push", and if the branch moved on GitHub you choose how to proceed instead of being overwritten. Your GitHub token is never stored by CRAYON-C4. Push only, GitHub only, and switched on per deployment. See Manage projects.

A decision can be renumbered. Renumber… in a decision's edit form previews every place inside the project that will be updated — the supersede chain, decision text, and mentions in element, relationship, diagram and project descriptions — and refuses a number another decision already holds. Accepted decisions have only their number changed.

The C4 wand rolls neighbours up to the highest level. "Wand: this diagram" and "Wand: all diagrams" no longer draw a container beside the system that holds it: a related element rolls up to its own top level, and a finer card whose parent is already on the diagram is replaced by that parent. The one exception is a connection to the diagram's own subject, which keeps the subject's level so the line stays drawable. Re-running the wand self-heals diagrams left over from before. See the wand.

Flow (F4) route proposals only offer sensible steps. When you draw a line the C4 model cannot support but can route, the editor's proposed intermediate steps now go only through peer elements — never an ancestor or descendant of either end, and only elements of the same type — so a proposal no longer climbs up through a parent system and back down. Dragging a line's arrival handle also no longer starts a drag that swaps the line's source and target.

Smaller fixes: the Backstage plugin's documentation now explains Backstage's default Content Security Policy, which blanks the embedded viewer until the plugin's frame is allowed; and the published command-line tool, VS Code extension and MCP server all carry the same 1.46.0 version as the app.

1.45.1

A decision can be renumbered. Choose Renumber… in a decision's edit form, read the warning (references from outside the project can't be fixed for you), type the new number, and review the list of every place inside the project that will be updated — the supersede chain, decision text, and mentions in element, relationship, diagram and project descriptions. A number another decision already holds is refused, and accepted decisions have only their number changed, never their content.

1.45.0

Push a project to GitHub, as one commit. Connect your GitHub account once from Settings, link a project to a repository, a branch and a folder from its project page, and Push to GitHub writes the project into that folder as a single commit with the message you choose. The files are the same diff-friendly project JSON you get from Export project JSON, plus one markdown file per decision, so a push and a download are the same bytes and Git diffs stay readable.

You stay in control of what lands on your main branch. Pushes go to a dedicated branch (crayon/<project> by default), created from the repository's default branch, with an optional pull request. Only the linked folder is ever touched, and pushing an unchanged project reports "nothing to push" instead of making an empty commit.
Nothing is overwritten silently. If the branch changed on GitHub since your last push, the push stops and you choose: push to a new branch, overwrite the folder on that branch, or cancel.
Your GitHub token is never stored by CRAYON-C4. Connecting is optional and separate from how you sign in; the token is held by Auth0 and used only while a push is running. Disconnect in Settings removes the connection and clears the repository links saved in your browser.
Push only, for now. Nothing is pulled back from the repository, and only GitHub is supported. Git sync is switched on per deployment; where it isn't, none of this appears.

1.44.7

The C4 wand rolls a foreign neighbour up to its own top level, not just to the diagram's. "Wand: this diagram" and "Wand: all diagrams" used to cap a related element at the diagram's own subject level — so a Component-level diagram could show a container belonging to an entirely different Software System, instead of that system itself. A neighbour still inside the subject's own system keeps rolling up only to the subject's level, as before; anything genuinely outside it now rolls all the way to its own root — the highest level there is. Re-running either wand also self-heals a diagram left over from before this fix, replacing the stale, too-fine card with the correct one.

1.44.4

Decisions now travel with "Update from code." Architecture decision records join elements, relationships, deployment and F4 flows as a fourth thing the reconcile step tracks: a repository's own adr/*.md folder — the same Git-native format the app already writes on export — is read as the "code" side of a re-run. A decision is always hand-authored, so a re-run never removes one; a locked (accepted/deprecated/superseded) record only ever accepts a legal status move, a new link, or a new category — its content stays untouched either way. The update-from-code file picker now accepts adr/*.md files alongside the model JSON, and the MCP server's write_model/merge_model tools carry the same rule.

A presentation mode for showing a diagram to a room. Turn it on from the hamburger menu (Diagrams › Presentation mode) on any of the six diagram screens, and the header strips down to just the C4/F4/deployment switcher and an exit button — no navigation menu, no back/forward history, no view/edit toggle, no profile menu. Everything else about reading the diagram (drilling in, the tag bar, side panels, the legend) is untouched. It's per-session and off by default, so it never changes what a saved project looks like the next time you open it.

A migration guide for teams leaving Structurizr Cloud, which shuts down 30 September 2026 with no replacement. crayon-c4.com/structurizr walks through getting a workspace.dsl out and importing it — free, on every tier — with an honest table of what does and doesn't round-trip. Alongside it: a dedicated comparison page against Structurizr (and now also IcePanel and draw.io), a list of Structurizr alternatives, and a growing examples gallery of worked C4 models you can open straight into the designer.

Smaller fixes: the MCP docs page described element removal as happening "by name" when the actual tool takes ids — wording corrected to match; a dead /pricing link (in the docs and in the MCP package's own error messages) now points at the real pricing section; "How matching works across runs" is now explained in the Document from code guide, including what the provenance sidecar records and the two cases a re-run treats as delete-plus-add rather than a tracked rename; and every shared page (this app's own, and every blog post) now carries the correct title, description and preview image when posted to LinkedIn, Slack or X, instead of falling back to the generic homepage card.

1.44.0

A release built around Structurizr DSL interop, straighter and easier-to-adjust connection lines, and a round of polish across navigation, export and the C4 editor.

Structurizr DSL — a portable text format for your model.

Export any project as a Structurizr DSL workspace, and import one the same way, through New project → From file or the project's own Export menu.

Element structure, relationships, deployment environments, groups and styles all round-trip.
Behavioural flows and decisions travel too. F4 flows translate onto Structurizr dynamic views (element-level — individual activities, lanes and boundary events stay CRAYON-only, see Behavioural flows (F4)), and a project with any decisions downloads as a .zip bundle alongside the .dsl file.
Paste DSL straight into a project you already have. On a project's own page, Paste Structurizr DSL adds what the text describes — new elements, relationships, diagrams, flows — without starting over, reviewing the change first when there's something to decide.
Downloadable samples on the Structurizr DSL page, and a round of import fixes for real-world files — case-insensitive keywords, comments alongside code, files that !include several others, and an option to bring colours in on import.

See Structurizr DSL for the full reference.

C4 connections route around what's in their way, and you can take over from there.

A connection to an element deep inside a boundary could be drawn straight through a sibling card standing between it and its target. Connections now detour around a card in the way, matching what deployment and Flow (F4) diagrams already do — and once a line is detouring, selecting it offers the same corner and drag handles a manually routed line has, so you can grab one and adjust it by hand.

Each diagram can choose how much detouring it wants under its Avoid other elements setting, beside Lines: never detour, freeze a detour into a hand-routed line the moment you auto-arrange, or keep recomputing live (the default).
A back-edge between two identically-sized, stacked elements no longer collapses to a dead-straight line on a Curved diagram.
A line's drag handle for sliding a straight run no longer sits directly under its label.

JSON export is diff-friendly.

Export project JSON now writes a file built for version control: the same project always serializes to the same bytes, architecture content and layout are kept apart from your own device's view preferences, and positions round to whole pixels — so committing a project alongside your code produces a small, readable diff instead of noise. See Export — JSON model file.

Update from code takes the file's text, and you choose what comes in.

If you add or edit descriptions in the model file — by hand or from an AI enrichment pass — Update from code now brings them in, instead of reporting "No changes" when a description already existed. Where you'd written nothing, the file's text is simply used, and the review says so; a file that says nothing about a field never blanks out what you wrote.

Every newly-added element in the review now carries its own checkbox, so you can leave out one specific new element instead of taking the whole batch or none of it.

See Document from code and Manage projects.

A split description can be copied and pasted, whole or one perspective at a time.

Every perspective tab — including Overview — now carries Copy/Paste icons, plus a "Copy all" / "Paste" pair for the whole description. Pasting onto text that already has content offers a Merge or Replace choice; pasting onto empty text lands it directly.

The menu groups into families, and you can switch projects from the header.

The hamburger menu's dozen links now sit under Diagrams, Learn, Help and Legal — Learn, Help and Legal start collapsed, so opening the menu no longer means scrolling past every docs and legal link to reach anything else. A caret beside the project name in the header opens a quick switcher to another recent project, without a detour through the projects hub.

The C4, Flow and deployment viewers' side panel resizes as wide as your window allows, instead of stopping at a fixed width whatever the size of your screen — and a width you choose on a wide window degrades gracefully rather than resetting on a narrower one.

The export document's element and relationship listings read as cards, each entry's fields flowing naturally instead of forcing every row in a group into one shared, cramped column width.

A local-only project says so. A project you haven't promoted to the cloud lives only in this browser's storage — clearing browser data, or switching browsers or devices, loses it for good. The project detail page now explains this and points you at exporting a backup or promoting to the cloud.

AI-authoring guides published for offline use. The project schema, a paste-ready authoring guide, worked examples, and a matching guide for decisions files are all published at stable URLs any AI tool can fetch on its own — or, for a tool with no internet access, download once and paste in as the prompt itself. See Export — point a local AI tool at these URLs.

Smaller fixes: the C4 wand no longer refuses to populate a subject-less (context/landscape) diagram; re-running the wand after moving an element to a new level no longer leaves a stale, finer copy of it behind on the diagram; selecting a diagram's subject boundary now opens the underlying element for editing, not just viewing; profile pictures with no photo on file now load instead of showing a broken image; and the export options panel no longer reflows the page when a scope note appears.

1.42.0

The largest release so far: tags across all three notations, an MCP server so your AI coding agent can build and maintain the model from inside your repository, undo and redo in every editor, complimentary code generation on every plan, and a published investment for Pro.

Tags, everywhere, with one vocabulary.

Tags used to exist on Flow (F4) boards and nowhere else. They now belong to the project: put them on C4 elements and boundaries, on deployment items, on Flow lanes and steps, and on notes — one set of names shared by all three models, so a tag means the same thing on every diagram.

A tag bar above every diagram, in the editors and the viewers alike. It offers the tags your project actually uses, a Show tags switch, Clear, and an Options dropdown for the settings you choose once rather than press constantly.
Three categories, four answers each. Matching tags, Non-matching tags and No tags can each be left Normal or set to Highlight, Ghost or Hide — independently, so "highlight what is in scope and hide everything untagged" is one combination among many. Untagged elements are their own question now, instead of quietly taking whatever the rest were set to.
Nothing selected means nothing emphasised. Until you pick a tag the diagram is exactly the diagram you always saw, and Clear is the complete way back.
Include children. An element drawn inside a matching container takes the match with it — a step in a matching lane, an item nested in a matching deployment box, a member of a matching boundary. It follows what the diagram draws one thing inside another, not your model's hierarchy.
A line is drawn as the quieter of the two things it joins. Connections carry no tags of their own: hide either end and the line goes with it, ghost either end and it fades. Its label now follows the line rather than staying bright over a faded diagram.
A tag can have a colour, set under Settings → Tags and used for the highlight ring. Leave it and the colour is derived from the tag's own name, so it is the same on every machine and in every model without anyone choosing anything. Tag colours travel when you copy styles between projects.
Show tags draws them on the elements, as small dots along the top edge, evenly spaced however many an element carries.
A deployment box or a Flow lane bound to a C4 element inherits that element's tags — shown as locked chips saying where they came from, because that is the same fact seen from another model rather than a copy to keep up to date in two places.
Filtering is not an edit. Which tags you are looking at is remembered on your device: it never marks the project as changed and never becomes something a teammate has to merge — while still travelling with an export and with a published read-only link, so a diagram you share arrives filtered the way you left it.

Your AI coding agent can build and maintain the model, in any repository.

A new MCP server — see The MCP server. Point Claude Code, Claude Desktop, Cursor, VS Code, Zed or anything else that speaks the Model Context Protocol at @crayon-c4/mcp and it can create the model, understand it, and keep it current as the code changes.

It works in any language. The CLI and the VS Code extension scan Next.js, React, .NET and Java; the MCP server scans those too, and for everything else your agent authors the model through tools that enforce the rules as it goes.
It cannot produce a file the app will not open. Every write is validated against the same rules the app itself loads by, so the agent is told exactly what is wrong instead of handing you a broken model.
It never overwrites what a person wrote. Rescanning fills what is missing and leaves your own descriptions, names and curation alone.
The whole local authoring loop is complimentary, with no account and nothing to install.

Undo and redo, in all three editors.

Press ⌘Z (Ctrl+Z on Windows) to take back the last thing you did, and ⇧⌘Z or Ctrl+Y to put it back. There are buttons for both at the left of every editor's title bar, and they work the same way on C4 diagrams, deployment environments and Flow boards.

A gesture is one step. Dragging an element across the canvas undoes in a single press, not forty — and so does a name you typed, however many keystrokes it took.
Adding an element undoes completely. Creating one puts it in your model, on the diagram, and pins it where the layout placed it. One undo takes all three back together, leaving nothing stranded.
Layout counts too, so an arrangement you did not mean to disturb comes back.
Typing is left alone. ⌘Z with the cursor in a name or description field does what it does in any text box — it undoes your typing, not your diagram.
It is per tab and per project, and it starts fresh when you reload. If something else changes the project while you are working — another tab, a teammate's changes arriving, switching project — the history is cleared rather than risk putting back something that no longer fits.

Generating a model from your code is complimentary, on every plan — at any size.

The crayon-c4 CLI and the VS Code extension always ran on your own machine without an account. What was not complimentary was the last step: bringing the result into a project here. From code (as a new-project source) and Update from code (on an existing project) both needed Pro. They no longer do — the whole path, generation through to merge, is available on every plan including anonymous.

That only works if the result fits, and a model generated from a real repository is routinely hundreds of elements across hundreds of diagrams. So the plan limit no longer governs what you may hold; it governs what you may edit.

Bring in a model of any size, on any plan. Open it, drill through every diagram, arrange it, and export it as images or JSON. None of that counts against anything.
The limit arrives when you go to change something — which is the point at which you are working on a handful of elements anyway, on a screen where you can already see what you have.
Deleting always stays available, so a large generated model can be pruned down to the part you actually care about rather than being a project you can only discard. Undo stays available there too, so pruning is never a one-way street.

Limit	Anonymous	Free	Pro
Elements you can edit	20 (was 10)	50 (was 40)	10,000 (was 2,000)
Diagrams you can add	3 (was 5)	7 (was 20)	No limit

Pro's element limit went up five-fold because the old one was simply too small for a real extracted repository. The two diagram limits went down, and it is worth saying why: that count covers all three notations together — C4 diagrams, deployment environments and Flow boards — and one complete small system already spends five of them. Seven is that, plus room for a second component diagram or a staging environment.

If a project you already have is over one of the new limits, nothing is taken away and nothing breaks: it opens, draws, exports and arranges exactly as before, and you can still delete from it. You just cannot add to it until you upgrade or prune.

Pro has an investment, and you can see it before you commit to anything.

Until now the plan comparison said only "Paid" and the amount first appeared on the payment page. It is now on the pricing table, in Settings → Subscription, and in the account documentation.

Plan	Investment	Billed
Pro, monthly	€15.00 excl. VAT	Every month, in advance
Pro, yearly	€150.00 excl. VAT	Every year — two months complimentary

Pro is charged per account, not per person: collaborators on your projects are included at no extra cost. Pick monthly or yearly in the Subscription panel before you upgrade.

VAT is handled properly at checkout. Your investment is quoted excluding VAT, and VAT is added at the rate of your country rather than assumed. Checkout asks for a billing address — that is what determines the rate — and there is a field for a VAT number: supply a valid one as a business elsewhere in the EU and you are reverse-charged and pay us no VAT. The exact amount is always shown before you confirm. There is also a field for a promotion code.
Terms of Service and a Privacy notice. Two new pages, linked from the footer and the app menu: terms covers plans, billing, renewal, cancellation and the 14-day right of withdrawal for consumers; privacy sets out exactly what personal data we process, who processes it with us, how long we keep it, and how to exercise your rights. The disclaimer now also names the company behind the service, with its registration and VAT numbers.
The introductory complimentary period has ended. Plans are now exactly what the pricing page says.
A cloud project outlives the plan that made it. Losing Pro takes away writing the cloud copy, never the project: it stays listed, readable, downloadable and included in your backups, and Make local copies it down to your device so you can carry on working on it. The cloud copy is untouched by that, and subscribing again makes it editable in place. The pricing page also finally lists four things Pro has had for a while and never mentioned: architecture decisions (ADRs), published read-only links, version history and restore, and copying styles or a diagram between projects.

Reuse a Flow board instead of rebuilding it.

Copy a diagram and paste it into any process — from the row's Copy action in the process tree, or Duplicate diagram in the diagram's own properties for a copy beside the original. Everything inside comes with it: sections, nested lanes, steps, connections, boundary events, groups, notes and the arrangement you gave each collapsed level. The copy is a separate board from the moment it lands, and the original is untouched.
Move a diagram to another process by dragging its row onto that process, or through the new Placement fold in the diagram's properties. A move keeps the diagram itself, so every link pointing at it still resolves.

A collapsed Flow board no longer reserves the room its expanded self needed.

Folding a board to Container or Context removed the content and left the space it used: a lane stayed as tall as the rows it had at Code, and a merged card kept the position of the left-most step it stands for. On a real board that left a section as wide as the fully expanded diagram with a single card in it.

The empty space is closed, horizontally and vertically, as two separate passes, and only where a fold actually happened — a level that consolidated nothing draws exactly what Code draws.
A gap is never squeezed tighter than the diagram needs: the space kept between cards is the corridor the router uses to thread a line between them.
The space between section cards closes too, without disturbing their order or pulling one up underneath a note.
A card you placed by hand is left where you placed it.

Sections and cards stay where you put them. Adding a section used to re-stack every section that had not been positioned yet, so arranging one board moved cards nobody had touched. A new section is now created where it will be drawn, and the ones already there are pinned exactly where they already appear. Back to automatic position is gone from a level's card placement — a card you place stays placed, and undo is the way back from a slip.

Move a C4 element to another level.

You could change an element's parent, but only to a parent of the level it already was — so a Container that should have been a Component was a dead end, and a Person created by mistake could never be nested at all. Now a move names one thing — the new parent — and the level follows from it. See Containers and drill-down.

Every element now has a Move… control, root elements included, offering every element that can hold something — grouped by the level the move lands on (Becomes a Container, Becomes a Component, Becomes Code) plus a Top level row.
Everything underneath comes with it, retyped to fit. Before anything changes you are shown the whole consequence: each element that will change, from what to what, and how many ride along unchanged.
A move that will not fit is refused and explained — C4 stops at Code, so a deep subtree moved too far down would need levels that do not exist. It says so, with the arithmetic, and changes nothing.
Dragging in the tree uses the same rule, so dropping a Container onto a Container is now a legal move one level down rather than a gesture that does nothing.

Auto-arrange reads like the diagram you would have drawn.

Arranging a diagram whose subject is drawn as a boundary produced a single wide row with no sense of flow, because a line that ends on the boundary could not be ranked at all — and on a subject diagram that is most of the lines. A boundary is now laid out as a block, and the inside of each boundary as a diagram of its own. On a real container diagram that turns a 1794 × 446 strip into an 828 × 854 diagram — half the width, with the people above the system and the external system below it, which is how you would have drawn it.

Cards inside a boundary pack beside the flow rather than being exiled to a band underneath it, so a boundary is no longer twice as tall as its contents need.
Choose how far down it reaches. Where a diagram draws a boundary, auto-arrange asks: rearrange everything, or redraw the flow between the boxes and leave each boundary's contents exactly as you arranged them.
Boundaries sit at the ordinary spacing, instead of the doubled gap grouping used to cost.

Set the default colour for boundaries.

The style settings could set a boundary's fill opacity but not its colour, and an untyped boundary fell back to a colour baked into the app — a different one on C4 than on Flow. Settings → Element types now carries a Boundary groups card with a live preview: border, fill and label, plus the opacity slider, and a reset that appears once you have set something. Absent, every canvas draws exactly what it always drew; a boundary that names a display type still follows that type. One consequence worth knowing: an untyped Flow group now draws the same frame a C4 boundary does, which for existing boards is a slightly lighter one.

Your projects are separated — per account, and per browser tab.

Two data-safety changes that need no action from you.

An account holds its own projects. Signing in with a second account used to show the first account's project list, on the same device. Each account now has its own space, and signing out leaves nothing of it reachable. Work you did signed out follows you in the first time you sign in, and is not swallowed on later sign-ins.
A tab holds its own project. Opening a second project in a second tab used to swap the first tab's project underneath it — silently, with the header still naming the old one, so an edit made afterwards was filed into the wrong project. Each tab now holds its own working copy. If two tabs want the same project, the second asks the first to hand it over rather than taking it, and nothing is left behind in a tab you close.

A label that says nothing is not printed.

Two labels earn their place on a canvas and cannot be pressed on paper: the [*] that means "several connections roll up onto this line, press to pick one", and the empty chip that is how you press an unlabelled rolled-up line. Exported documents leave both out, and the legend no longer explains a notation the document does not show. A rolled-up line carrying a real label keeps it, and its mark.

Smaller improvements and fixes.

A rolled-up line can be opened where it is defined. Selecting one now offers a folded Defined on block listing the diagrams that draw it up close, each row landing on the line itself rather than merely on the diagram. A [*] line lists every underlying connection under its own heading.
A link in a description goes where it should. A link to another site opens in a new tab instead of taking the diagram away with it; a link into the app stays in the tab, the way clicking that destination anywhere else in the app always has.
Drawing a line where one already exists no longer replaces it. On a diagram showing a rolled-up connection between two boxes, drawing that pair directly used to take over the line and its label appeared to vanish. The gesture is now refused, naming what the line already stands for, and the same guard covers duplicate connections on a Flow board.
A loop in a flow is not treated as an exception path. Three steps with the last looping back to the second used to draw the whole loop as faded — with no boundary event on the board and nothing being filtered. Only a boundary event ever fades anything now.
The Flow viewer and editor lay a board out identically. The editor's "Add swimlane" rails were part of its layout, so every lane, card and stripe sat lower in the editor than in the viewer — and a hand-routed line drawn in one ran somewhere else in the other.
A display type's Dash setting reaches the drawing. It was stored, documented and drawn in the exported legend, but every canvas drew a solid border. Typed boundaries follow it too; an untyped boundary stays dashed.
The style settings dialog holds still. It no longer resizes as you move between its tabs, and the icon picker on the lower rows is no longer cut off by the list it opens inside — it flips above the row when there is no space below.
A highlighted line's arrowhead is no longer punched through by the marching marker that shows its direction.
The home page loads with the security policy on. A flaw in how the policy was applied blocked the landing page's own scripts, so it never came alive; a test now measures which pages this can happen to rather than relying on a hand-kept list.
Administrative plan limits take effect. The per-deployment limits set in the admin screen now reach the browser that enforces them, and a limit saved with an impossible value is refused with the reason on the row instead of reporting success and doing nothing.

Run it on your own infrastructure.

An Enterprise (self-hosted) edition is available on request — one container image that runs entirely inside your network, against your own Postgres, with no outbound connections at all: fonts, icons and the schema are served by the instance itself. Access is sign-in for everything, and read-only sharing is a viewer invitation rather than a public link. Contact us to talk about it.

1.30.0

Shape an F4 connection by hand.

F4 boards gain the hand routing C4 diagrams and deployment connections already had, through the same gestures — so what you learn on one canvas works on all three.

Drag a line to bend it. A guide dot appears where you pulled; drag the dot to reshape, drag the line elsewhere for another, double-click a dot to remove it. Removing the last one hands the line back to its automatic route. A selected line also offers Back to automatic routing in its properties.
Each line can pick its own shape — By diagram / Curved / Straight in the connection's Line fold. "By diagram" follows the board's own Lines setting, which stays Straight by default: each notation keeps the look it shipped with.
A call's answer follows its question. The dashed return leg is now derived from the request's own shape, so the pair stays parallel and meets the same card edges whether the request is curved, elbowed, or run through corners you placed.
A route survives consolidation. At a folded level (System, Container, Component) a line can stand for several connections at once, so the shape you give it there belongs to that level — the fully expanded Code board keeps its own, and neither disturbs the other.

Right-click an F4 board to add what belongs there.

The C4 editor has been able to add elements from the canvas for a while; the F4 board could not. Adding a section or a swimlane meant going to the diagram's properties pane, and a note landed in a random spot near the board's origin. Now right-clicking the board offers what is applicable where you clicked:

On empty canvas — a new section, a new swimlane, or a swimlane bound to a C4 element. A swimlane always belongs to a section, so when the click named none the menu says which section it will land in rather than choosing one silently.
On a section card — a swimlane at the bottom of that section, a swimlane from a C4 element, or another section.
On a swimlane — New step here, which lands the card exactly where you clicked (nudged aside only if that spot is already taken), plus a swimlane below it or one nested inside it. Right-clicking a lane's header still targets that lane, but offers no step: the header names no spot on the board.
Swimlane from a C4 element opens a searchable picker of your whole model — not just Containers — and pulls the element's C4 parents onto the board with it, so the lanes nest the way your architecture does. The same element can have a lane in two different sections, but not twice in one.

Add a note where you mean it, and see the ones you have. The board's right-click menu carries Add note here, and the note lands at that point. The Notes fold in the diagram's properties now lists every note on the board: click a row to select that note — which opens its own properties and highlights it on the canvas — or use the × to remove it, with a confirm that names the note first. It still adds one too, for when there is no particular spot in mind. A note can sit anywhere on a wide board, so the list is how you find one again.

And an F4 note can point at what it is about. Drag from a step's connection dot onto a note — or use Points at in the note's properties — and a dashed leader line joins them. It works the way it already does on a C4 diagram: the line is part of the diagram only, never a connection in your flow, so it carries no label, takes no part in the sequence, and appears in no listing of your process. A note can point at a step or at a whole swimlane. Remove the step or the lane and the line goes with it; the note always stays, with whatever it says intact.

At a folded level (Container, Component, System) the line follows the fold rather than disappearing: a step merged into a consolidated card takes its line to that card, and a swimlane folded into a coarser one takes its line to the lane now standing for it. So a note pointing at a Component still points at something at Container level — the container it lives in. Your stored notes never change; this is only what that level draws.

Everything here is editing, so it is offered only on the fully expanded Code level: the other levels are folded views of the board, where a card can stand for several steps. The read-only viewer offers no menu at all, and still draws every note.

Right-click a deployment diagram too — and things you add land where you can see them.

The deployment editor could only add through the title bar, which cannot say here. Now right-clicking offers what belongs at the spot you clicked: on the canvas, a new item; on a box, an item inside it; on a nested box, one inside that. It is the same set of targets drag-and-drop already resolves, so the two ways of adding cannot come to disagree about what goes where. The Library of templates sits in the same Add section rather than behind a second door — dropping a template and adding a blank item are the same act with a different starting shape.

Added items no longer land off-screen. An item created without a gesture used to appear at a jittered spot near the canvas origin, so on a diagram you had panned or zoomed it was created out of sight and the button looked broken. It now lands in the part of the diagram you are actually looking at, in the first clear spot — and if the view is genuinely full, in the middle where you can see it and drag it apart.

A deployment note can point at a box, nested ones included: drag from the box onto the note, or use Points at in the note's properties. As on the other editors, the dashed leader line is part of the diagram only — it never becomes a connection and appears in no listing. Worth knowing: moving an anchored box to a different parent drops that line rather than following it, because a nested box has no identity of its own to follow. The note always survives, with whatever it says intact. The Notes style tab is now in the deployment settings too, editing the same project-wide look as the C4 one.

Leave the notes out of an export.

A new Include diagram notes checkbox on What to export → Document, on by default so nothing about your existing exports changes. Unchecked, notes are left out of both halves: no note shapes and no dashed leader lines in the diagram images, and no Notes listings in the written sections. The checkbox appears only when some diagram in the project actually carries a note, and it is stored in export presets like every other setting — so "the version for the client, without our working notes" is one preset away.

Your screen no longer changes on its own.

Switching back to a window used to pull the latest version immediately. Two people editing the same element could then take turns without either being told: each window quietly adopted the other's work on focus, so the resolve dialog never engaged and the last save silently won. The automatic pull is gone — nothing changes the screen except you.

Getting the latest is now always something you ask for: the Remote-newer pill tells you a teammate has saved (it now updates as soon as you return to the window), and Load latest or Save brings it in. Save doubles as sync — pressing it with nothing of your own to push fetches the newest version and tells you when you were already Up to date. Saving still pushes your work automatically at natural moments, and still never overwrites anyone.

Collaboration, written down — and three merge fixes.

A new handbook at Docs → Projects → Collaboration: what merges on its own, what raises a conflict, the three ways out of the resolve dialog and what each one costs, and habits that keep a team out of trouble. Validating it against the real engine turned up two claims on the existing sync page that were simply wrong, now corrected: choosing a side in a conflict takes that side's whole record, not field by field — so two people editing different fields of one element (including different perspective sections of one description) do contest it.

A teammate's line style is no longer lost. Connection line styles, the default line style and the boundary fill opacity had no place in the merge, so a style a colleague added was silently dropped every time anyone merged.
"Normalised connection line styles" has stopped nagging. Any cloud project with a line style reported it on every open, forever, because of how the database stores objects — it could never settle.
No more phantom "Project details" conflict. Every concurrent merge raised one, because saving anything stamps the project's modified time. That stamp now merges quietly; a real change to the project's details still asks.
Version history tells you when it failed to load, with a Retry — it used to claim you had no saved versions.

1.29.14

Notes: put a shape on a diagram to explain it, without adding it to your model.

Asked for as: sometimes you need another shape on a diagram to explain the story — but it must not end up in the C4 element list. Notes are exactly that, and they work the same way on all three editors.

Add one wherever you need it. On a C4 diagram, right-click and choose Add note here — it lands where you clicked. On a deployment diagram, use Add Note in the title bar. On an F4 board, open the diagram's properties (click empty canvas) and use Add note under Notes.
A note is part of the picture, not the model. It never appears in the element tree, the connections manager or any listing of your architecture, it can't be a connection endpoint, and deleting it removes nothing else. Move it, resize it (four widths), give it a label and as much explanation as you like — the whole text is drawn on the shape, because a note is meant to be read on the diagram.
One look for the whole project, set once under Settings → Notes in the C4 editor: text, fill and border. Every note on every diagram follows it, so notes stay instantly recognisable as commentary rather than architecture.
Point a note at what it's about (C4). Drag from an element's connection dot onto the note — or use Points at in the note's properties — and a dashed leader line joins them. The line is part of the diagram only: it never becomes a connection in your model, so it can't roll up to a higher-level diagram or appear among your relationships. Take an element off the diagram and its leader line goes with it; the note stays.
Notes travel with your work. They're included in exported images and in the written export (their own Notes section), they survive copy/paste of a diagram, they're kept when you update a project from code, and two people adding notes to the same diagram both keep theirs.

The delete button on a connection label works again.

Pressing the × on a C4 connection's label only re-selected the connection — the press re-rendered the label out from under the button before the click could land, so the delete confirm never opened. The button now takes the press itself, and deleting a connection from its label works as it reads.

Your profile picture is back.

The security hardening in 1.29.6 blocked images from the identity providers' own servers, so GitHub, Google and Gravatar profile pictures silently fell back to your initials in the account menu and on Settings. Those hosts are now allowed — narrowly, by name, rather than by opening images up in general.

1.29.12

A promoted project stays recognized — and saveable.

Reported as: promote a project to the cloud, invite a teammate as admin, and the browser "didn't recognize the project anymore" — no project name in the header, and Save failing with "No working copy found — reopen the project." Promotion moved the project's identity to the cloud but left the device still pointing at the old local id, so every menu link, save and status check addressed a project the cloud has never heard of. Fixed in both directions:

Promoting now completes the switch on the spot. The open project's identity moves to the cloud with its data, so the header, the menu links and the Save button all address the cloud project immediately — no reopening needed.
Old links heal themselves. A bookmark, an open tab or a history entry still naming the pre-promotion id now lands on the cloud project (the project page included), instead of a screen that can neither name nor save it.
Nothing you typed in that state is lost. Edits made while the browser was confused were kept on the device; opening the project now brings them along as ordinary unsaved changes, and Save pushes them to the cloud.

1.29.11

A curved connection stays a curve when you shape it.

On a C4 diagram whose Lines setting is Curved, touching a line used to turn it into a right-angled one — and worse, one drag could leave a whole staircase of corners nobody placed (the adopted shape mistook a curve's invisible control points for corners). Now:

Dragging a curved line bends the curve through the point you pulled — one drag, one guide dot, and the dot sits exactly on the line. Drag the line elsewhere for another guide, drag a dot to reshape, double-click to remove it; removing the last one returns the line to its automatic curve.
The bar handle no longer appears on a curve. It slides a straight section, and a curve has none.
The line still leaves and meets each card square-on, exactly like the automatic curve, and the viewer, the export and the VS Code webview all draw the shape you made.

Straight lines stop inventing folds and spurs.

Two reported defects with one look: a line that suddenly doubled back on itself, out and back over the same stretch.

Sliding a bar handle moves its section as one piece. It used to be able to slot an invisible bookkeeping corner into the wrong place in the line, which drew as a fold — and read as "both halves of the section moved".
Bending a line no longer leaves a stale corner behind. Pulling a new corner out of a straight run could leave the old elbow beside it standing, forcing the line to detour out to it and back at the far end. The bend now cleans up exactly that corner — a detour you placed on purpose is never touched.

Each connection can pick its own line shape.

The diagram's Lines setting (Curved or Straight) used to be all-or-nothing. A selected connection's Line fold now carries a Shape control — By diagram / Curved / Straight — so one line can run as elbows on a curved diagram, or as a curve on a straight one. "By diagram" hands the line back to the diagram's own setting. Per diagram, like the line's route and sides: the same connection can be shaped differently on each picture that draws it.

Deployment: put the lines leaving a card in the order you want.

When several connections leave the same side of a card they spread out along it — but the order was decided by where the lines were headed, and could not be changed. Now it can, with the drag you asked for: grab a selected line's endpoint and drop it back on the same side, between the two lines you want it to sit among (or above the first, or below the last). The whole side keeps that order from then on, in the editor and the viewer alike. See Connect the infrastructure.

1.29.8

The 1.29.6 security hardening is back on — and the site loads with it.

The content-security-policy shipped in 1.29.6 had a flaw that only appeared on the live platform: on most screens the browser was instructed to reject the page's own scripts, so nothing rendered — reported as "the site doesn't load" — and production was rolled back to the previous release the same morning. This release re-lands the hardening in a form verified end-to-end on the real platform, screen by screen:

App screens now render freshly per visit, so the per-request script check the policy relies on always matches what the page actually carries — instead of a cached copy it could never match.
The public content pages — the documentation, the blog, the disclaimer — stay cached and fast, with a script policy suited to fixed, build-time content.
Descriptions render exactly as before, and the safety guarantee from 1.29.6 still holds — your markdown is sanitized in the browser, and the server now sends none of it at all rather than sanitizing its own copy. The server-side sanitizer introduced in 1.29.6 turned out to crash the deployed platform outright once screens rendered live, which would have replaced "the site doesn't load" with "most screens error"; removing it from the server entirely fixes both at once, without giving up the protection.

1.29.6

A cross-project data leak in diagram saves, closed.

A routine security review of the production deployment found a handful of issues — one serious — all fixed here, and none of them reported by a user.

The serious one: saving a diagram checked that you belonged to the project you thought you were editing, then wrote the change by the diagram's own id alone — so a diagram id from a different project, if it ever leaked, could have been overwritten by someone with no access to that project. Saves are now scoped to the project they belong to, the same way deletes already were.
Stronger security headers on every response — a content-security-policy plus the standard protections against clickjacking and MIME-sniffing.
Descriptions are now sanitized on the server, not only in the browser — closing a gap where the server-rendered version of a page skipped a safety check the browser-rendered one already had.
The per-plan element cap is now enforced on the server as well as in the app, and the actions that send email — invites, sending a shared link — are rate-limited.
A round of dependency updates, including two known vulnerabilities in the sign-in library.

Two small deployment-canvas fixes.

See Connect the infrastructure.

Alignment guides no longer linger after dragging a container into another container. They clear the moment the drop lands, same as every other kind of move.
A node's label pill matches its card's rounded corner again, instead of squaring off where the two used to overlap.

A read-only diagram can no longer be edited with the Delete key.

Selecting a node or a line in the C4, F4, or deployment viewer — or on a published, read-only shared link — and pressing Delete or Backspace visibly removed it from the screen, even though nothing was ever actually saved. The key is now inert wherever the canvas is read-only; the editors are unaffected.

A diagram's subject boundary can no longer be "deleted" by mistake.

Pressing Delete on the frame that marks what a diagram is about used to silently do nothing while still claiming "Group deleted" — confusing, since the frame was still right there. It now refuses the delete and explains why, with the actual way to remove it (clear the diagram's Subject in its Details pane). The frame's chip also now spells out Subject, so it reads as something other than an ordinary group. See Containers and drill-down.

1.29.0

A boundary gives way to its content, and its content can be arranged.

Four complaints about resizing and arranging C4 boundaries, three of which turned out to be one defect. See Containers and drill-down.

Resizing a boundary no longer moves what is inside it. Dragging the top or left edge used to carry every card along with the edge and rewrite their positions — which was also the flicker. The frame you drag is now the frame that lands, and every element and every stored position stays byte-identical.
A boundary shrinks freely while there is slack, and stops at its content. Dragging an edge through the cards pushes it back out to the content's own edge; the three edges you did not drag stay exactly where they were.
Boundaries sit closer together. Grouped diagrams were spread twice as far apart as ungrouped ones; the empty bands are squeezed to the ordinary gap, and no diagram is ever drawn tighter than before.
Arrange inside boundary — on the canvas right-click menu — re-places just that group's members, using the same arrangement the whole diagram uses. Nothing outside the group moves, so the rest of the diagram never shifts under you.
Automatic or manual sizing is a setting you can see. A Sizing fold on the boundary's pane states which one is in force and switches it: resizing sets Manual on its own, moving never changes it, and switching back to Automatic re-hugs the members without moving any of them.
Alignment guides for a boundary now offer the diagram around it, not its own members — which it can never rest on anyway.

A stale tab can no longer overwrite newer work.

Fixes a reported data loss on a shared cloud project: an editor tab left open since before other edits could push its old copy of the model over them — the save carried a valid revision, but stale content, so nothing downstream could tell. See Share & collaborate.

A write from a tab that has fallen behind is refused, the screen catches up to what is actually stored, and a notice says so. An ordinary edit is untouched.
Editors and viewers now pick up changes from other tabs as they happen, instead of only marking themselves out of date.
Three smaller fixes for readers of a published link, none of which touched anyone's data: a reader could briefly be shown their own project instead of the shared one, a reader's device no longer attempts background pushes at all, and a shared project with validation problems no longer throws the reader onto an error page carrying their own project's data.

1.27.1

A shared link keeps you inside the share.

Following a link from a read-only shared link could take a reader out of it — onto a screen the app asks them to sign in for, which for someone who was simply sent a URL looks like the link being broken. See Share & collaborate.

Every link inside a shared project now stays inside it. The reference rows in the panel beside a diagram ("Appears on", "F4 references", "Decisions", "Supported by C4"), a drill-down to another diagram, the element a decision is linked to, and stepping into a sub-diagram on an F4 board — all of them keep the reader on the shared link they were given.
Links written into your own documentation are followed the same way. A description that says "see the container diagram" — whether written as a path or pasted from the address bar — opens that diagram inside the share. Links to anywhere else are left exactly as you wrote them.
Nothing offers a reader a way in. The invitations shown on an empty diagram — opening the editor, taking the tour — are simply not there for someone reading a shared link, since neither is theirs to take.
If you are a member of the project, the header still offers Open / Edit in your account, which is the one deliberate way out.

Moving between the diagrams and the decisions of a shared link.

The header of a shared link now carries a picker for everything in it.

It lists what the project actually holds — the same models the opening page offers, plus the decisions table when there are decisions, plus the opening page itself.
Decisions are reachable from a diagram, and a diagram from the decisions — previously the decisions table was a dead end you could only leave by going back to the start.
A model with nothing in it is not offered, so a shared link never lands anyone on a blank canvas.

1.27.0

The whole story, on one page you can print or post.

A new one-page infographic opens the Getting started section: the route from a blank page to a documented system, drawn with the app's own diagrams rather than described in prose.

It shows the decomposition rather than explaining it — the four C4 levels as four real diagrams, each opening one box from the level above, with the single question that decides where a thing belongs.
And then shows you need not draw any of it: the wand deriving that whole ladder from the flat list of elements you entered — and, because it only ever adds, being how you keep the diagrams current as the model grows.
Then connections, behaviour, runtime, decisions, styling and handover, each as a picture: a relationship rolling up across three levels, an F4 flow crossing its swimlanes, the same definitions placed into dev and prod.
Download PNG gives one image at a fixed width with the brand fonts baked in, ready for a post or a slide — the size of your browser window does not change it.
Print / Save as PDF prints the poster alone, without the site around it, and never splits a section across a page break.

And a second poster: Where to click.

The companion. The first one says what to build; this one says where to click to build it. It stands on its own, so it is the sheet to hand to someone opening the app for the first time.

It opens with the one screen every editor is — header, title bar, model tree, canvas, properties pane — because learning that once covers C4, deployment and F4.
Then a step at a time, each as the pieces of screen it actually touches, with numbered markers tied to notes underneath: the projects hub, the element tree, dragging a connection off a card handle, binding a swimlane to a C4 element, dropping a container onto a host, the Decisions block, the Settings tabs, and the three ways out.
The wand gets all three of its homes: the button on the context diagram's row in the tree, both entries in the canvas right-click menu ("Wand: this diagram" / "Wand: all diagrams"), and the Magic wand button an empty diagram offers.
A gesture list at the foot — the handful of things that are not visible on any screen: drag-to-create, double-click to rename, right-click for the menu, arrow keys to nudge.
Same two buttons: Download PNG and Print / Save as PDF.

A selected boundary says what it holds.

In the C4 viewer a boundary could be clicked and highlighted, but the panel beside it never moved — so a boundary's name, its prose, the diagram it links to and the elements inside it were readable in the editor and nowhere else. A boundary is an element of the diagram like any other, and now reads like one.

Selecting a boundary opens it in the panel, in both the web viewer and the one embedded in VS Code.
Members are listed and clickable — a folded list of what is inside, each row selecting that element.
A boundary the diagram derives from its subject is described by its subject, and the panel says whose prose it is showing. Most diagrams' boundary is derived rather than drawn by hand, so this is the common case rather than the exception. See Containers and drill-down.
Nothing about editing changed: moving, resizing and renaming a boundary are still the editor's, and the viewer offers none of them.

Adding an element from the canvas, offering only what belongs there.

Right-clicking the C4 editor's canvas now offers Add, listing every element that may be created at the spot you clicked. The list was already in the app — dropping a connection on empty canvas has always offered exactly it — but the only way to reach it was to draw a connection first, which is the wrong reason to create an element.

What is offered depends on where you click. On the diagram: the top-level element types. Inside a boundary: the kind of thing that belongs in the element the diagram is about. In a group: a sibling of what is already there. On a card: inside this element, which creates the child and lands you on that element's own diagram.
Nothing is offered where nothing may go — right-click a Person, and there is no Add.
It replaces the two "Add child element" entries, which said the same thing twice and said nothing at all on the diagram itself. The + buttons on cards and group headers are unchanged, as is Add existing child — putting an element that already exists on a diagram is a different question.
The element you create is placed where you clicked. See Containers and drill-down.

1.25.1

A published link shows the current project again.

A shared read-only link could serve the project as it stood when that link was first opened — a save made afterwards never appeared, however often the reader came back or reloaded. See Share & collaborate.

A link serves the latest save, always. The cause sat underneath the feature rather than in it: the app's database reads were being answered from a cache, so a query whose wording never changes kept returning its first result. Every read now goes to the database itself. The same fault also froze the check that tells an open tab something has changed, which is why last release's fix appeared not to work.
A page that reloads and comes back unchanged stops reloading. A reader whose tab kept blinking on every glance, and still showed the old picture, now simply keeps what they have — and picks up the change for real as soon as there is one.
Nothing that was saved was at risk. Saving has always been a compare-and-swap against the copy in the cloud, your edits are kept on your own device until you save, and every save carries a unique payload — so a save could not be swallowed, and could not land on top of newer work. What went wrong was reading, not writing.

A link that no longer works offers somewhere to go.

The page shown for a withdrawn or expired link said only "Already use CRAYON-C4? Sign in" — which, by its first word, is addressed to people who already have an account.

Someone who has never seen CRAYON-C4 is invited to look, with a short line about what it is and a way through to the product and its documentation.
Someone who is on the project can sign in from that page directly, instead of being sent to the front page to find the button.
It still names no reason for the link being unavailable, and still says nothing about the project behind it.

1.25.0

A published link stays current, and offers a reader nothing that writes.

Two things a shared read-only link got wrong. See Share & collaborate.

A tab left open re-checks the project when you come back to it. Opening a link has always shown the latest save; a tab you left open and returned to hours later was still showing the version that was current when you arrived. It now looks again whenever you come back to it — switching to the tab, refocusing the window, or stepping back to it — and reloads only when there is genuinely something new. It never swaps a diagram out from under you while you are reading it.
A revoked link goes dark on the reader's next visit to the tab, instead of carrying on as though it were still shared.
A reader is never offered a way to change anything. The decisions screen was still showing Import, Export and the save controls to someone holding a published link — none of which is theirs to use.

Reading a decision from anywhere in the model.

"Include parents" beside "Include children" in the Decisions table's element filter. Filter by a component and you also see the decisions taken about the container and the system it lives in — they govern it just as much as its own. Tick both and you get the element's whole line, up and down. See Architecture decisions.

A table says how each column is set.

The table builder in every description field. See Working in the editors.

Alignment is four buttons per column — Default, Left, Centre, Right — with the one in force marked, instead of a single button you had to cycle through to find out where you were. Alignment always worked; there was simply no way to see it.
Width is Fill or a plain share from 1 to 20, instead of a raw count of dashes. Columns divide the width in the ratio of their shares, so a 15-to-1 split is now reachable — and a very wide column no longer drags the whole table wide in the source.

An export narrowed to one perspective really is narrowed.

Picking Security alone was meant to give you a security document. See Export diagrams.

Prose that was never split into perspectives counts as the Overview, and used to be printed whatever you picked — so "only Physical" still carried the general description of nearly everything. Overview is now listed in the picker like any other perspective, so it can be dropped.
A section keeps its own explanation when its perspectives are narrowed away, rather than losing the paragraph that says what the section is.
Optionally leave out what has nothing to say. Items with none drops an element from its listing when the perspectives you picked left it with no description, while the section keeps its heading and its diagram.

Fixes.

The project name is shown on the projects hub and on a project's own page, where the header used to fall back to the literal word "Project". A project switch can also no longer leave the previous project's name on screen for a moment.

1.23.0

Publish a project as a read-only link.

A cloud project can be handed to anyone as a link — no account, no subscription, nothing they can change — and you can take it back whenever you like. See Share & collaborate.

Anyone with the link can read the project: the cover, the C4 diagrams, the deployment environments, the flows and the decisions. They are the real viewers, not a stripped-down copy, so a published link shows exactly what you see. Nothing on those screens offers to change anything.
Revoking is immediate and final. There is no "disabled" state to be re-enabled: revoking deletes the key, so the link stops working for everyone still holding it. Deleting the project takes every link with it.
Several links per project, each labelled and separately revocable — so a link sent to a supplier can be cut without cutting the one sent to your board. The label is a note to yourself about who it was for.
An optional expiry date, or "until I revoke it". An expired link stays on your list, badged, so when a reader says the link is dead you can still see which one they mean.
Send it by email straight from the panel, to several addresses at once. Nothing about who you sent it to is recorded anywhere — revoking the key, not un-sending, is what withdraws access.
A link that has been revoked, has expired, or never existed all say the same thing: one page that names no reason, so a stranger cannot use it to work out which keys are real.
If you are already on the project, you are shown the way in. Opening a link to a project you own or are a member of offers Edit in your account — landing on the same diagram you were reading, in the mode your role allows.

Walk the flow in the connections manager.

Focusing an element in the From column already answered "what does this lead to", and focusing one in To answered "what leads into this" — but the only way to ask the other question was to hunt the same element down in the other column. See Relationships.

Every row carries an arrow on the outer edge of its column: » on a To row carries on from that element, « on a From row asks what feeds it. One click per hop, in either direction.
You see the row move. Stepping re-flows the whole board, so the row you stepped flies from where it was to where it landed rather than the board simply rearranging itself. It is skipped entirely if your system asks for reduced motion.
A walk only changes what you are looking at — it never touches the model.

Fixes.

The PDF prints the cover and the contents. The export document showed the project name, its description and a table of contents on screen, and the printed PDF started at the first diagram with all of it missing. The PDF now leads with a cover page and a contents page.
The tour offer no longer prints over the first diagram. The floating "Welcome to CRAYON-C4" card was captured into printed output; it is now excluded from prints and diagram images alike.
Create tells you what is missing. Pressing Create on a new project with no name did nothing at all and said nothing. It now names what is missing — an empty name is reported next to the field, and a file or code source with nothing chosen reopens the picker.
The export preset list no longer offers an entry that does nothing. "Unsaved settings" could be picked while a preset was selected, and picking it had no effect. It now appears only when no preset is selected, as a label rather than a choice.

1.21.0

One description, several perspectives.

A description can now hold more than one point of view — the runtime picture, the security picture, the logical one — kept apart instead of run together in a single block of prose. See Perspectives.

Split a description into perspectives on C4 elements and diagrams, on deployment items and instances, on Flow (F4) processes, diagrams, swimlanes, activities and boundary events — and on connections in all three models, which benefit most: a line between two boxes is exactly where the protocol, the retries, and the question of who may call it live, and none of that is what the label says.
Kruchten's 4+1 is offered as a starting set — Logical, Process, Development, Physical, plus the scenarios that tie them together — and a new perspective is created with its outline already written in. You are free to name your own.
Each perspective is managed on its own tab: double-click to rename it in place, drag to reorder, × to remove. Removing one keeps its text, in the overview. Prefer everything on one page? Switch to the stacked layout; the choice is remembered on your device.
A reader sees tabs; every other tool sees prose. The split is stored as a comment inside the description itself, so the same text still reads as one continuous piece in GitHub, VS Code, Obsidian or anything else that renders markdown — and a description nobody has split is stored exactly as it always was.
An export can pick the reader. Choose Security alone and the document is a security document; Overview + Logical and it is a functional one — all from the one model, with no second copy to keep current. The picker lists the perspectives your project actually uses, and the choice is saved in an export preset like every other setting. See Export diagrams.

Selecting a C4 element marks what it talks to.

Selecting something answered which one am I looking at; nothing answered the question that always follows. See Relationships.

Everything one hop away is marked the moment you select an element — connected cards take a soft glow, their lines and labels are marked too, and rolled-up lines count exactly as much as the ones drawn directly.
The selection and its neighbours can always be told apart, whatever colours your element types use: what you picked wears a crisp ring, what it talks to wears a glow no element colour can imitate.
A marked line says which way it runs, as dashes travelling from source to target. They are dropped entirely if your system asks for reduced motion.
Highlight connections is a switch in the C4 viewer's and the editor's title bars. It is on to begin with, shared between the two screens, and remembered for the session — it is a way of reading a diagram, so it is never written into your project.

The connections manager can show only what the focus is connected to.

Expand all helps, and on a real model it also produces a very long list. See Relationships.

Connected only hides every element that has nothing to do with the one you focused — in both columns at once — instead of merely fading it. Focus a connection and it does the same for that line's own two ends.
Nothing focused shows everything, because there is no answer to "connected to what" yet. The switch is a narrowing of the focus, not a mode of its own, so you can set it before you pick.
Clicking the focused element clears it, and searching for something else releases it too — a chip naming a row that is no longer on the board was the confusing part. Clearing the search keeps your focus.
The row you clicked stays on screen. Focusing re-flows the board, and on a board you had panned the very row that caused the change could land out of sight. It is brought into view without ever zooming or re-framing.

A decision opens to be read.

Clicking a decision on the Decisions page used to open the editor — a screen of inputs, with the prose in text boxes. A record is read far more often than it is changed, so it now opens as a readable card, with Edit in its header when you do want to change it. Creating a record still starts in edit, and walking a supersede chain lands in reading. See Architecture decisions.
One card everywhere. The viewers, the editors' panes and the Decisions page all show the same floating card now, with one remembered position and size, and no backdrop — the table, the canvas and the panes underneath stay live while you read.

Fixes.

A toolbar that had collapsed could never expand again. When a window was narrowed, buttons moved into the ⋯ menu correctly — and then stayed there for the rest of the session however wide the window was made. Affects all six diagram screens and the top header.
Pointing at a selected connection label no longer greys it, which used to happen exactly as you were about to click it.
Enter and Space work at the start and end of a perspective, where the field used to swallow the new line.
Opening a C4 element's drill-down from the Flow editor now lands in the editor, as it does from every other screen, rather than dropping you into the read-only viewer.

1.18.0

Your export settings are kept, and can be named.

The export panel asks a dozen questions and used to forget every answer the moment you left, so even "the same export as yesterday" was picked again in full. See Export diagrams.

The settings you last used are restored, whether or not you ever named them — the common case is a tweak, an export, and coming back tomorrow.
Save a set of settings under a name. Pick one from the bar at the top of the panel to switch to it; Update writes your current settings back to it, Save as makes a new one. Saving under a name that already exists never quietly replaces the wrong one: the confirm names the preset it will overwrite. Deleting a preset leaves the settings on screen exactly as they are — you may be about to export with them.
A preset owns how the output looks, too. Editing the background or the table colours after saving one, then switching back, now restores what was stored rather than what you last had on screen. The separate "export theme" is gone: the appearance is edited like every other export setting, and the per-diagram download menu and the export document share one appearance between them.
A setting that disappears says why. Narrowing the scope to a details-only export removes the image-background controls, which is right — there is no image to back. It now says so, with a button back to the control that caused it, instead of leaving a gap you had to remember the reason for.
Choosing which diagrams to include means "everything" or "these ones". Leave every section ticked and it means everything, so a diagram you add tomorrow is in the next export too. Untick one and the selection becomes deliberate, so nothing added later joins it uninvited — the panel says which of the two you are in, and Select all is the way back.
Presets are kept outside the shared document, so saving or picking one never dirties the project or becomes a change a teammate has to resolve. They still travel through export, import and backup, and can be copied from one project to another.

Decisions your code already made, recovered from the code.

Extract Decisions with AI is a new command in the VS Code extension: it reads the repository and fills the Decisions (ADR) records with the why no diagram can show. It transcribes what your repo has already written down — docs/adr, RFCs, design notes — before inferring anything, keeping their wording, dates and numbering. Anything reconstructed from the code alone is recorded as proposed and says in its own context that nobody confirmed it, so the two can always be told apart. It continues an existing set of records rather than renumbering them, and dates are never invented. See Architecture decisions.
A re-run keeps everything the extractor does not author. Update-from-code used to drop your decision records, your per-level deployment and flow arrangements, and the project history. All of them now survive a full re-generate untouched.

The code integration obeys your settings file, and stops asking. See Document from code and the VS Code extension.

One Generate command. Generate Model and Regenerate were two commands for one action with different manners, and both asked questions .crayon/config.json had already answered. There is one now, and a repository that carries a config is not asked again — which folders are analysed and how deep are settings, so the editor, the CLI, CI and your teammates cannot disagree about them. Model depth moved into the settings menu, and the result names the depth it used and where that came from.
Setting a project up no longer looks like it has hung. On a 255-project solution, Set Up Project Settings ran for over forty minutes without finishing and could not be cancelled. It now takes seconds, animates while it works, and Cancel really stops it. A full model at the deepest setting went the same way: over ten minutes of processing, now thirty seconds.
Say what the model is about by keeping, not by excluding. Naming every project you did not want meant 255 checkboxes. Folders are now offered as first-class choices with their project counts, and the list can be an allow-list — keep these — instead of an exclusion list.
A repository can declare the software systems it holds, and an area can be a container whose projects are its components: 147 packages became 11 containers on the reported solution, with every project still visible one level down.
Elements link back to the source. Where an element really comes from a file, it carries a link to that file in your repository's own web interface. It is derived from the remote, the branch and the path, so it is never a plausible-looking link to a file that does not exist.
Generate with AI builds the C4 and deployment model from the repository directly, grounding the deployment in your Dockerfiles, compose files, Kubernetes manifests and CI rather than inventing one. Your .crayon/config.json is part of its brief and wins over its own judgement.
Two commands that a bad edit had silently removed from the palette are back, and the command names now read as one set: Generate Model / Generate Model with AI, Edit Project Settings / Improve Project Settings with AI, Enrich Descriptions with AI.

Shared projects: roles are enforced, and the viewer and the editor agree. See Share & collaborate.

A member demoted to viewer no longer keeps the editors. Their saves were always refused by the server, so nothing they did ever reached the cloud — but the editing screens stayed open, which is a promise the product could not keep. All three editors are now closed to a viewer at the door, the role is re-read as the project is opened, and signing out clears it. Opening a project while offline no longer assumes you own it.
Three server-side holes closed while tracing that. A viewer could write a project's diagram list; a legacy endpoint let any signed-in user read, overwrite or delete rows that carried no owner at all (it is deleted); and a pending "editor" invitation could durably re-promote a member you had just demoted. An invitation is now a way to join, and never changes an existing member's role.
"Remote changed" no longer appears when you have changed nothing. Merely opening a shared project made it look edited — device-local things like pane widths and the collapsed toolbar were being counted as document content, so looking at a project pushed a change to everyone else. They no longer count.
The viewer, the editor and the export show the same thing. The viewers were reading the cloud copy while the editors read your checkout, so unsaved work was visible in one and missing in the other, and the export document rendered the remote rather than what was on screen. All of them now read the same copy.
A complete role-by-action matrix is now pinned by tests, so widening what a role may do is a deliberate edit rather than a side effect.

1.14.0

Every viewer can show a legend, listing only what that diagram actually draws.

A Legend button in the C4, Flow (F4) and deployment viewers. It opens a panel over the bottom-left of the canvas — the diagram is never re-laid-out to make room — explaining the element types, boundaries, line styles and markers that are on screen.
Only what this diagram uses. The key changes as you move between diagrams: a context diagram lists Person, External System and Software System; the container diagram below it swaps Software System for Container and gains Boundary; a component diagram that has nothing rolling up onto it drops that entry entirely.
It follows what you have switched on. Turn off C4's implicit-line marker and the rolled-up entry goes with it — with the mark off there is nothing to explain. The deployment key lists inferred connections only when they are both shown and marked, and a Flow board gains Consolidated step only at a level where steps actually fold. Hidden means hidden.
Every swatch is drawn by the same style engines the canvas draws with, so the key can never disagree with the picture — or with the legend in the exported document.

The description editor pops out, and speaks the whole markdown vocabulary.

Every description field — in all three editors' property panes, on a decision record, in the new-project modal and the deployment template dialog — now has room to work in.

Pop it out. A button opens the same editor as a large dialog, in split view with the preview beside the text and an outline of your headings down the side. Click a heading to jump to it. It writes through to the same field, so nothing is copied and nothing can be lost by closing it; Esc closes.
Heading levels, three ways. A level picker (¶, H1–H6), promote and demote buttons, and Cmd/Ctrl + 0–6. The caret takes its own line — including a blank one, where asking for H2 means "start a heading here" — while a selection takes every line it touches. Code fences and table rows are never rewritten.
A full formatting toolbar in the pop-out: bold, italic, code, strikethrough, quote, bulleted / numbered / task lists, links, images, code fences and dividers. Buttons light up when the cursor is already inside that formatting. Numbered lists renumber themselves, the three list kinds swap between one another, and Cmd/Ctrl + B / I / K work in the pane as well.
Editing the table you selected. Dragging a selection loosely around a table — starting on the blank line above it, or ending below — used to offer a new table instead of editing the one you meant. It now finds the table any touched line belongs to, and replaces exactly that table. The button says which it will do: Table or Edit table.
Tables are full width, and their columns are sizeable. The table builder gains a width row; leave a column blank to size it to its content. A header no longer breaks into stacked single letters to fit a narrow column — a column is never squeezed below its longest word, and a table too wide for the space scrolls in its own box instead of stretching the pane. The same widths carry into the exported document and print without being clipped.
The cursor stays where you put it. Changing a heading level used to send the caret to the end of the text, so the next change landed on the wrong line.

Deployment lines can actually be drawn straight.

Aligning two deployment boxes did not straighten the line between them: a line leaves the middle of a side, and deployment cards differ in height, so two cards with aligned tops had their anchors up to 124px apart.

The points a line touches now sit on a 5px lattice — not the cards. A top or bottom anchor keeps its exact position on the border and steps its across-axis; left and right are the reverse; a waypoint steps in both. Straightness no longer depends on a card's size or position, and any residual gap is a whole number of steps — one nudge away.
Alignment guides snap to the connection points themselves, not only to box edges, so aligning two cards that fan several connections lines up the lines rather than just the boxes.
Nested items align too. Guides used to be offered only for top-level boxes, which is not where most of a real deployment diagram lives.
The drop lands where the preview showed it, including the arrow-key nudge, which moves one lattice step at a time.

Code integration: a generated model that looks like the one you would draw.

A folder is a component in every language. Plain Express, Fastify, Go and Python services used to come out as a single empty box with a blank component diagram — everything below the container was withheld as a guess. A folder of source files is a fact on disk, so those projects now decompose like the Next.js and React ones, using the same rules and the same components.granularity setting. On a real repository: 16 → 23 elements and 7 → 16 relationships.
A capped diagram keeps its lines. --depth container on a real four-app repository produced six boxes and zero relationships: the cap pruned deep elements and dropped every line touching one. Lines are now re-anchored to the nearest surviving element instead, and dropped only when they say nothing at that level. Labels survive when every contributing line agrees on one.
One deployable is one box. An app with a single container was modelled as a box inside an identically-named box, pushing its real internals a level below anything but the deepest setting. The pair is now folded into one, and the components underneath keep their level.
Docker Compose names what a dependency can only categorise. A login library can be classified as "Auth" and no further — but image: quay.io/keycloak/keycloak:26.3 in your compose file says which. Images are read through the same table as declared dependencies, so the specific name refines that element in place: one identity provider called Keycloak 26.3, not two boxes, with every line it already had intact.
A re-run keeps your styling. Update-from-code used to rebuild the diagram list wholesale: a diagram switched to straight lines went back to curved, hand-authored diagrams were deleted, and recoloured element types, line styles and rolled-up labels were reverted. All of that now rides through untouched, and a repository can declare its own default line style in .crayon/config.json — applied only to diagrams the extractor creates, so your own choice always wins.

Flow (F4) groups are managed where everything else about a diagram is.

Every group on the board, in one list. Click empty canvas so nothing is selected and the details pane now carries a Groups section: add one, and open any row to rename it, restyle it, set its fill or change its members. Each row states what it holds — 3 members · backend — while it is shut. Deleting is the × on the row; the lanes and steps inside stay exactly where they were. The Group button has left the title bar: creating a group now sits beside changing and removing one instead of in a different place from both.
A group is selected by clicking anywhere inside it. Press any empty space in the frame and you get the group — it used to select the swimlane underneath, so its label was the only way in. Double-clicking that space opens its name for editing. The steps inside still take their own clicks, dragging is still the label (so a group never moves by accident), and the frame has more breathing room around its contents.
A group says it can be moved, and says when it is selected. Its label carries a grip, and selecting it draws a brand-coloured border and a ring — which a group styled by a display type could not show at all before, however it was selected.
A display type styles a group the way it styles a C4 boundary, icon included. Pick a name once in Type & style settings and it reads the same on every diagram of every kind. A name your project no longer defines is now called out in the form instead of quietly drawing the plain fallback. Leave the fill alone and a group follows the project-wide boundary fill you set for C4.
A swimlane that isn't linked to C4 shows its display type's icon too, beside the name, exactly as a linked lane shows its element's.
Tags reach groups. An off-tag group is dimmed in Ghost mode and removed in Hide mode, like anything else on the board — and in Hide mode its frame shrinks to hug only the steps still on screen, so it never draws a box around nothing.

A level is a view of your flow, and it now says so — and carries its own names.

The editor tells you when you are not on Code. Leave it and a banner appears above the board: "Container is a view of your flow, not the flow itself" — here you change how that level is laid out; to add, delete, re-point or rename anything in the model you go to Code. It carries an Edit in Code button that takes you there. The viewer never shows it: there is nothing to edit there.
Name a folded card or a rolled-up line at either scope. Selecting one at Context, Container or Component now offers its name twice: Everywhere (the model's own text, changed on every level) and <Level> only (stored for that level alone, marked with a dot). A ↺ beside the level field drops the deviation and goes back to the model's text. Calls get the same pair for their return label.
Where a label sits is remembered per level too. The same line runs between different cards at a coarse level — often between cards the fold made — so the spot that reads well there is not the spot that reads well at Code. Drag it at either and each keeps its own.

Smaller flow fixes.

A node you drag lands where the preview showed it. Dragging a step used to draw its lines to the raw pointer position while the drop snapped the card into line — so the connections sat at a slight angle all through the drag and straightened when you let go. The card now moves to the position it will actually land on, so the lines you see while dragging are the lines you get.
Changing a connection between Flow and Call no longer moves where it attaches. An end you pinned stays pinned, and an end on Auto stays on Auto — free to re-read the layout if that reads better, which is the only time it should move at all.
A call's answer label no longer sits on top of its request's. The two pills overlapped, and the answer's was landing on the request's line rather than its own — so it labelled the wrong arrow. The answer now hangs off the request's label: slightly right, straight underneath, the same everywhere. The pair reads as what it is, one connection said twice.
Typing a name in a flow's details pane no longer stutters. Every text field there — a section, a diagram, a process, a lane, a step, a group, a connection, an event — used to save the whole project on each character, which re-laid out the canvas as you typed. They now save on a pause, when you leave the field, and when you select something else, so nothing is ever lost and the board updates a handful of times per edit instead of once per letter.
The label hover no longer offers a key that did nothing. Dragging a connection's label moves it in 1% steps, which is already as fine as a whole percent gets — so the "hold Alt to place it freely" hint is gone. Alt still does what it always did on waypoints, where the snapping it overrides is tens of pixels wide.

1.10.6

Flow (F4) lines take the shortest route, and Code is where you edit.

A connection's ends now attach to the faces that are actually nearest. Auto used to mean a fixed side per kind — a call left the bottom, a hand-off left the right, everything arrived on the left — so a step placed above its predecessor was reached by a line that went out to the right and looped all the way back. Auto now takes the shortest route on both ends, and it re-thinks itself when you move a step. Pinning a side by hand still wins, and Auto hands it back.
Drag a line's end onto the side you want. Dropping it on another card re-points the connection and attaches it where you dropped; dropping it back on its own card moves it to that card's other side, which used to do nothing at all.
Lines between steps you have aligned draw straight. The arrival slides along its side to meet its own departure, so a step that fans several connections — and is taller because of it — no longer leaves its neighbours joined by a slight slant or a small bump. A line still steps when its two cards genuinely are not level, which is the diagram telling you so.
Code is the level you edit; Context, Container and Component are views of it. The separate Edit button is gone — the board selector is the only control, and Code carries a pencil. The coarser levels stay read-only about the model but can still be arranged: drag a card there and it moves on that level alone, each level remembering its own layout.
Switching level no longer changes how the lines look. A level that folds nothing now draws exactly the board you left, with every line's sides, style and label position intact.
The outgoing order shows on every level and in the viewer. The little 1, 2, 3 beside a step's departures used to appear only while editing; it says which of these things the step does first, which a reader needs more than an author does.

New guide: Flow tips & tricks collects all of it, plus the keyboard nudge, drag-to-create, the C4 validation pass and the reading aids.

Shaping a connection is now documented end to end. A new guide — Shape a connection by hand — walks through every way to take a line off the automatic router and every way to hand it back, with pictures of each: pinning which side each end attaches to, bending a line, the difference between a corner dot and a section bar, removing a corner, what Alt does while you drag, the ↺ realign chip, the per-line and whole-diagram routes back to automatic, and moving a label along its line. The same gestures are covered for the deployment canvas.

One dashed line, one way to say it. The per-connection Dashed line checkbox on F4 connections is gone: a dashed line is now a line style (name one Async or Optional once, with its colour, width and dash, and use it on any connection in any of the three models). The two dashes that mean something — a boundary-event exit path and a call's return arrow — are drawn for you as before and were never style choices. Projects made before this change open normally; the old flag is dropped on load, and any other line that carried it now draws solid until you give it a dashed style.

Hand-routing rebuilt: the line you shape is the line you keep.

Routing a connection by hand — on the C4 and deployment canvases alike — is now built on one simple idea: the corners you see are the route. Nothing recalculates behind your back when you let go.

What you see while dragging is exactly what you get on release. No side flips, no reshuffled elbows, no handle changing shape under your hand — the committed line is pixel-identical to the last preview frame.
Lines attach at the four fixed points — the middle of each side — and bend at a pivot just outside the node. The line always exits straight for a short stub and can turn immediately there, so a section slid past the anchor bends cleanly at the pivot instead of folding back over itself. The moment you route a line, the sides it uses are set and stay put; Back to automatic (the pane button, or removing the last point) clears the route and those sides in one step.
A dot on every corner, a bar on every straight section. Drag a dot anywhere — its neighbours follow just enough to keep the line square. Hover any straight section and its bar appears; drag the bar and the whole section slides across, both ends together, with the legs re-deriving to meet it. That includes sections with no corner of their own, and automatic lines too — sliding a section of an auto line is the ordinary way it becomes yours.
Drag the line anywhere else to make a new corner — the bend grows out of the point you grabbed, in one motion.
Double-click a dot to remove it — and it always visibly responds. Where the geometry still needs a turn there, the bend flips to the other side instead of silently coming back.
Three points in a row lose the middle one — every time, including points that line up with the short legs at the ends. A route never carries invisible baggage that pops back up when you move a card.
The line keeps a clear gap from its own boxes. A drag can't put a corner on or inside the cards it connects; near other boxes it resists, and Alt pushes through.
The line follows a node drag live, corner list untouched — only the short legs into the node re-derive.
Routes you made before this change still draw through your waypoints. Nothing is rewritten on load; the first time you touch such a line it quietly adopts the new form.

A connection shows you the line you are about to get — in all three editors.

Drag a connection's start or end and the line in flight takes the course it will actually take. It was a curve stretched to the pointer, on canvases that draw right angles, route around the boxes in the way, and follow corners you placed by hand — so the shape only appeared once you had already let go. It now turns where it will turn, goes around what it will go around, and carries an arrowhead so you can see which end you are holding even while you drag the other one.
Drop onto a box's left, top, right or bottom edge and the preview snaps to that side the moment you are over it, so you are choosing the approach, not discovering it.
A hand-routed line keeps its corridor on screen while you move an endpoint, with a dot on each corner it will still run through — and drops them the moment the end is headed somewhere that would discard the route, so it never promises a shape you will not get.
Double-click a connection's label to edit it — exactly as double-clicking an element does: the details pane opens on that connection with the cursor in its Label field and the text selected, so typing replaces it. A single click on a label selects the connection, the same as clicking the line. Same in all three editors. Re-centring a label, which used to be the double-click, is now a Centre button beside the Label position slider — it appears once the label has been moved off centre.
The diagram stays where you put it. Selecting a connection used to re-frame the canvas on its two endpoints, and adding an element used to zoom to it — both moved the diagram out from under you in the middle of an edit. Now only you move the view: the mouse wheel, the zoom and fit buttons, and a double-click on empty canvas. Opening a different diagram still frames it, which is its first sight rather than a zoom applied to what you were reading.
A label is no longer buried by its own line. Selecting a connection lifted its line — and the wide invisible band you grab it by — over the label it carries, so the label stopped responding to the mouse entirely on the deployment canvas. Labels now sit above every line on every canvas.
Dragging a point on a line now redraws the line. Adding a bend, or moving one, moved a small handle while the line itself stayed where it was and jumped into place on release — so you were choosing the course blind. The stroke, the arrowhead and the label all follow the pointer now, and the alignment guides still show what it is squaring up with.

Arrange and name a Flow (F4) level.

A flow board read at Context, Container or Component folds steps into merged cards — and until now it placed and named every one of them for you, with no way to say otherwise. Both are things that are true only at that level, so both are now yours to set there, and the fully expanded Code board is untouched by either.

Name a merged card, and name a rolled-up line. A card standing for three folded steps called itself Merged (3), which says how many steps folded rather than what happens; a line that several connections roll up onto had no one connection to take a label from. Give either one a name and it shows at that level only — the steps and connections keep their own names back at Code. Clearing the field hands it back to the automatic one.
Put a merged card where it reads best, and the lane grows to fit if you drop it past the edge. Back to automatic position returns that one card to where the fold would put it.
Every level keeps its own arrangement, and the viewer and the document export both draw the level as you arranged it — without offering to move it.

Flow (F4) cards fit their names, and a call's answer is visible.

A step's card is sized from the name it carries. order summary drew as order summa…: the width was estimated from a character count, which is wrong by whatever the letters happen to be. Cards are now measured against the real font — a short name keeps the same small card, and only the ones that were cutting off grow.
A synchronous call's dashed answer no longer hides under the request. The two lines were routed separately, and two routes between nearly the same pair of points share a corridor — so most of the answer ran underneath the line it answers, and only the stub beside the arrowhead ever showed. The answer now follows the request exactly, a constant gap to one side, whichever way the call runs and however the line is shaped.
Say which side each end of a connection uses. A Sides pair — top, right, bottom, left or Auto — sits under the connection's kind, for the end it leaves from and the end it arrives at.
Changing a connection's kind no longer moves it. Switching between a hand-off and a call used to jump the line to the other edge of the card, because the default side follows the kind. The line now stays where it is; Auto hands it back.
The app header names the screen once — the diagram type was written twice, side by side.

Deployment diagrams zoom between abstraction levels.

Four levels, and they are all the same kind of thing — every one is renameable for that diagram (double-click its button), can be defined from what is on screen, and appears in every picker. "Minimal" and "Full" are just the default names of the first and last. One rule governs all of them: a level closes every box marked at it or deeper, showing nothing inside, however many nesting depths that hides. Mark every outer box at level 1 and it reads as the whole environment at a glance; mark nothing at level 4 and it draws everything open, which is where editing happens.
Two ways to say what a level shows. The planner lays out the environment's containment tree and lets you assign levels against it — offering only the ones that would actually take effect, and saying plainly why a mark does nothing ("an enclosing box closes at Application already"). The tree folds branch by branch, and remembers how you left it. Or work the other way round: arrange the diagram and keep it — Collapse all, open the few boundaries you want, then define a level from what is on screen. The review tells you exactly what will change, including anything that reaches other levels or environments, before a thing is written.
The properties pane offers the same levels the planner does, so a mark that would never take effect cannot be made there either — and a box that already carries one can always clear it.
Any box that holds something can carry a level — including a container or system instance. Only a box with nothing inside it is off-limits, because closing it would look exactly like leaving it open.
Collapsing merges the lines — connections into a closed box become one line per pair. A lone rolled-up line keeps its own label; several read [*] until you name the pair — set once, the label shows in every environment that draws it.
Every level keeps its own arrangement: where the boxes sit (outer and nested alike), how big the closed cards are, how each line runs, where its label sits, and which side of a box each end meets. None of it touches the detailed diagram, and all of it survives reload and the viewer. One-click return to automatic per level.
Per-box expand and collapse — hover a box for its chevron, or use Collapse all / Expand all to reshape the whole diagram at once. Opening a box by hand is a look, not an edit: step to another level and the app asks whether to keep it as a level first, rather than dropping it silently.
The document export prints every level — one figure per level in use, alongside the detailed diagram.
In the viewer, step the ladder and click any connection to read it — label, technology, description and both ends, for a rolled-up line as readily as a stored one.

Drawing a deployment connection.

You can see the line you are dragging — it follows the pointer in the brand colour instead of a faint grey that vanished behind the boxes, and the box you are over shows where it can land.
It lands where you drop it — near a box's left, top, right or bottom edge and that is the side it attaches to, instead of the diagram deciding for you.

1.6.10

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.
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.

1.6.8

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.

1.5.18

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.

1.5.15

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. 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.

1.5.4

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.

1.3.1

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.

1.1.32

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.

1.1.31 and earlier

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.