Skip to content

Mermaid Diagrams ​

md2cf automatically detects Mermaid code blocks in your Markdown and renders them to PNG images that are uploaded as Confluence page attachments.

How it works ​

  1. md2cf scans the Markdown for ```mermaid fenced code blocks.
  2. Each block is rendered to a PNG image using the bundled mermaid-cli (mmdc).
  3. The PNG is uploaded as an attachment to the Confluence page.
  4. The code block is replaced in the ADF output with an inline image and a collapsible "View Mermaid Source Code" expand block.

If rendering fails for a particular block, the expand block is still inserted with an error message so the source code is not lost.

Example ​

A Markdown file containing:

md
```mermaid
graph LR
  A[Markdown] --> B[ADF]
  B --> C[Confluence]
```

will produce a rendered PNG diagram on the Confluence page with a collapsible section showing the original Mermaid source.

mmdc resolution ​

md2cf searches for the mmdc binary in this order:

  1. Sibling to the md2cf binary — npm places all dependency binaries in the same .bin directory.
  2. CWD node_modules/.bin — covers development and monorepo scenarios.
  3. Global PATH — fallback if mmdc is installed globally.

If mmdc cannot be found, mermaid blocks are left as-is (no rendering occurs).

Error handling ​

  • Each diagram has a 60-second render timeout.
  • Temporary .mmd and .png files are cleaned up after each render.
  • Failed renders insert an expand block titled "Mermaid Source (render failed: ...)" so the source is preserved.

Released under the MIT License.