Demo
The converter starts…
The converter on this page is accent-draw, compiled to WebAssembly. Select a sample, or drag an SVG file onto the page. Your browser tab reads the file. The page does not send it to a server.
Source
Select a sample or a file. You can also drag an SVG file onto this page.
Diagram
A first conversion is an approximation. Each note tells you about a part that is different from the SVG file, or that is not in the diagram. accent-draw removes no part without a note.
What to try
Start with the plain SVG. It names no parts: it has no ids, no classes and no data that tells which text is the label of which box. accent-draw found the labels and the arrows from the positions of the parts on the page. Then compare it with the Mermaid sample or the Graphviz sample. These sources name their parts, so the result is exact.
Read the notes. A first conversion is an approximation. The notes tell you each part that accent-draw changed, showed in a different way or kept as an image. Each note has a code. An SVG file that contains nothing to show causes an error. It does not become an empty diagram.
Open the draw.io sample. draw.io exports a .drawio.svg file: an image that
contains the diagram. accent-draw does not read the image. It gives back the
diagram without a change. Thus the summary tells you that the file keeps the
diagram in compressed form, and the XML tab shows one block of base64. Each
round trip after the first is exact.
Then edit a diagram. The result is a diagram, not an image. Select a box and move it. Its label and its arrows move with it.
Edit in draw.io
Edit in draw.io opens the draw.io editor in this page, in embed mode. The
page tells you where the diagram goes. It sends the diagram only after you
click to agree. The diagram goes only to that origin, which is
https://embed.diagrams.net if you do not set a different one. The page keeps
your changes, and the .drawio download contains them.
Download .drawio.svg gets an SVG file with the diagram in it from the editor. draw.io opens this file again as a diagram, not as an image.
To use a different draw.io, put its origin in the address of this page:
?drawio=https://draw.example.org/drawio/
The editor opens from that address, with its path. The page removes the query
and the fragment. The page accepts only an http address or an https address.
For other values, the page stops the editor and tells you why.
The draw.io documentation gives embed mode only for embed.diagrams.net. But
embed mode also works on a draw.io that you install yourself. The
architecture page tells you what we tested and what to
check on your server.
Where the samples come from
Each sample is a file from the test corpus of this project. The build script copies each file into the site when it builds the site. Thus the demo converts the same files as the tests.
| Sample | What it is |
|---|---|
| Plain SVG | A flowchart from the samples of svgtovisio, MIT licence, copyright (c) 2026 McMarius11. It names no parts, and that is the reason to use it |
| Frames | A file from the same samples, with the same licence. It has a frame in a frame, and each frame keeps its title. The boxes in the frames become their children |
| Mermaid, Graphviz, PlantUML, D2 | Small diagrams that we wrote for this repository. The command of each tool made the SVG file |
| Excalidraw | A sketch that Excalidraw exported with its scene. accent-draw reads the scene, not the sketch |
| Inkscape | A document that Inkscape saved. Its connectors record the two objects that they connect |
| draw.io | An xmlsvg export, which contains its diagram in the image |
What this page does not do
This page does not show the diagram next to the source. draw.io shows a
.drawio file. This project has no renderer, and it does not need one. Thus
the page shows the notes and the XML of the diagram. Open the editor to see the
diagram.
This page does not send your file. The site is static. Your browser downloads the converter one time, as a WebAssembly module, and no server receives data from it. The page connects to a different origin only when you open the draw.io editor.