Visio Safe Diagrams

Problem

Architecture diagrams generated from Visio or Draw.io often suffer from text spilling outside boxes, edge endpoints drifting, unstable CJK/English label wrapping, and SVGs that render as broken images in browsers or image pipelines. visio-safe-diagrams treats .drawio as the editable master, generates a stable SVG from that master, and validates both files before handoff.

Workflow

Core steps:
- Create or repair the .drawio file first, keeping it uncompressed and inline. Avoid storing raw XML as text inside a cell, and avoid base64/deflate unless using Draw.io's own exporter.
- For line layouts that must match a reference drawing, use fixed-point edges with explicit geometry instead of relying on source/target auto-routing.
- Order elements as root cells 0 and 1, title/background rectangles, edges and edge labels, then device/component boxes to keep the diagram readable and export-stable.
- Generate SVG with scripts/drawio_to_svg.py. The script copies fixed-point edges, separates label text, applies clipPath per box, uses conservative wrapping for mixed Chinese/English labels, and writes UTF-8 output.
Validate before delivery: .drawio parses with an mxGraphModel, geometry attributes use as="geometry", Chinese labels remain visible under UTF-8, SVG parses as XML, and rendered output shows no broken image, no text outside boxes, and no labels covering critical line endpoints.

Boundaries

This skill fits Visio-safe architecture or device diagrams where an editable .drawio source and a deliverable SVG are both needed. If the input .drawio is compressed/base64 or lacks an inline mxGraphModel, open it in Draw.io and export uncompressed XML or repair it manually. It focuses on layout stability and rendering compatibility, not on modeling complex workflow semantics.