Floating layout

The copy, download and fullscreen buttons float under each diagram. With a mouse they show on hover. On touch screens they always show.

Live diagrams

User login flow

Inline SVG
Start Valid? Success Error End

Network topology

Inline SVG
Internet Firewall Web Server Database

Logic flow

Mermaid
graph LR A[Request] --> B{Valid?} B -->|Yes| C[Process] B -->|No| D[Reject]

Deployment pipeline

Inline SVG
Build pass Test pass Stage approve Deploy retry on fail

Entity relationship

Inline SVG
Users PK id name email Orders PK id user_id → total Products PK id name price 1 → N N → N OrderItems

Performance stress test

2,500 nodes

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

Readable text colours

Inline SVG
Browser Server GET /report 200 OK

Drawn for a white page. Open it and pick Dark under Canvas Theme in the ☰ menu, and the labels on the arrows get hard to read. Pick Readable under Text Colours. Those labels turn light and keep their hue, and the labels inside the boxes stay as they are.

Dot grid and minimap

Mermaid
flowchart LR A[Commit] --> B[Build] --> C[Unit tests] --> D[Package] B --> L[Lint] --> D D --> E[Staging] --> F[Smoke tests] --> G[Canary] --> H[Production] F --> R[Roll back]

This page sets canvasGrid: "dots". Open the diagram and zoom in. The dots move with it, and once the diagram is bigger than the screen, a minimap in the corner shows where you are. Click the minimap to jump there. Phones hide the minimap, and exports never show the dots.

Why choose this layout?

Pick it when a diagram should look plain until someone points at it.

Non-intrusive by design

With a mouse, the copy, download and fullscreen buttons stay hidden until the pointer moves over the diagram or you Tab into it. On touch screens they always show.

Works in any container

Floating mode adapts to any parent container size. Embed in sidebars, modals, or full-width sections. The buttons stay centred under the diagram.

Full keyboard navigation

Press F to search, + and - to zoom, arrows to pan, Esc to close. Every action works without touching the mouse.

Keyboard reference

Tab reaches the toolbar buttons, and these keys work while the viewer 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

Integration

Two script tags, Panzoom first and then DiagView. Then pick the floating layout.

index.html 
<!-- 1. CDN. Panzoom goes first -->
<script
  src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"
></script>
<script
  src="https://unpkg.com/diagview@1.1.0/dist/diagview.umd.js"
></script>

<!-- 2. Floating buttons -->
<script>
  DiagView.init({
    diagramSelector:  '.diagram',
    layout:           'floating',
    showKeyboardHelp: true,
    showBranding:     true
  });
</script>

<!-- 3. Blue controls in CSS -->
<style>
  :root {
    --diagram-accent: #3b82f6;
  }
</style>

<!-- 4. A layout for one diagram -->
<div
  class="diagram"
  data-diagview-layout="floating"
>
  <svg>...</svg>
</div>