How we preserved authored coordinates and achieved high-fidelity template previews
Balancing automated layouts with custom human compositions, and scaling complex vector previews inside tiny dashboard cards.
01The conflict between automatic layout engines and human composition
While automatic layout algorithms are useful for organizing generated nodes, they are too rigid for professional architectures. Humans compose diagrams with semantic spatial meaning—placing primary clients in a sidebar, stacking redundant compute nodes vertically, and clustering failover databases on the right. If every template is forced through a standard Dagre or ELK layout pass, these design details are lost, flattening them into generic grids. We need a way to combine both methods.
02Preserving authored coordinates in template schemas
To maintain human-designed layouts, our template loader implements a conditional check. When a user selects a template, the loader inspects the node definitions. If the template contains pre-authored non-zero X and Y coordinates, the engine skips the automatic layout pass and places the nodes exactly as defined. If coordinates are missing (like in raw AI outputs), the layout engine runs to arrange the nodes neatly, giving the best of both worlds.
03Achieving visual parity between previews and the editor
A common issue in diagramming platforms is that dashboard preview thumbnails are generic static icons that do not match the actual diagram. To fix this, our dashboard cards reuse the exact same rendering logic, colors, curves, and arrow directions as the main canvas. By sharing the geometric calculation methods (like calculating edge shifts and Bézier control points), we guarantee that the thumbnail looks identical to the full-size editor canvas.
04Scaling large vector canvases to fit small card slots
Rendering a heavy, interactive canvas library inside a small card is slow and causes performance lag when scrolling a dashboard grid. Instead, we render the diagram as a static, non-interactive SVG. We calculate the bounding box of all nodes in the diagram (finding the minimum and maximum X/Y coordinates) to determine the total width and height. We then apply a CSS scale transform to scale the vector graphic down, fitting the entire system architecture perfectly within the card boundaries.