Export diagrams
Four export formats serve different audiences. Diagram images go into slides and wikis. The full-project document (Markdown or PDF) is a handout for stakeholders. JSON is the model file for backup and versioning. Hand-authored JSON via the published schema lets you write or generate models without the UI.
Diagram images (all tiers)
Every diagram viewer has a Download button in the top bar. Click it to export that one diagram as an image:
- SVG — vector format; scales cleanly to any size, stays crisp on slides and in documents
- PNG — raster format; ready to embed anywhere, no additional tooling
The image shows exactly what you see on screen. Both formats are available on every tier — no paywall.
Styling diagram images (Pro)
When you export a diagram image, the appearance reflects your project's current theme — the background color, border colors, and typography. Pro projects can edit the export themes in the Appearance tab of the export screen, so your diagrams match your organization's look. Free and anonymous projects use the default theme.
Export Theme Manager
The Appearance tab on the export screen (Pro only) lets you create and manage multiple named themes for export.
Theme presets — a dropdown shows all your themes. Click the theme name to rename it, or use the buttons to:
- Add — create a new theme (copy of the current one)
- Delete — remove the active theme (keep at least one)
- Copy — copy all themes to the clipboard to paste into another project
- Paste — paste themes from another project's clipboard
Diagram image background — controls how diagrams appear in exports:
- Site — match the on-screen canvas color
- Transparent — no background; SVG and PNG preserve transparency
- Color — a custom color (enter a hex value like
#ffffffor use the color picker)
There's also a checkbox to Include canvas grid (appears in F4 and deployment diagrams).
Detail-table colours — when your document includes details, you can control the appearance of element and relationship tables:
- Site — use the site's paper-theme colors
- Custom — pick individual colors for header fill, header text, cell fill, cell text, alternate row fill, and borders
All theme settings are independent of your on-screen editor theme — changes here affect only exported diagrams and documents, not what you see while editing.
Full-project document (Pro)
Turn your entire project into a Markdown bundle or print-ready PDF for sharing with stakeholders or archiving.
Step 1 — Open the export screen
Click Export on the project detail page and pick a document format. (JSON export is available on every tier; the Markdown and PDF document formats are Pro.)
Step 2 — Choose your format
Select Markdown bundle or PDF. The Markdown bundle is a .zip file containing a README, a subfolder of diagram images, and the Markdown text for each layer. The PDF is a single print-ready file.
Step 3 — Configure the export (optional)
Before exporting, you can refine the document with the options panel — three tabs, one visible at a time:
- What to export — three groups of settings:
- Document — the scope: Diagrams and details (all diagrams plus descriptions), Diagrams only (visual layouts without text), or Details only (narrative and relationships without diagram images). Plus an optional notation legend, which explains only the diagram types this export actually contains.
- Diagram images — the format, SVG (vector) or PNG (picture); SVG is the default and opens in Illustrator, Figma, Inkscape and GitHub. When F4 diagrams are included you also pick the F4 detail level (System, Container, Component, or Code) and the F4 visibility mode (Ghost or Hide), so the printed picture matches what you saw.
- Written detail — C4 element detail, relationships, and F4 activities and connections (all three below)
- Sections — toggle each C4 layer, F4 diagram, or deployment environment individually; use All / None buttons to select a whole category at once
- Appearance — the export themes: diagram background, canvas grid, and detail-table colours (see Export Theme Manager above)
Step 4 — Generate and download
The app builds the document from the live model, so it's always up to date — a short "Preparing…" runs while every diagram renders. Then click Download Markdown (.zip) for the bundle, or Print / Save as PDF for the PDF.
The document renders from your live model, so the handout always matches the diagrams in the editor. Detail tables follow the model too — for example, an F4 connection table gains an Order column ("1 of 3") wherever a step fans out more than one outgoing connection, matching the order you set in the editor.
How much is written out
Three settings on the What to export tab control how much prose sits beside the pictures. Each defaults to the fullest option, so an export you don't configure is exactly what it always was.
C4 element detail — a C4 model draws the same element on several diagrams on purpose, so its type, technology and description get stated again under every one of them. On the demo that is 12 element rows for 8 elements; the deeper the model, the more of the document is that repetition.
| Choice | What the document does |
|---|---|
| On every diagram | Each diagram lists its own elements in full — an element on three diagrams is described three times |
| Once, up front | Every element is described once in an Elements section before the diagrams — including, per element, which diagrams it appears on — and each diagram then just names the ones it shows |
| Up front only | The same catalog, and the diagrams list no elements at all |
F4 activities and connections — an F4 diagram already shows its steps and the arrows between them, so a table naming every one of them again adds nothing unless it carries prose the picture couldn't fit.
| Choice | What the document does |
|---|---|
| In full | Every activity and connection is listed under its diagram |
| Only described | Only activities with a description (or a described boundary event), and connections with a label and/or description |
| None | No listings — the F4 diagrams speak for themselves |
Relationships — the Include relationships and connections checkbox governs the connection tables, and when it's on, Rolled-up relationships decides how much of the inherited detail comes with them: listed on every diagram they appear on, only on the first, or defined only (relationships whose own elements are both on the diagram).
JSON model file (free and Pro)
Export the raw model as a JSON file for backup, moving between machines, and versioning in a repository.
Open the project detail page, click Export, and choose JSON model file. You get a .json file containing every node, layer, relationship, and diagram choice.
Use JSON export to:
- Back up before big restructuring
- Move work between browsers or machines
- Version the model in a repository next to the code it describes — diagram changes then show up in the same review as code changes
- Collaborate in a code editor — check the model file into Git and use standard code-review tools to discuss changes
See Manage projects — JSON backup and import for the import flow.
Hand-authored and generated models
The JSON Schema published at /schema/v1/crayon-c4.schema.json defines exactly what a valid CRAYON-C4 project looks like. With the schema, you can:
- Write a model file by hand in your editor
- Generate one from your codebase using CLI tools
- Have an AI assistant generate a scaffold to edit
The schema is a JSON Schema Draft 2020-12 file — compatible with VS Code schema validation, online schema validators, and any tool that reads JSON Schema.
Once you have a valid model .json file, import it into CRAYON-C4 as a new project (Projects → New project → From file). The app validates the file before loading it.
Tip: version diagrams with code
Committing the JSON export (or the Markdown bundle) into your repository's docs folder keeps the model next to the system it describes — reviewers see diagram changes in the same pull request as the code that prompted them.
The published JSON Schema makes hand-authoring or AI-generation straightforward, so models stay in sync with code reviews even if you're not using the web app.
Where next
- Manage projects — where the model itself lives.
- Share & collaborate — when the audience should join the project instead.