Transform static SVGs into interactive tools. Zero dependencies. Framework agnostic.
+ Zoom In
- Zoom Out
arrows Pan
Space Center
/ Search
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 →2,500 interactive nodes. Testing hardware-accelerated zoom/pan scale.
Run Stress Test →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. Add Dependencies -->
<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/diagview/dist/diagview.umd.min.js"></script>
<!-- 2. Initialize -->
<script>
DiagView.init({
diagramSelector: '.my-diagrams',
layout: 'floating',
accentColor: '#3b82f6'
});
</script>