PNG, SVG, clipboard, text and Markdown

What you get

Five items, one click each. Copy image puts a 2× PNG on your clipboard. PNG image downloads the same 2× raster. SVG image downloads a vector that scales to any size. Text downloads the source as <name>.runic, or <name>.sequence.runic for a diagram. Markdown downloads <name>.md with the source in a fenced runic block plus a 'How to read this' section.

Files are named after the document, lower-cased, with spaces turned into hyphens. Image exports show every note expanded, ignore your on-screen zoom, and inline Runic's self-hosted fonts so the picture matches the editor.

Styles

Above the image items sits a row of chips: Runic, Boardroom, Blueprint, Midnight, Pastel, Sunset and Custom. Runic is exactly what you see in the editor. Boardroom flattens everything to ink on white for print. Blueprint is navy with cyan lines and monospace type. Midnight keeps hues but lifts them for a dark page. Pastel and Sunset re-tint the whole palette. Custom exposes four color inputs, Page, Card, Ink and Accent, and derives the rest.

The editor never changes. A style is applied to a cloned copy of the diagram at export time, so the same flow can go out as a slide and as a printed handout without touching the text. Your last choice is remembered.

Markdown for models

The Markdown export exists so a language model can read a flow without guessing. Under the fenced block, 'How to read this' is the same legend the MCP server hands Claude: one line per node, two-space indent, what a colon caption means, how .if, .then, .end, .go, .do, .fail and .back behave. Drop the file into a Claude Code project or a chat and the rules travel with the flow.

Limits and gotchas

Copy image needs a browser with ClipboardItem. Without it the menu says 'This browser can't copy images — download the PNG instead.'

When billing is switched on, Copy image, PNG image and SVG image are Pro features. They show a PRO tag, the style chips disappear, and clicking one opens the upgrade dialog. Text and Markdown are always free. While billing is not configured, every format is open to everyone.

The whole Share menu hides while a chat proposal is previewed on the flow canvas, because exports always reflect the saved document. The Markdown legend describes the process language; a sequence diagram still exports its fenced source, but the legend under it is about processes.

How to use it

1. 1
   Click Share on the diagram pane

   The export items sit under the Export heading in the same menu. On a shared page or embed the button is labeled Export.
2. 2
   Pick a style

   Click a chip: Runic, Boardroom, Blueprint, Midnight, Pastel, Sunset or Custom. With Custom, set Page, Card, Ink and Accent with the color pickers that appear.
3. 3
   Choose an output

   Copy image, PNG image, SVG image, Text or Markdown. Downloads start at once; Copy image shows 'Copied.' for about a second and the menu closes.
4. 4
   Use the file

   PNG for chat and slides, SVG for docs and print, .runic to keep the source, .md for a model or a teammate.

Commands & shortcuts

Tips

• Flip the flow direction before exporting. The export clones what is on screen, so a left-to-right layout exports left-to-right.
• Boardroom swaps shadows for a thin ink ring and flattens every accent to ink and gray, which prints cleanly.
• The Custom palette follows the Page color: pick a dark Page and Runic derives dark tints and lighter grays so text stays readable.
• Readers of a share link or embed get the same Export menu, images included, so you do not have to email files around.

Questions