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
- md2cf scans the Markdown for
```mermaidfenced code blocks. - Each block is rendered to a PNG image using the bundled mermaid-cli (
mmdc). - The PNG is uploaded as an attachment to the Confluence page.
- 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:
- Sibling to the
md2cfbinary — npm places all dependency binaries in the same.bindirectory. - CWD
node_modules/.bin— covers development and monorepo scenarios. - Global PATH — fallback if
mmdcis 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
.mmdand.pngfiles are cleaned up after each render. - Failed renders insert an expand block titled "Mermaid Source (render failed: ...)" so the source is preserved.