Ask any AI assistant for an architecture diagram, a sequence diagram or an ER model and you get Mermaid back. It is the lingua franca now: Claude writes it, ChatGPT writes it, GitHub renders it in READMEs, and your engineers paste it into pull requests without thinking about it.
Then someone pastes it into Confluence and it looks terrible. Fuzzy at any zoom, a fixed box that does not fit the page, and when the page is exported to PDF the diagram is missing or wrong. The diagram was fine. The rendering was not.
Why it goes blurry
Most diagram macros for Confluence take the same shortcut: render the diagram once, server side, to a raster image at a fixed pixel size, and embed that. Everything that annoys you follows from that one decision.
- It is a bitmap. Zoom in and you are enlarging pixels. On a high-density display it is soft before you even zoom.
- The size is decided at render time, not at read time, so a wide sequence diagram gets squeezed into a box that was chosen by the macro.
- It often needs a render server. Which means your diagram source leaves your tenant, which means a security review, which is how a two-minute diagram becomes a two-week procurement question.
- The engine lags. Mermaid ships quickly. A macro pinned to a version from two years ago rejects syntax your assistant just wrote.
What a diagram macro has to do instead
- Render to SVG, in the browser. Vector scales to any size and stays sharp, and rendering client side means the source never leaves the tenant.
- Let the reader zoom. A dense diagram is unreadable in a page column no matter how sharp it is. Full screen with scroll-to-zoom and drag-to-pan is the fix.
- Survive export. PDF and Word exports do not run your JavaScript. If the macro renders only in the browser, the export loses the diagram. The way around it is to attach a rendered image to the page when the diagram is saved, so the exporter has something real to place.
- Accept what people actually paste. A fenced code block copied from a chat, or a mermaid.live link, should just work rather than needing to be unwrapped by hand.
- Follow the theme. A white diagram in a dark-mode page is a glare bomb.
The app
Crisp Diagrams renders Mermaid, PlantUML, D2, DBML and Excalidraw in your browser inside Confluence Cloud. Vector SVG that fills the page, click for full screen with scroll-to-zoom and drag-to-pan, live preview with errors that name the line, light and dark theme following, and a PNG attached on save so PDF and Word exports show the diagram.
PlantUML runs in the browser too, with no Graphviz install and no render server. No account, no diagram limit, no external servers, and it is free. App details and screenshots.
Written by Abaho Katabarwa at Katabarwa Labs. We build small, single-purpose Atlassian and Azure tools that run entirely inside your own tenant. Questions: support@katabarwalabs.dev.