8. Import and export
Export formats#
Export in the toolbar, Ctrl/⌘ ⇧ E for the dialog, or the palette.
| Format | Extension | Notes |
|---|---|---|
| SVG | .svg | Vector, self-contained, live text. Round-trips: an SVG this app wrote can be imported back as the exact original document |
| PNG | .png | Raster, 3× by default, any scale |
.pdf | One page per document page, or tiled onto A4. See the caveat below | |
| draw.io | .drawio | mxGraph cells — keep editing in diagrams.net |
| Mermaid | .mmd | flowchart source, the text form for docs and PRs |
| Plota JSON | .json | The whole multi-page document. Lossless |
The export dialog#
Left: document metadata (title, kicker, badge, footer note). Right: the persisted export options, with a live SVG preview.
| Option | Meaning |
|---|---|
| Include header | The gradient title bar (kicker + title + badge) |
| Include footer | The rule and footnote under the diagram |
| Include faded reference overlay | A watermark; off by default, with its own text and opacity |
| Transparent background | Instead of the canvas colour |
| Route connectors around shapes | On by default, so the file matches the screen |
| Padding | Pixels around the content bounding box; blank means the full page |
| PNG scale | The raster factor |
| Pages | Current page or All pages (n) |
Everything the dialog changes goes through a store action, so each edit is one undo step, and the options are saved on the document.
Two extra PDF commands live only in the palette: Export every page as one PDF
and Export PDF tiled onto A4.
PDF fidelity, stated plainly. The page geometry is vector-exact — correct
media box in points, correct multi-page splitting, correct tiling — but the
artwork is a raster at 200 dpi (300 is a good print setting). Text in a PDF
is therefore not selectable or searchable. The artwork is produced by the same
docToSvg the SVG export uses, so the PDF and the SVG always look identical.
Import#
Everything funnels through one sniffer and one set of readers, so a file and a paste of the same bytes can never disagree.
| Route | How |
|---|---|
Toolbar Import Diagram | A real file chooser (Ctrl/⌘ O) |
| Paste | Ctrl/⌘ V on the canvas with a foreign diagram on the clipboard |
| Drag and drop | Drop a file onto the canvas |
| Source | What is understood |
|---|---|
| draw.io / diagrams.net | <mxGraphModel>, <mxfile> (plain and the default deflate-raw + base64 compressed form) and <mxlibrary>: geometry, style string → shape kind, labels, edges, arrow heads |
| Lucidchart | The text/html clipboard flavour (plain JSON, URI-encoded or base64): blocks, lines, fills, strokes, fonts |
| PlantUML | @startuml … @enduml: participant / actor / class / component / database / … declarations, every arrow spelling, [*] terminals, title |
| Mermaid | flowchart / graph with a direction, and sequenceDiagram |
| SVG | Our own export round-trips to the exact original document; a foreign SVG becomes one image node, and says so |
| Plota JSON | A single document, or the multi-page file Save/Export JSON writes |
| Images | PNG, JPEG, WebP, GIF, AVIF, SVG → one image node |
Format detection is by content, not by extension.
Where the content lands#
A file import asks:
- Import into this page — merged at the viewport centre, nudged clear of what is already there, ids rewritten, everything that arrived left selected, all inside one undo entry.
- Import as new document — replaces the document.
A paste always merges, except for a complete Plota JSON or a round-trip SVG pasted onto an empty canvas, which opens as a document.
Whatever the reader had to approximate comes back as a warning in the dialog and in the toast, e.g. an unknown draw.io shape that became a plain rectangle. The import summary always names the format it recognised and how many shapes and connectors arrived; "unreadable file" is never the answer.
See the draw.io migration walkthrough for a worked example.
Saving inside the browser#
Ctrl/⌘ S writes the whole multi-page document to localStorage; it then
appears under Figures ▸ My diagrams and in the Assets search. This is
convenience, not backup — clearing site data deletes it. Use Export ▸ Plota JSON for anything you care about.
The page, and what gets cut off#
The exported box is the document's declared page (Inspector → Canvas → Width and Height). Two things follow, and the Export dialog now says so before you export rather than after:
- A shape past the page is cut off. It is on the canvas and absent from the file. The dialog names how many, and the navigator draws them in amber.
- A page bigger than its content exports the empty remainder — the "blank area" at the bottom or right of the file.
Fit page to content — in the Export dialog's notice and in Inspector → Canvas — sets the page to the content plus a 24px margin in one undoable step. It grows the page to cover anything hanging off it, and trims an empty remainder. It refuses when content sits above or to the left of the origin: resizing cannot reach that, and moving somebody's diagram is their decision, so it says so instead.