Two engines, one fenced code block
Write the fence on the left, get the diagram on the right. Both were rendered by your browser just now — no server, no CDN, nothing sent anywhere.
PlantUML ```plantuml
```plantuml title="Authentication sequence"
@startuml
actor User
participant Browser
participant API
User -> Browser: Sign in
Browser -> API: POST /sessions
API --> Browser: Access token
Browser --> User: Signed in
@enduml
```
Graphviz ```dot
```dot title="Build pipeline"
digraph {
rankdir=LR;
node [shape=box, style=rounded];
src -> build;
build -> test;
test -> deploy;
test -> src [label="fix", style=dashed];
}
```
This page is a React component, not Markdown, so it uses the packaged @theme/PlantUmlDiagram component directly. In .md and .mdx you only ever write the fence. See the Graphviz gallery for layout engines, clusters and dark-mode behaviour.
A viewer, not just a picture
A diagram worth drawing is usually too big for a column of text. Every diagram comes with a viewer — zoom and pan, a maximized view fitted to the screen, a minimap, text search, and links that point at a single node. Try them on the graph below.
Maximize and Fit
Maximizing opens the diagram fitted to the screen, however large it is. Fit brings that view back once you have zoomed or panned away from it.
Minimap
A small copy of the diagram with a rectangle marking what you are looking at. Press or drag anywhere on it to jump there.
Search
Find text inside the rendered diagram. Every match is highlighted, and stepping through them centres the view on each one in turn.
Deep links
A #graph?highlight-node=… URL names one node. Paste it into a ticket and the reader lands on that node, highlighted and centred — and a node can carry such a link itself, so one diagram opens another.
Deep links work right here, on this page: highlight the Orders DB (by an explicit id) or the search service (by its plain DOT node name). Both scroll the diagram into view, mark the node and centre on it. See Deep links for the PlantUML spelling and for links that cross pages.
No server, no Java
The official @plantuml/core engine runs in the browser. Nothing is sent to plantuml.com, Kroki, or any other service — your diagram source never leaves the page.
No CDN
The engine is copied into your own build output and served from your own origin, under your baseUrl. This site proves it: it is deployed under a project path.
Just a fenced code block
Write ```plantuml — or ```dot — in any .md or .mdx file. No swizzling, no imports, no per-page components.
Graphviz too, for free
PlantUML already uses Graphviz for its own layout, so dot fences reuse an engine your site was downloading anyway — Graphviz support costs zero extra bytes.
Loaded only where needed
The runtime is fetched lazily, only on pages that actually contain a diagram, and only once per session. A page with only dot diagrams never fetches the much larger PlantUML engine at all.
Install
npm install @matfsw/docusaurus-plantuml-plugin
// docusaurus.config.ts
plugins: [
['@matfsw/docusaurus-plantuml-plugin', {theme: 'auto', lazy: true}],
],
That is the whole setup. See the demos for the full option list and every diagram type.