# Sketchboard draw.io to SVG

> Convert a draw.io (diagrams.net) or Excalidraw file into a clean SVG and an editable board. 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.

Part of usefulweb.app (https://usefulweb.app/). Part of [Sketchboard](https://sketchboard.usefulweb.app/) (ownerApp: sketchboard). Results are deterministic calculations from the inputs and the listed assumptions; the API returns exactly what the web page shows.

## Use it
- Human interface: https://sketchboarddrawiotosvg.usefulweb.app/ (interactive tool at https://sketchboarddrawiotosvg.usefulweb.app/tool)
- JSON API: POST https://sketchboarddrawiotosvg.usefulweb.app/api/v1/calculate with a JSON object of inputs (schema: https://sketchboarddrawiotosvg.usefulweb.app/api/v1/tool)
- OpenAPI: https://sketchboarddrawiotosvg.usefulweb.app/openapi.json
- MCP (Streamable HTTP): https://sketchboarddrawiotosvg.usefulweb.app/mcp - tool `sketchboard_drawio_to_svg`

## Inputs
- diagram (textarea): draw.io or Excalidraw file content - Paste the XML of a .drawio file (or the JSON of an .excalidraw file), or upload the file below.
- diagramFile (file): File (optional) - Used instead of the pasted text when given.
- page (integer): Page number (files with several pages)
- style (select): Drawing style

## Method
- 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.

## Limits
- 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.