A3E Diagrams & Markdown for Confluence

Two macros. Write a diagram as text and see it drawn as a sharp vector graphic, or paste a whole Markdown document and have it render as the page it was meant to be — diagrams and all.

Everything is rendered in your own browser, inside your Confluence page. Nothing is sent to A3E or to anyone else, and there is no account to create with us.

Mermaid Diagram macro

Add a diagram

1. In the Confluence editor, type /Mermaid and choose Mermaid Diagram.
2. The editor opens with an example. Paste your own Mermaid code on the left, or pick another example from the list. The drawing on the right updates as you type, and any syntax error is shown with its line.
3. Choose Save, then publish the page.

To change a diagram later, edit the page, select the diagram and choose the edit (pencil) button.

Read a large diagram

The controls appear when you point at a diagram. Normal page scrolling is never taken over: zooming with the wheel needs Ctrl or Cmd.

Options

• Theme: "Match Confluence" follows the page (dark pages get Mermaid's dark theme). Default, Neutral, Forest, Dark and Base are also available.
• Align: center or left.
• Max height: the tallest the diagram frame may grow on the page before you scroll inside it (default 900 px).
• Caption: an optional line of text under the diagram.

Supported diagrams

Everything in Mermaid 12, including flowcharts, sequence, class, state, entity relationship, Gantt, pie, mindmap, timeline, Git graph, user journey, quadrant, XY chart, Sankey, block, packet, architecture and kanban diagrams. Mermaid's own syntax reference is at mermaid.js.org.

Markdown macro

For a whole document rather than a single diagram: release notes, a README pasted from a repository, runbooks, meeting notes, an architecture write-up.

1. In the Confluence editor, type /Markdown and choose Markdown.
2. Paste your Markdown on the left, or start from one of the examples. The rendered page appears on the right as you type, and the status line counts the words and the diagrams it drew.
3. Choose Save, then publish the page.

What it renders

• GitHub-flavoured Markdown: headings, paragraphs, bold, italic, code spans, strikethrough, links, images, quotes, horizontal rules, ordered and unordered lists.
• Tables, with alignment, scrolling sideways when they are wider than the page.
• Task lists. - [ ] and - [x] draw tick boxes. They show state; they are not editable from the page.
• Code blocks with syntax highlighting in 29 languages (bash, C, C++, C#, CSS, diff, Dockerfile, Go, GraphQL, Groovy, INI/TOML, Java, JavaScript, JSON, Kotlin, Markdown, PHP, PowerShell, Python, Ruby, Rust, Scala, shell, SQL, Swift, TypeScript, XML/HTML, YAML, plain text), with the language labelled. An unknown language still renders, unhighlighted.
• Mermaid diagrams inside the document. A ```mermaid fence is drawn as a diagram where it stands. This is the thing most Markdown macros do not do.
• Maths with KaTeX: inline $x$, display $$ ... $$, or a ```math fence. A lone dollar sign in a price is left alone.
• YAML front matter (a --- block at the very top) is recognised as metadata and left off the page.

Options

• Diagram theme: as for the Mermaid macro; "Match Confluence" follows the page.
• Line breaks: "Markdown rules" (a single newline continues the paragraph) or "Every newline" (each newline is a line break), for text written in a chat or a ticket.
• Border: show or hide the frame around the rendered document.
• Max height: beyond this the macro scrolls inside itself. The full-screen button opens the whole document.
• Heading: an optional line of text above the document.

What it does not do

Raw HTML written inside the Markdown is shown as text, not rendered: that is how scripts and tracking pixels are kept off your pages. Content inside any Confluence app macro, this one included, is not picked up by Confluence's page search; if you need the text indexed, keep it as ordinary Confluence content. Images load from the URL you give; the app does not upload or host them.

PDF and Word export

Mermaid Diagram macro: an export has no browser in which to draw, so the exported page shows the caption and the diagram's Mermaid code with a note to open the page in Confluence to see it drawn.

Markdown macro: the Markdown is converted into Confluence's own document format, so a PDF or Word export keeps the real headings, tables, lists, quotes, code blocks and links. A ```mermaid fence exports as its code block. Images export as a link to the image address.

Security

Diagrams are drawn in Mermaid's strict mode: scripts, click handlers and javascript: links written into a diagram do not run. Markdown is sanitised before it reaches the page: <script>, <iframe>, <form>, <style>, inline event handlers, and javascript:, data: and vbscript: links are all removed. Both macros are tested against those cases directly on every build.

The app runs on Atlassian's Forge platform and makes no calls to any outside server. Your diagrams and documents stay in your Confluence pages.

Plans

Free for Confluence sites with up to 10 users. Larger sites pay through the Atlassian Marketplace at the price shown on the listing, with the usual Atlassian free trial.