Source: Dev.to

I Built an Interactive SVG Viewer Because Static Diagrams Deserve Better

---

As developers, we love clear documentation. Use‑case diagrams, cloud architectures, flowcharts — they are the lifeblood of understanding complex systems. Tools like Mermaid.js, PlantUML, and Draw.io are fantastic for creating them.

But viewing them? That experience is often stuck in the past.

If you export a complex architecture diagram as an SVG and embed it on your docs site, it’s just a static image. The text is too small to read, you can’t search for that one specific micro‑service, and if you zoom with your browser the whole page breaks.

I looked for a library to solve this. I found D3.js (too complex for just viewing) and Leaflet (too heavy for a diagram). I didn’t want to write hundreds of lines of code just to let a user zoom into a flowchart.

So, I built DiagView.

---

Demo

---

What is DiagView?

DiagView is a feature‑rich, interactive wrapper that gives your static SVGs superpowers.

It is built on top of the excellent panzoom library, which handles the low‑level matrix math for smooth 60 fps zooming and panning. While panzoom gives you the engine, DiagView gives you the entire car.

---

Feature Overview

---

The Landscape: Why Wasn’t This Already Solved?

Before writing any code, I scoured npm and GitHub. Here’s what I found:

• D3.js – The titan of data visualization. Great for creating graphics from data, not for viewing pre‑made SVGs.
• svg-pan-zoom – Focused library for adding pan/zoom to SVGs. It’s just the engine – no UI, no search, no export.
• Leaflet.js – Standard for interactive maps. Overkill for a simple flowchart.

The gap was clear: I needed a batteries‑included solution – something that would just work with a single init() call.

---

Quick Start

CDN (Fastest)

  

  DiagView.init();

NPM

npm install diagview @panzoom/panzoom

import DiagView from 'diagview';

DiagView.init({
  layout: 'floating',
  accentColor: '#3b82f6',
});

---

Flexible Layouts

DiagView supports three layout modes to fit your design:

---

Under the Hood: Technical Decisions

The Search Engine

The feature I’m most proud of. The search system:

• Pre‑Caches Candidates – On first open, queries all text elements and stores them in a WeakMap.
• Uses Dirty Checking – Before writing to the DOM, checks if values have changed.
• Batches Updates – All DOM mutations are wrapped in requestAnimationFrame.

Result: Searching through diagrams with 2,500+ nodes is instant.

The Export System

Handles edge cases:

• Robust Dimension Calculation – Uses getBBox() to find the actual content area.
• Cross‑Origin Font Handling – Inlines Google Fonts for consistent exports.
• High‑DPI Scaling – Up to 6× resolution for print‑quality images.

Optional Panzoom Dependency

Panzoom is an optional peer dependency:

This keeps DiagView usable even in constrained environments.

Bundle Size

---

Enjoy smoother, searchable, export‑ready SVG diagrams with DiagView!

(Transfer)
~19 KB

For context, that’s smaller than a single hero image. It includes all CSS, SVG icons, and the entire UI framework.

---

Try It Out

I built this to scratch my own itch. If you write technical documentation for a living, I think you’ll find it useful too.

🧪 Live Demo:
⭐ GitHub:
📦 NPM:

Have feedback or found a bug? Open an issue on GitHub.

Originally published on khadirullah.com