Sketchboard draw.io to SVG

Convert a draw.io (diagrams.net) or Excalidraw file into a clean SVG and an editable board.

How it works

Reads a .drawio / diagrams.net XML file (plain or compressed pages) or an Excalidraw .excalidraw file, maps shapes, connectors, arrowheads, labels and styles to Sketchboard, and returns a standalone SVG plus a Sketchboard board you can keep editing. It lists what was mapped and what was drawn as a plain shape.

Compressed pages are decoded the way diagrams.net writes them: base64 → raw DEFLATE (RFC 1951, inflated by the platform’s own decoder with a 30 MB cap) → URI-decoding → XML. Plain pages are read directly. No DTDs or external entities are processed.
Every mxCell with vertex="1" becomes a shape at its mxGeometry (children of groups and containers are offset by their parents). The style’s shape name or first keyword picks the Sketchboard shape (ellipse, rhombus → diamond, cylinder3 → cylinder, process → predefined process, mxgraph.flowchart.* → the matching flowchart shape, note, actor, cloud, document …); unknown shapes are drawn as rectangles and listed in the warnings.
Edges (edge="1") become connectors glued to their source and target; exitX/exitY and entryX/entryY on a side become that port. edgeStyle=orthogonal/elbow → elbow route around shapes, curved=1 → curved, otherwise straight; waypoints are kept. Arrowheads map by name (classic/block → triangle, open → arrow, oval → circle, diamond, ER crow’s feet …; endFill=0 → the open variant).
Styles: fillColor, strokeColor, strokeWidth, dashed, opacity, rotation, fontColor, fontSize (× 1.15 for the larger default type), align. HTML labels keep their text with line breaks; markup is removed.
Excalidraw: rectangles, ellipses, diamonds, bound text (as the shape’s label), text, arrows and lines with bindings and arrowheads, freedraw strokes and frames are imported; roughness above 0 on most elements switches the board to the hand-drawn style. Images and embeds are skipped and counted.
The SVG is drawn by Sketchboard’s renderer, so line jitter in the hand-drawn style is seeded by the element ids and identical on every run.

draw.io and diagrams.net are trademarks of JGraph Ltd; Excalidraw is a trademark of its owners. Sketchboard reads files you provide and is not affiliated with either project. Shape libraries are not copied: unknown stencils become plain rectangles.

Sources

diagrams.net: .drawio files and compressed XML (Extras → Edit diagram, File → Properties → Compressed) (JGraph Ltd (draw.io / diagrams.net))
mxGraph model (mxCell, mxGeometry, style key=value pairs) (JGraph mxGraph API documentation)
Excalidraw JSON schema (elements, bindings, appState) (Excalidraw developer documentation)
RFC 1951: DEFLATE Compressed Data Format (IETF)

Part of Sketchboard

Sketchboard Diagrams, sketches and plans

Draw diagrams, flowcharts, mind maps and floor plans on an endless board.

Open Sketchboard

How to turn a draw.io or Excalidraw file into a clean SVG

Convert a .drawio diagram (plain or compressed) or an .excalidraw drawing into an SVG and an editable Sketchboard board, and see exactly how each shape was mapped.

What it is for

Diagrams often live in a file you cannot easily open: a .drawio file from a colleague, an export from a wiki, or an Excalidraw sketch from a workshop. This tool reads such a file and gives you two things back: an SVG you can put on a web page or into a document, and a Sketchboard board (.sketchboard.json) where every box and arrow can be moved, recoloured and connected again.

It runs the same import code as the Sketchboard app, so a file that converts here opens in the app with the same shapes in the same places.

Worked example

A small Order handling flowchart saved by draw.io as plain XML gives:

Converted “Order handling”: 5 shapes, 4 connectors, 1 text label.

rhombus became a diamond, cylinder3 a cylinder, process the flowchart predefined process and document a document shape. The three kinds of edge came over as three kinds of connector: orthogonalEdgeStyle became a right-angled (elbow) connector, a curved edge stayed curved and a plain edge stayed straight. All four connectors are glued to their shapes, so moving In stock? in the app moves its arrows too.

The same file saved with draw.io's Compressed option (base64-encoded, raw DEFLATE-compressed pages) produces the same 10 elements, plus a note: The file has 2 pages; page 1 (“Order handling”) was imported. Set Page number to 2 to convert the second page, Notes.

An Excalidraw file with a rectangle, an ellipse, an arrow between them, a free text and a pen stroke gives Converted “Excalidraw drawing”: 2 shapes, 1 connector, 1 text label. The text bound to the rectangle becomes its label, the arrow keeps both bindings, and the pen stroke stays a stroke.

How to read the result

The metrics count shapes, connectors, text labels, frames and strokes, skipped items (such as images) and the pages in the file. The table How shapes were mapped shows each style from the file next to the Sketchboard shape it became; that is where you see if something fell back to a plain rectangle. Warnings list unknown shapes and anything left out. Below the SVG preview you can download the SVG and the board file.

Coordinates stay as they are in the file: one draw.io pixel becomes one board unit, which is one screen pixel at 100 % zoom.

Tips and common mistakes

Multi-page files import page 1 only unless you change Page number.
Drawing style As in the file picks the hand-drawn look when most Excalidraw elements have a roughness above 0; Hand-drawn forces wobbly lines and hatched fills.
HTML labels keep their text and line breaks; bold, links and other formatting are removed.
Images inside the file are skipped and counted, never fetched.
To keep working, download the board and open it in Sketchboard (File → Open file…).

FAQ

Does it contact diagrams.net or Excalidraw?

No. It reads only the file you give it and does not copy their shape libraries. Shapes Sketchboard does not have are drawn as rectangles and listed in the warnings.

Is the hand-drawn SVG random?

The wobble is seeded by the element ids, so running the tool again gives a byte-identical SVG.

Why does my file fail to load?

A page that is not valid compressed data gives The draw.io diagram is compressed in a way Sketchboard cannot read. A file with an inline DTD is refused for safety.

How large can the file be?

Uploads up to 12 MB are accepted.

Guide last updated: November 15, 2026

For scripts and AI agents

JSON API: POST https://sketchboarddrawiotosvg.usefulweb.app/api/v1/calculate (same calculation as this page)
Interface description: OpenAPI 3.1 · AI guide: llms.txt
MCP server (Streamable HTTP): https://sketchboarddrawiotosvg.usefulweb.app/mcp · tool name sketchboard_drawio_to_svg

Example request

curl -s -X POST https://sketchboarddrawiotosvg.usefulweb.app/api/v1/calculate \
  -H 'content-type: application/json' \
  -d '{…see OpenAPI examples…}'

Feedback · ideas & bug reports welcome