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 (sequenceDiagram for a sequence diagram), 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) |
| Plota watermark | A small “Made with Plota” mark in the bottom-right corner of SVG, PNG and PDF exports. On by default; remembered in this browser, not saved with the document |
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 | 13 diagram types — flowchart, sequence, class, state, ER, C4, architecture, block, gitGraph, mind map, timeline, user journey, requirement; front matter, subgraph, classDef / class and the full v11 shape vocabulary. See Mermaid diagrams |
| 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.
Pasting Mermaid#
Every shape Mermaid can name is drawn as the symbol it names: all fourteen
bracket forms, and all forty-five @{ shape: … } words under every alias they
have. [/Review\] is a trapezoid, not a parallelogram; [[Open PR]] is a
predefined process; @{ shape: collate } is an hourglass. A word we do not
recognise still produces a node — it becomes a process box, and the import
summary says which word it was rather than letting it pass as understood.
Three things travel with the source and set themselves up on arrival:
- The title.
title:in the front matter names the page. A page you have already named by hand is never renamed — but a name a previous paste chose is replaced by the next one, so pasting chart after chart keeps the name current. Type in the title field once and it is yours for good. - The reading direction.
flowchart LRkeeps reading left to right through Auto layout, Tidy Up and the AI layout op, not just on arrival. An axis is taken from arriving content only when the page has not already declared one. - Connector layer. A
subgraphbecomes a frame, and a frame is opaque, so a chart with subgraphs arrives with Connectors in front switched on and its arrows visible. Charts without frames keep the ordinary paint order. Your own choice of that toggle is never overridden.
Long charts#
A flowchart written as one long chain would run off the side of the page, so Plota folds it into rows that still read left to right, with short hops between rows. Charts with frames keep their frames intact. A very large sectioned chart can also be split into an overview and one page per section — see Large charts.
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.