Per-diagram layout control

Three layout modes on one page, each set with a single HTML attribute. Turn DiagView off in the top bar to see the bare diagrams, then turn it back on.

Live diagrams

Floating

floating

data-diagview-layout="floating"

Header

header

data-diagview-layout="header"

Off

off

data-diagview-layout="off"Click or tap the diagram to open it fullscreen.

Three ways to show the controls

Pick one for the whole page, or set it per diagram.

Floating buttons

Copy, download and fullscreen buttons appear under the diagram on hover. They stay out of the way, which suits diagrams embedded in running text.

Header bar

A full-width toolbar with the title and the copy, download and fullscreen buttons. With a mouse it appears on hover or when you Tab into the diagram. On touch screens it is always shown.

Off (click only)

No toolbar at all. The diagram opens fullscreen when clicked or tapped. Good for tight layouts or when you want a completely clean embed.

Keyboard reference

With the header and floating layouts, Tab reaches the toolbar buttons. With off, a click or tap opens the viewer. These keys work while it is open.

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

How it works

One global init handles every diagram, and a data attribute on an element overrides the layout for that diagram only.

index.html 
<script>
  // One init, no layout given
  DiagView.init();
</script>

<!-- Each diagram picks a layout -->
<div
  class="diagram"
  data-diagview-layout="floating"
>
  <svg>...</svg>
</div>

<div
  class="diagram"
  data-diagview-layout="header"
>
  <svg>...</svg>
</div>

<div
  class="diagram"
  data-diagview-layout="off"
>
  <svg>...</svg>
</div>