DiagView
GitHub
Available on npm

DiagView

Transform any static SVG into a fully interactive diagram viewer.

Zoom, pan, search, export and fullscreen for Mermaid, Graphviz, PlantUML and draw.io. Framework-agnostic, with two script tags, Panzoom and DiagView.

Star on GitHub Explore layouts
Input
Mermaid, Graphviz, PlantUML, draw.io
Layouts
Header bar, floating or off
Export
SVG, PNG, JPEG, WebP, PDF, copy
Install
Two <script> tags
Fig. 1 Live diagramlayout: header
This diagram is live. Click or tap it to open fullscreen. Press ? inside for every shortcut
Keyboard
  • + Zoom in
  • - Zoom out
  • arrows Pan
  • Space / 0 Reset
  • F Search
  • M Meeting
  • R Rotate
  • L Share
  • T Text select
  • ? Shortcuts
  • Esc Close

Flexible layouts

Choose the mode that best fits your user experience.

Fig. 2.1layout: header

Header layout

A bar above each diagram holds its title and the copy, download and fullscreen buttons.

View live example
Fig. 2.2layout: floating

Floating layout

The buttons float under the diagram. With a mouse they show on hover.

View live example
Fig. 2.3layout: off

Off layout

No buttons at all. Click or tap the diagram to open it fullscreen.

View live example

More demos

Layout compare

All 3 layout modes side by side using per-diagram data-diagview-layout overrides on one page.

Compare layouts

Performance test

A grid of 2,500 nodes, and a slider from 100 to 3,000. Open it and check that zoom and pan stay smooth.

Run stress test

React + StrictMode New

A real React 18 tree mounting, unmounting and replacing diagrams. Shows the one DOM-ownership rule for component frameworks.

Open React demo

Silent watermarks New

Add non-intrusive branding to your exported images. Invisible in the UI, present on download.

Try silent branding

Built for performance

Tested on diagrams with 2,500 nodes.

Fast on big diagrams

Zoom and pan stay smooth on the 2,500 node demo.

Deep search

Press F in fullscreen and type. DiagView outlines the nodes that match and dims the rest.

High-res export

Save diagrams as sharp SVG, PNG, JPEG, WebP or PDF, or copy them to the clipboard.

Brand aware

Automatically syncs with your system's light and dark mode and supports custom accent colours.

Security modes

DiagView never changes the diagram on your page. These three copies show what fullscreen and exports get in each mode.

security: strictdefault

Strict

For any diagram, and always for ones other people wrote or uploaded.

Removed
    security: permissive

    Permissive

    For your own diagrams that animate.

    Removed
      security: off

      Off

      Only for your own diagrams whose click handlers you need in fullscreen.

      Removed

        Each copy is the same small SVG passed through DiagView.utils.sanitizeSVG(svg, mode). Click the button and the link in each one. Only the off copy runs the diagram's own code. Safari may not run a javascript: link inside an SVG at all, so there only the button reacts. Choosing a mode

        Quick start

        Get up and running in seconds.

        1. Add PanzoomDiagView uses it for smooth zoom and pan.
        2. Add DiagViewWith no options it sets itself up on every .diagram, .chart and [data-diagram]. For Mermaid, set diagramSelector.
        3. Configure if you wantAdd data-diagview-no-auto-init and call DiagView.init() yourself.
        index.html 
        <!-- 1. Required dependency -->
<script
  src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"
></script>

<!-- Option A: starts on its own -->
<script
  src="https://unpkg.com/diagview@1.1.0/dist/diagview.umd.min.js"
></script>

<!-- Option B: your own options -->
<script
  src="https://unpkg.com/diagview@1.1.0/dist/diagview.umd.min.js"
  data-diagview-no-auto-init
></script>
<script>
  DiagView.init({
    layout: 'floating',
    accentColor: '#ea580c'
  });
</script>

        Common questions

        Short answers. Each one links to the full answer in the FAQ.

        Why doesn't the diagram change colour when I pick a canvas theme?

        Canvas Theme changes only the background behind the diagram. The diagram keeps the colours its author drew it with.

        Theming in the FAQ

        Why do the diagrams on this page change with the theme button?

        This demo draws its Mermaid diagrams again when you switch the page theme or pick an accent. DiagView does not redraw diagrams itself, and the FAQ shows the code to do it.

        Theming in the FAQ

        My diagram text is hard to read on a dark canvas.

        In fullscreen, open the ☰ menu and pick Readable under Text Colours. DiagView recolours only the text that is hard to read and keeps its hue.

        Theming in the FAQ

        How do I change the accent colour?

        Pass accentColor to init(), or set the --diagram-accent CSS variable. The accent colours DiagView's buttons and minimap, not the diagram.

        Theming in the FAQ

        Do exports look like the viewer?

        Exports look like the viewer. With Readable on, the labels get the same readable colours. A transparent export keeps the author's colours. The background is the canvas colour unless you tick Transparent. During a search the export keeps its dimming and outline unless exportSearchHighlight is false. A watermark, if you set one, shows up only in exports.

        Export in the FAQ

        Does it work with diagrams other than Mermaid?

        Yes. DiagView works with any SVG drawn inline on the page, such as Graphviz, PlantUML, D3, draw.io or a hand-written SVG. Draw the diagram first, then start DiagView.

        General in the FAQ