Demo
Loading the converter…
The converter on this page is accent-draw compiled to WebAssembly. Pick one of the samples, or drop an SVG of your own: it is read in the tab you are looking at, and it is not uploaded anywhere.
Source
Pick a sample, choose a file, or drop an SVG anywhere on this page.
Diagram
A first conversion is an approximation. Each note here is something drawn differently from the SVG, or left out; nothing is dropped without one.
What to try
Start with the plain SVG. It names nothing: no ids, no classes, no metadata saying which text belongs to which box. Everything the diagram knows -- the labels inside the shapes, the arrows glued to what they join -- was worked out from where things sit on the page. Then compare it with the Mermaid or Graphviz sample, where the source labels its own parts and the reading is exact rather than inferred.
Read the notes. A first conversion is an approximation, and every place the drawing was simplified, drawn a different way or kept as an image is listed there with a code. Nothing is left out without a note; an SVG with nothing recognisable in it is reported as an error instead of becoming an empty diagram that looks like success.
Open the draw.io sample. That file is what draw.io's own .drawio.svg
export looks like: a picture with the diagram tucked inside it. The converter
does not read its picture at all -- it hands the diagram back untouched, which
is why the summary says the diagram is stored compressed and why the XML tab
shows a single block of base64. Every roundtrip after the first is exact.
Then edit one. The result is a diagram, not a drawing: select a box, move it, and the label inside it and the arrows attached to it come with it.
Editing in draw.io
Edit in draw.io opens draw.io's editor inside this page, in its embed mode.
Nothing is sent until you have been told where it goes and clicked to confirm:
the diagram goes only to that origin, https://embed.diagrams.net by default.
Your edits are kept as you make them, and the .drawio download follows them.
Download .drawio.svg asks the editor for an SVG carrying the diagram, so it
opens in draw.io again as a diagram rather than as a picture.
To edit with another draw.io, give its origin in this page's address:
?drawio=https://draw.example.org/drawio/
The editor loads from that address, path included; its query and fragment are
dropped. Only an http or https address is taken. Any other value turns
editing off, and the page says why.
draw.io documents embed mode for embed.diagrams.net only, but a self-hosted
draw.io runs it too -- see the architecture page for what
was tested and what to check if you host one.
Where the samples come from
Every sample is a file from this project's test corpus, staged into the site by its build script rather than copied into it, so what the demo converts is what the tests convert.
| Sample | What it is |
|---|---|
| Plain SVG | A hand-written flowchart from svgtovisio's samples, MIT licensed, copyright (c) 2026 McMarius11. It names nothing, which is the point |
| Frames | Another of the same set, and the same licence: a frame inside a frame, each keeping its own title, with the boxes inside them becoming their children |
| Mermaid, Graphviz, PlantUML, D2 | Small diagrams written for this repository and rendered by each tool's own command |
| Excalidraw | A sketch exported with its scene, so it is read from the scene and not from the drawing |
| Inkscape | A document routed and saved by Inkscape, whose connectors record the two objects they join |
| draw.io | An xmlsvg export, which carries its diagram inside the picture |
What this page does not do
It does not render the diagram beside the source. Drawing a .drawio is
draw.io's job, and this project has no renderer of its own and does not want
one -- so the diagram is shown as its notes and its XML until you open the
editor, which draws it properly.
It also does not upload anything. The site is static, the converter is a WebAssembly module fetched once, and there is no endpoint behind any of it. The one request that leaves this origin is the draw.io editor, and only after you ask for it.