50 posts tagged with "mermaid"

Confluence chat can write your page, summarize the thread, and answer questions about the space. What it couldn't do — until now — is draw. If you asked for "a flowchart of our deployment process," you got a text description of a flowchart, and someone still had to open an editor and build it.

The AI agent in Mermaid Plus Diagrams & AI Agent for Confluence closes that gap: it creates, reads, updates, and converts Mermaid diagrams directly on Confluence pages and blog posts, from chat.

Every Confluence team ends up choosing a diagram tool, and most start by asking the wrong question: does it support Mermaid? These days, two answers exist. Mermaid Plus Diagrams & AI Agent for Confluence is built around Mermaid — all 30 Mermaid v12 diagram types, a code editor with live preview, one-click templates for every type, and a Rovo AI agent that works on the page. draw.io is the most-installed diagramming app on the Atlassian Marketplace, with deep shape libraries, whiteboarding, and a Mermaid importer added to its editor.

Both are good tools. This guide compares how they behave in Confluence specifically — how a diagram is created, what is stored on the page, what happens when you need to change it six months later, and what it costs.

The diagrams live in the repository. They were written in Mermaid, they are reviewed in pull requests next to the code they describe, and they are correct as of the last commit. The documentation, however, lives in Confluence — because that is where the rest of the team reads it. So somebody copies a Markdown file across, pastes it into a Confluence page, and the flowcharts, sequence diagrams and ER models arrive as grey boxes of unrendered code.

Everyone has hit this. It is one of the most common Confluence complaints, and the usual workarounds are worse than the problem: export every diagram to PNG and re-upload them (now they rot), keep the diagrams in an external tool and paste links (readers need a second account, and the links break), or build a browser extension to force rendering on paste.

There is a better answer, and Mermaid 12 makes it better still.

The integration doc says "the client calls the API, the API validates and responds" — four words, zero contracts, and the onboarding engineer asks "with what headers, in what order, and what if auth fails?" The code has the truth; the wiki has a paragraph. An API that can't be read as a transcript is an API nobody can safely operate.

Quick answer: document API flows in Confluence as Mermaid — sequenceDiagram for request/response order, packet-beta for wire-format frames, ZenUML for branch-heavy async flows — rendered by Mermaid Plus Diagrams & AI Agent for Confluence. Each diagram type answers a different reader: what order, what's on the wire, what branches. This post gives you three copy-paste examples.

The onboarding doc says "check the architecture diagram" and the architecture diagram shows a monolith from 2023 that the team decommissioned in the spring. Nobody is lying — the draw.io file lives on one person's laptop, and the wiki holds a screenshot nobody owns. An architecture that only exists as a static export rots silently, because the thing you would edit is invisible to review.

Quick answer: document system architecture in Confluence as Mermaid text — C4Context for the system in context, architecture-beta for the deployment, block-beta for the topology you want laid out precisely — rendered by Mermaid Plus Diagrams & AI Agent for Confluence. Every level stays an editable code block, so the wiki's architecture changes in the same review that changes the system. This post gives you three copy-paste examples.

The quarterly review loads a 14-tab spreadsheet to answer one question — "where do we actually spend our engineering time?" — because the wiki charts are stale screenshots from last quarter and the numbers table nobody reads. A dashboard is not a spreadsheet: it is the two charts that answer the two questions people keep asking.

Quick answer: build dashboard charts in Confluence with Mermaid pie and xychart-beta charts, rendered by Mermaid Plus Diagrams & AI Agent for Confluence. Pie for shares, XY for trends — both as editable text that refreshes like code. This post gives you three copy-paste examples: an effort-share pie, a weekly trend XY, and a dual-series release dashboard.

A build fails at 4pm, and the fix's pipeline takes 40 minutes to re-run from the top because someone decided every stage needs to re-validate. That wasted hour is not a code problem — it is a documentation problem. Nobody could see the pipeline's shape, so nobody saw the retry loop and the gate that would have caught the failure three stages earlier.

Quick answer: put the pipeline's shape in Confluence as a Mermaid flowchart, rendered by Mermaid Plus Diagrams & AI Agent for Confluence. Text-based, editable, diffable — a pipeline diagram that changes when your pipeline changes. This post gives you three copy-paste examples: the linear stage view, quality gates with retry loops, and the deploy-to-tag gitGraph that records what actually shipped.

Your team grows by two people. The new hires open the wiki and find the architecture doc: a screenshot of a whiteboard, dated 14 months ago, where PaymentService does everything except the thing the diagram says OrderService does. Day-1 onboarding just taught two people the wrong architecture.

Quick answer: keep the architecture in Confluence as a Mermaid class diagram, rendered by Mermaid Plus Diagrams & AI Agent for Confluence and diffs like code. Classes, methods, interfaces, ownership — in editable text that updates when the code does. This post gives you three copy-paste examples: the onboarding service map, interface+implementation modules, and a request-flow sketch.

The meeting asks "who owns this feature?" and the answer is a Venn diagram by hand — drawn on a whiteboard, erased, redrawn, photographed, and lost. Two teams each built a piece of a shared workflow, and "the overlap" is exactly where the bugs and the SQL both landed. A decision framework is only useful while its picture survives the meeting; in Confluence as Mermaid text, it survives.

Quick answer: put decision frameworks in Confluence as Mermaid — venn-beta for set overlap, cynefin-beta for which operating mode a situation needs, quadrantChart for which item goes first — rendered by Mermaid Plus Diagrams & AI Agent for Confluence. Each framework encodes a decision shape, and text keeps the picture attached to the decision record. This post gives you three copy-paste examples.

The bug report says "orders show twice in the report" and the fix takes three days because nobody on the team is sure whether order_lines links to orders on order_id or source_order_id, and both columns exist. The schema is documented — in a schema.md that lists columns as bullets and a diagram that was last exported when the DB was two migrations younger. The join question is exactly the thing an ER diagram answers at a glance, and the thing a bulleted column list cannot answer at all.

Quick answer: document the database schema in Confluence as a Mermaid erDiagram, rendered by Mermaid Plus Diagrams & AI Agent for Confluence. Entities hold keys and attributes; relationship lines carry the cardinality and the join's noun. When the discussion turns to the domain model the code exposes, add a classDiagram on the same page. This post gives you three copy-paste examples.