Flowchartio
Sign inTry it freeTry free

Mermaid flowcharts

Mermaid in Notion, Obsidian and documentation tools

Notion and Obsidian render Mermaid natively from a code block set to Mermaid. Documentation generators such as Docusaurus and MkDocs support it through an official plugin or extension, while Confluence generally needs a marketplace app.

By Flowchartio · Updated · 2 min read

Notion

Add a code block, set its language to Mermaid, and paste the diagram. Notion offers code, preview and split views for the block, so you can show only the diagram on the page. It is a convenient way to keep procedures and their charts on the same page, for example when you turn an SOP into a flowchart.

Obsidian

Obsidian renders fenced code blocks marked mermaid in reading view and live preview, without any plugin. Because notes are plain Markdown files, the same diagram also renders if the vault is pushed to GitHub; see Mermaid on GitHub and GitLab.

Documentation generators

  • Docusaurus: enable the official Mermaid theme, then use mermaid code blocks in your docs.
  • MkDocs (Material theme): configure the SuperFences extension with a custom fence for Mermaid.
  • Azure DevOps wikis: use the wiki's Mermaid block syntax (::: mermaid … :::).

Check each tool's documentation for the exact configuration of your version.

Confluence

Confluence does not render Mermaid out of the box. Teams usually install a marketplace app for Mermaid, or insert the diagram as an image. For the image route, an SVG stays sharp; see choosing between PNG, SVG and Mermaid.

Exporting from a knowledge base

If a page with a Mermaid diagram is exported to PDF or shared with people outside the tool, check how the diagram comes out: some exports keep the rendered picture, others only the code. When in doubt, attach an image export as well.

Tips for knowledge bases

  • Keep one diagram per page section, next to the text it illustrates.
  • Use the same lane names as your org chart so readers recognise owners.
  • When the process changes, edit the code block rather than uploading a new image.
  • Use the core flowchart syntax only; renderers differ in the Mermaid version they ship.

To create the diagram in the first place, write it with the syntax cheat sheet or describe the process and export it from an AI generator.