Clean, non-intrusive floating controls combined with high-performance static SVG rendering.
Click to open the 2,500 node grid
Designed for real-world use cases where control placement matters.
The FAB button sits outside the diagram content flow. Users who just need to read never see it — controls appear only on hover.
Floating mode adapts to any parent container size. Embed in sidebars, modals, or full-width sections — the FAB always positions correctly.
Press / to search, + / − to zoom, arrows to pan, Esc to close. Every action is accessible without touching the mouse.
Every action is keyboard-accessible. No mouse required.
// 1. CDN — drop into any HTML page
<script src="https://unpkg.com/diagview@1.0.6/dist/diagview.umd.js"></script>
// 2. Init with floating FAB
DiagView.init({
diagramSelector: '.diagram',
layout: 'floating',
accentColor: '#f59e0b',
showBranding: true
});
// 3. Or set layout per-element via HTML
<div class="diagram"
data-diagview-layout="floating"
data-diagview-accent="#f59e0b">
<svg>...</svg>
</div>