Off Layout (Stealth UI)

The UI is completely hidden. The diagram itself acts as the trigger button. Perfect for seamless embeds.

✕ Off (Click-only) Mode

Company Structure

Chart

↑ Diagram is the trigger

Complex Workflow

Mermaid

graph TD A[Start] --> B[Process A] B --> C{Success?} C -->|Yes| D[Finalize] C -->|No| E[Retry] E --> B D --> F[Send Email] F --> G[End]

Performance Stress Test

2.5k Nodes

Click to open the 2,500 node grid

Why choose this layout?

Designed for real-world use cases where control placement matters.

Zero DOM Overhead

Off mode adds no wrapper elements, no toolbar, no buttons. The SVG is untouched — DiagView only attaches a click handler and cursor style.

🎯

Pointer Affordance

A zoom-in cursor signals interactivity without any UI. Users discover the fullscreen viewer naturally, making diagrams feel embedded rather than decorated.

🔗

Perfect for Embeds & iFrames

Use in blog posts, documentation pages, or iframes where toolbar chrome would look out of place. Clean SVG, full viewer on demand.

Keyboard Reference

Every action is keyboard-accessible. No mouse required.

Zoom

+Zoom in

-Zoom out

Space / 0Reset & center

Pan

↑ ↓ ← →Pan diagram

ShiftFast pan

DragFree pan

FOpen search

EscClear / close

Tools

MMeeting mode

RRotate 90°

LShare link

Integration

// Off mode — zero toolbar DOM, pure click-to-open
DiagView.init({
  diagramSelector: '.diagram',
  layout:          'off'
});

// Mix layouts on the same page (v1.0.5+)
<div class="diagram" data-diagview-layout="off">
  <svg>...</svg>   // no toolbar
</div>
<div class="diagram" data-diagview-layout="floating">
  <svg>...</svg>   // floating FAB
</div>

Compare all layouts → Compare all Layouts →