How we achieved pixel-perfect thumbnail parity on the dashboard
Designing static vector previews that share coordinate mathematics with the main canvas to ensure exact visual parity.
01The performance bottleneck of dashboard previews
Showing high-fidelity previews of saved diagrams on the user dashboard is important for navigation. However, rendering a full-scale interactive canvas library inside every dashboard card is slow, consuming excessive memory and causing scrolling lag. On the other hand, using static mock icons makes it hard for users to distinguish between their saved projects. We need a lightweight rendering solution that preserves visual accuracy.
02Reusing geometry calculations for preview renders
To ensure the thumbnail matches the actual diagram, the preview card uses the exact same geometry calculations as the main editor. It reads the node positions, calculates the connection vectors, and applies the edge offset shifting math. This guarantees that curves bend, lines align, and arrows point in the identical directions, achieving 1:1 visual parity with the editor.
03Optimizing SVG rendering for dashboard cards
Instead of mounting the heavy canvas library, the preview card renders a lightweight, static SVG version of the diagram. The SVG scales automatically to fit the card dimensions, using CSS classes for theme colors and styling. This approach is highly efficient, allowing the dashboard to render dozens of previews simultaneously without any performance lag.
04Calculating bounding boxes and scale transforms
To fit the diagram inside the card, the preview component calculates the bounding box of all nodes to determine the diagram's total width and height. It then calculates a scale factor to scale the diagram down to fit the card dimensions. By centering the viewport on the diagram's center, we ensure the preview is cropped and aligned correctly, regardless of the diagram's size.