Enhanced Markdown for Confluence: Mermaid, LaTeX, and Code — All Rendered, All Inside Atlassian

[#1]

A few weeks ago a community user named Andreas asked a question I'd seen variants of several times before:

Copy markdown code into Confluence with embedded Mermaid code

He'd installed a Mermaid viewer, pasted Markdown containing Mermaid code blocks, and expected the diagrams to render. They didn't. Native Confluence splits Markdown import and Mermaid rendering into two separate systems that don't talk to each other. The /mermaid macro works on its own. Markdown import works on its own. Paste Markdown containing ```mermaid blocks and the importer treats them as plain code — no diagrams.

We replied to Andreas's thread pointing at the app we'd built to solve it. This post is the longer version of that reply — what the editor actually does, what it renders, and why a Markdown macro can be the center of a much larger content workflow.

I'm Simon from NGPILOT, and here's what we shipped.

---

What Enhanced Markdown renders, in one screenshot

Split view — Markdown on the left, live rendered preview on the right. A Mermaid sequence diagram, a syntax-highlighted code block, and a LaTeX formula, all updating as you type:

That's the whole pitch. Everything below is detail.

---

Mermaid — full coverage, including ZenUML

Most Markdown editors either skip Mermaid entirely or ship a thin subset. We ship the full Mermaid v11 install — all 26+ diagram types — and on top of that we register the ZenUML external diagram module, so ```zenuml fences render too. The same library our standalone Mermaid plus Diagrams for Confluence app uses — bundled into a Markdown macro.

Write the fence, get the diagram, in the live preview and on the published page:

```mermaid
flowchart TD
    A[Sprint Start] --> B{Stories Ready?}
    B -->|Yes| C[Start Development]
    B -->|No| D[Refine Backlog]
    C --> E[Code Review]
    E --> F{Approved?}
    F -->|Yes| G[Deploy]
    F -->|No| C
```

If you've ever pasted a Markdown doc into Confluence and watched the diagrams die at the importer, this is the fix.

---

Math — KaTeX and LaTeX

Two math renderers, both client-side, both work without any external service:

• KaTeX — fast, for everyday equations. Write a ```katex fence or use inline $E = mc^2$ and block-level $$...$$ delimiters.
• LaTeX/MathJax — full LaTeX coverage for heavier notation. Fenced math (```math, ```tex, ```latex) goes through a locally bundled MathJax, and any inline $...$ / $$...$$ that Quikdown's built-in handler misses is picked up by a MutationObserver pass after render.

$$
P(A|B) = \frac{P(B|A) \cdot P(A)}{P(B)}
$$

KaTeX when you want speed, LaTeX when you need the full package. You don't have to pick one — both are in the editor at the same time.

---

Code blocks — highlight.js with theme-aware styles

Code blocks render via highlight.js with 190+ languages supported. Themes switch automatically with Confluence — GitHub light when the page is light, GitHub Dark when it isn't. No configuration, no theme picker, no flash of unstyled code when you toggle.

function renderDiagram(source) {
  return window.mermaid.render('diagram', source);
}

---

GFM tables, lists, task lists, and the rest

Full GitHub-Flavored Markdown, including the parts that trip up basic Markdown importers:

• Tables with alignment, header rows, and pipe syntax
• Task lists with - [ ] and - [x] that render as checkboxes in preview
• Strikethrough, autolinks, and footnotes
• Nested lists with correct indentation
• Blockquotes with multi-line support

If you've authored it in another Markdown tool, it'll paste in and render the same way.

---

Three editing modes — pick the surface that fits

The editor header has three modes, synced live as you switch:

• Source — pure Markdown, fastest for keyboard-driven editing
• Split — code on the left, live preview on the right, scroll-synced
• Preview — what readers see, no code visible

Pick once and the editor remembers your choice next time you open a macro.

Split mode scrolls both panes together

In split mode, scrolling one pane moves the other to match — bidirectionally, in real time. Scroll the source and the preview tracks proportionally; scroll the preview and the source follows. No more "where am I in the doc" drift when you jump between writing and reading. Proportional mapping means very long tables or short code blocks may drift a bit (we picked simple-and-fast over a heavy line-mapping engine), but for typical docs with prose, code, and diagrams, the panes stay aligned as you scroll.

---

Upload a .md file to start editing

Already have Markdown files on disk? The Upload MD button in the header reads any .md, .markdown, or .text file from your machine and drops the contents straight into the editor. No copy-paste, no intermediate conversion, no drag-and-drop juggling. Export from your docs repo, upload, save the macro.

---

Dark theme, automatic

The editor watches Confluence's theme attribute via MutationObserver. When Confluence switches to dark mode, the editor follows immediately — Mermaid diagrams, code blocks, math, and the editing surface all re-theme in place. No flicker, no cursor loss, no reloading the editor instance.

---

Runs on Atlassian — certified, zero external permissions

Every feature above renders inside the page, inside Atlassian. The manifest lists zero external permissions. Mermaid diagrams, math, code highlighting, the editor itself — none of it phones home to a CDN, a third-party server, or anywhere else.

Why this matters: a lot of Markdown editors pull their renderers from external services on every page view. Diagram content, code, formulas leave the browser and come back as rendered output. For a personal wiki that's fine. For a regulated-industry Confluence instance — finance, healthcare, government, EU post-Schrems II — it's an instant fail in procurement.

"It can't leak — there's nothing in the manifest that would let it" tends to land better in security review than "trust us, it doesn't."

---

Enhanced Markdown as the center of a content workflow

A Markdown editor that renders everything is also a Markdown editor that can hand content off to other tools. If your use case is bigger than a single macro, these are the adjacent apps in our catalog — they share the same Markdown posture and the same Runs on Atlassian certification:

• Mermaid plus Diagrams for Confluence — the full Mermaid engine from Enhanced Markdown, as a standalone macro. 26+ diagram types, full template library, live editor. For pages where Markdown isn't the right surface but diagrams still are.
• Modern Importer & Exporter for Confluence — convert Markdown to Atlassian Document Format (ADF) and back. Bulk-import a docs repo as native Confluence pages, or export pages back to Markdown for a static-site build. The right tool when you want a one-way conversion rather than a live Markdown macro.
• Modern Code Blocks for Confluence — 85+ language syntax highlighting with 50+ themes, diff view, window chrome. When you want code blocks to be a first-class design element on the page, not just rendered output.

Three apps, one stack: write Markdown, render diagrams, convert to native format. Enhanced Markdown is the editor; Mermaid plus and Modern Code Blocks are the specialists; Importer & Exporter is the bridge.

---

Where to try it

Enhanced Markdown for Confluence on the Marketplace. Free to try.

If you're the Andreas who asked the original question — or if you've hit the same wall — this is the answer.