Header layout

A bar above each diagram holds its title and the copy, download and fullscreen buttons. Mermaid and hand-written SVG diagrams get the same bar.

Live diagrams

Core infrastructure

Mermaid

graph LR subgraph "Core System" LB[Load Balancer] --> Web1[Web Server 01] LB --> Web2[Web Server 02] LB --> Web3[Web Server 03] end subgraph "Data Layer" Web1 --> Cache[Redis Cluster] Web2 --> Cache Web3 --> Cache Cache --> DB_Master[(Postgres Master)] DB_Master --> DB_Slave1[(Postgres Replica 1)] DB_Master --> DB_Slave2[(Postgres Replica 2)] end class LB tintRose class DB_Master tintIndigo class Cache tintAmber

API report flow

Mermaid

sequenceDiagram participant User participant UI as Client Application participant API as Backend Service User->>UI: Clicks "Generate Report" UI->>API: POST /api/v1/reports/pdf Note right of API: API processes data... API-->>UI: Returns 200 OK (Report ID: 12345) UI-->>User: Shows "Download Ready" Notification

State transition

Inline SVG

No viewBox attribute

Inline SVG

Analytics

Mermaid

pie title Language Usage "JavaScript" : 70 "CSS" : 20 "HTML" : 10

Performance stress test

2,500 nodes

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

Remember zoom

Mermaid

flowchart LR A[Open] --> B[Zoom and pan] B --> C[Close] C --> D[Open again] D -. same view .-> B

This page sets rememberZoom: true. Open this diagram, zoom, pan or rotate, then close it. Open it again and it comes back the same way. A page reload starts fresh.

Meeting mode and share links

Mermaid

flowchart LR P[You, sharing your screen] -->|M| L((Laser dot)) P -->|L| U[Share link] U --> T[Your team opens the same view]

In fullscreen, press M for a red dot that follows your pointer, and the cursor hides. Press L to copy a link that opens this diagram at the same zoom, position and rotation. Both are also in the ☰ menu.

Security: an inline handler

Inline SVG

The node carries an onclick handler. Open the diagram fullscreen and click the node. DiagView cleans the copy it shows in fullscreen, not the diagram on this page. Strict and Permissive both remove every on* attribute from that copy, so the click does nothing. Off keeps the SVG as written, so the handler runs. The node fills with the accent colour and the label reads "Handler ran".

DiagView makes a fresh copy each time fullscreen opens, so a new Security choice applies from the next open. Strict also drops SMIL animation and CSS that could run script or load remote files. Permissive keeps both, apart from animations that rewrite links or handlers.

Why choose this layout?

Pick it when every diagram needs a visible title.

A toolbar above each diagram

A bar above each diagram holds the title and the copy, download and fullscreen buttons. With a mouse it appears on hover or keyboard focus. On touch screens it is always shown.

Keyboard and screen reader ready

Every button has a label and a visible focus ring, and the whole toolbar works from the keyboard.

A title on every diagram

The bar shows each diagram's data-title. Exported files get the same name.

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

Render Mermaid first, then start DiagView.

app.js

// With Mermaid, render it first
await mermaid.run();

DiagView.init({
  diagramSelector:
    '.mermaid, .diagram',
  layout: 'header',
  showKeyboardHelp: true,
  highResScale: 4
});

<!-- Or set it for one diagram -->
<div
  class="mermaid"
  data-diagview-layout="header"
>
  graph TD; A-->B;
</div>

Compare all layouts Try the off layout