Combining dynamic Mermaid.js rendering with static SVG diagrams. DiagView handles both seamlessly.
Click to open the 2,500 node grid
Designed for real-world use cases where control placement matters.
The toolbar is permanently rendered above each diagram. No hover required — users see search, export, and fullscreen at a glance on every load.
Header toolbar meets AA contrast ratios with full focus management, aria-labels, and keyboard operability out of the box.
The classic toolbar pattern matches what users already know from Google Docs, Figma, and GitHub. Zero learning curve.
Every action is keyboard-accessible. No mouse required.
// Works with Mermaid.js — render first, then init
await mermaid.run();
DiagView.init({
diagramSelector: '.mermaid, .diagram',
layout: 'header',
showKeyboardHelp: true,
highResScale: 4
});
// Per-element accent & layout override
<div class="mermaid"
data-diagview-layout="header"
data-diagview-accent="#8b5cf6">
graph TD; A-->B;
</div>