Using Mermaid Diagrams in Confluence, Notion, and Team Tools

Mermaid in Team Collaboration Tools

Beyond GitHub and documentation sites, Mermaid diagrams can be embedded in the tools your team uses daily. Here's how to integrate Mermaid into the most popular collaboration platforms.

Notion

Notion supports Mermaid natively:

1. Type /code to insert a code block
2. Select Mermaid from the language dropdown
3. Paste your Mermaid code — it renders inline

flowchart LR
    Notion[Notion Page] --> Mermaid[Mermaid Block]
    Mermaid --> Render[Live Preview]

Confluence

Confluence does not natively support Mermaid. You have two options:

1. Marketplace plugin — Install "Mermaid Diagrams for Confluence" from the Atlassian Marketplace. It adds a macro that renders Mermaid syntax.
2. HTML macro — Use the HTML macro to embed the Mermaid JavaScript library and render diagrams client-side:

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<div class="mermaid">
flowchart TD
    A --> B --> C
</div>
<script>mermaid.initialize({startOnLoad: true});</script>

Jira

Jira does not support Mermaid in issue descriptions. Workarounds:

• Attach SVG images — pre-render your diagram to SVG and attach it to the issue
• Link to a live editor — paste a link to mermaid.live with the encoded diagram
• Use Confluence — create the diagram in a Confluence page and link it from the Jira issue

Slack

Slack cannot render Mermaid directly. Instead:

1. Render the diagram in the Mermaid viewer tool
2. Export as PNG
3. Upload the image to Slack

Microsoft Teams & SharePoint

Teams does not render Mermaid, but you can:

• Embed a Mermaid live editor URL as a tab
• Use Power Automate to auto-generate diagram images

General Tips

• Standardize on one approach per team to avoid confusion
• Keep diagram source in version control even if you share rendered images
• Use a shared snippet library so team members can reuse common diagram patterns