Off layout

No toolbar and no buttons. Click or tap a diagram to open the fullscreen viewer. On the page it looks exactly like the plain SVG.

Live diagrams

Company structure

Chart
CEO John Executive CTO CFO

Click or tap the diagram to open it fullscreen.

Performance stress test

2,500 nodes

Click or tap to open the 2,500 node grid.

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]

Why choose this layout?

Pick it when the page should show only the diagram.

No extra elements

Off mode adds no wrapper elements, no toolbar, no buttons. DiagView only adds a click and a key handler, a pointer cursor, a tab stop, a screen reader name, a class and a few data attributes, and destroy() removes them all.

A pointer cursor

A pointer cursor signals that the diagram does something. Readers find the fullscreen viewer on their own, and the diagram still looks embedded rather than decorated. Tab stops on the diagram, and Enter or Space opens it.

Good for embeds and iframes

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

Keyboard reference

A click or tap opens the viewer. Once it is open, these keys work and Tab reaches every button.

Zoom

+
Zoom in
-
Zoom out
Space / 0
Reset & center

Pan

↑ ↓ ← →
Pan
Shift + ↑ ↓ ← →
Fast pan
Drag
Free pan

Search

F
Open search
Esc
Clear / close

Tools

M
Meeting mode
R
Rotate 90°
L
Share link
T
Text select
?
Show shortcuts

Integration

Turn the controls off for every diagram, or for one at a time.

app.js 
// Off mode. A click opens it.
DiagView.init({
  diagramSelector: '.diagram',
  layout:          'off'
});

<!-- Mix layouts (v1.0.5+) -->
<div
  class="diagram"
  data-diagview-layout="off"
>
  <!-- no toolbar -->
  <svg>...</svg>
</div>

<div
  class="diagram"
  data-diagview-layout="floating"
>
  <!-- buttons on hover -->
  <svg>...</svg>
</div>