Three different layout modes on a single page, each set with a single HTML attribute. Click Destroy DiagView above to see the bare diagrams, then restore.
A circular action button hovers over the bottom-right corner. Minimally intrusive — ideal for embedded diagrams where you want controls available but out of the way.
A full-width toolbar appears above the diagram. All actions are always visible. Best for documentation pages where users expect a familiar toolbar.
No toolbar rendered at all. The diagram is clickable and opens fullscreen. Perfect for tight layouts or when you want a completely clean embed.
Every action is keyboard-accessible. No mouse required.
A single global initialization handles all diagrams, with optional per-element attribute overrides.
<script>
// One global init — no layout specified
DiagView.init({ showBranding: true });
</script>
<!-- Each element specifies its own layout via data attributes -->
<div class="diagram"
data-diagview-layout="floating"
data-diagview-accent="#f59e0b">
<svg>...</svg>
</div>
<div class="diagram"
data-diagview-layout="header"
data-diagview-accent="#6366f1">
<svg>...</svg>
</div>
<div class="diagram"
data-diagview-layout="off">
<svg>...</svg>
</div>