Silent branding and attribution

Put your name on every export. Watermarks never show in the viewer and appear on every export. Download any diagram below to see them.

Export only Per diagram attributes Mermaid, PlantUML and inline SVG

Live diagrams

Mermaid, maximum coverage

Mermaid
graph TD A[Start] --> B{Process} B -->|Success| C[Done] B -->|Error| D[Retry] D --> B

The most coverage on dynamic diagrams. Five watermarks, one in the centre and one on each edge.

style="both"pos="four-sides"opacity="0.2"

Mermaid diagrams support every watermark style.

PlantUML, hybrid protection

PlantUML
Loading PlantUML...

Centred overlay plus a corner attribution on every PlantUML export.

style="both"opacity="0.2"

Full branding coverage on PlantUML exports.

Four side signature

Inline SVG
FOUR SIDES

Branding on every edge, so it cannot be cropped out.

style="corner"pos="four-sides"

Download to see all four edges.

Hybrid branding

Inline SVG
HYBRID (BOTH)

Overlay plus one corner, a balance for reports.

style="both"pos="bottom-right"

Download to see the centre and corner.

Total lockout

Inline SVG
TOTAL LOCKOUT

A centred overlay plus branding on every edge.

style="both"pos="four-sides"

Download to see all five marks.

Marks in the margin

Inline SVG
EDGE TO EDGE NOTHING COVERED

The four side marks sit in the blank margin around the diagram, so shapes that reach the edge stay clear. A crop to the diagram's edge removes them.

style="corner"pos="four-sides"placement="margin"

Download and compare with the four side card above.

Why silent watermarks

Branding that stays out of the page and goes wherever the exported image goes.

No clutter in the page

The watermark never appears in your site's UI. The page stays clean while every downloaded image carries your mark.

Contrast aware

DiagView picks the colours from the page or canvas theme. The text is white with a black outline on a dark theme and black with a white outline on a light one, so it stays legible on light and dark fills.

Granular control

Turn branding on for every diagram, or use data-diagview-watermark to protect only the diagrams that matter most.

Options

Set a default in the config, then override it per diagram with data attributes.

Watermark
data-diagview-watermark="true" turns it on for one diagram
Text
data-diagview-watermark-text sets the words to stamp
Style
corner, background or both
Position
top-left, top-right, bottom-left, bottom-right, center or four-sides
Placement
diagram by default, or margin to put corner and side text in the blank margin with data-diagview-watermark-placement
Opacity
A number from 0 to 1, 0.2 by default
app.js 
DiagView.init({
  diagramSelector:
    '.mermaid, .diagram',
  layout: 'header',
  watermark: {
    enabled: false,
    text: '© Your Company',
    style: 'corner',
    position: 'bottom-right',
    placement: 'diagram',
    opacity: 0.2
  }
});

<!-- Turn it on for one diagram -->
<div
  class="diagram"
  data-diagview-watermark="true"
  data-diagview-watermark-style="both"
  data-diagview-watermark-pos="four-sides"
>