Transform any static SVG into a fully interactive diagram viewer.
Zoom · Pan · Search · Export · Fullscreen. Framework-agnostic.
Choose the mode that best fits your user experience.
Classic top-bar controls. Best for documentation and dashboards.
View Live Example →Clean HUD-style buttons that appear on hover. Ideal for minimal UIs.
View Live Example →Invisible UI. The diagram itself is a trigger. Best for embedding.
View Live Example →All 3 layout modes side-by-side using per-diagram data-diagview-layout overrides on
one page.
2,500 interactive nodes. Testing hardware-accelerated zoom/pan scale.
Run Stress Test →Add non-intrusive branding to your exported images. Invisible in UI, present on download.
Try Silent Branding →Everything you need to handle large-scale documentation infrastructure.
Hardware-accelerated rendering makes zooming through 5,000+ nodes feel like butter.
Built-in node searching with dirty-checking and throttled background processing.
Save diagrams as sharp SVG, PNG, or PDF. Perfect for reports and presentations.
Automatically syncs with your system's light/dark mode and supports custom accent colors.
Get up and running in seconds.
<!-- 1. Required Dependencies -->
<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script>
<!-- Option A: Basic Usage (Auto-initializes) -->
<script src="https://unpkg.com/diagview@1.0.6/dist/diagview.umd.js"></script>
<!-- Option B: Custom Configuration -->
<script src="https://unpkg.com/diagview@1.0.6/dist/diagview.umd.js" data-diagview-no-auto-init></script>
<script>
DiagView.init({
layout: 'floating',
accentColor: '#3b82f6'
});
</script>