Mermaid Online
ToolsSign in+10

Guide · Mermaid in Obsidian

How to Use Mermaid Diagrams in Obsidian

Obsidian draws Mermaid diagrams from a code block in any note, with no plugin. Since version 1.15 it renders them with Pele, its own Mermaid renderer, so diagrams pick up your theme's colours and fonts. When a diagram has to leave the vault — a slide, a Google Doc, a chat message — export it here as a PNG or SVG in the style you choose.

No plugin needed in Obsidian · No signup · No watermark · Rendered in your browser

Does Obsidian support Mermaid?

Yes — built in

Type a code block with the language set to mermaid and Obsidian renders it as a diagram: flowcharts, sequence diagrams, timelines, mindmaps and the other Mermaid types. Obsidian 1.15, released on 2 November 2026, replaced the bundled Mermaid library with Pele, a renderer the Obsidian team wrote and open-sourced. Diagrams render faster, follow the theme's colours and fonts, fit the width of the note, and can be zoomed and panned when they are scaled down. The Show Mermaid diagrams in notes setting is gone: Pele cannot run code, so diagrams always show.

Write a Mermaid diagram in Obsidian, then share it as an image

  1. 1

    Add a mermaid code block

    In a note, type three backticks followed by mermaid, write the diagram on the lines below, and close the block with three backticks. Obsidian renders it as soon as the cursor leaves the block.

  2. 2

    Link notes from the diagram

    Attach the internal-link class to nodes whose names match notes — for example class Biology,Chemistry internal-link; — and clicking the node opens that note.

  3. 3

    Copy the code to share it

    To use the diagram outside Obsidian, copy the code inside the block and paste it into the editor below. A theme-coloured screenshot looks different in every vault; an export does not.

  4. 4

    Export PNG or SVG

    Pick a style, export PNG at 2x for documents and chat, or SVG for a web page. Drop the PNG back into the vault and embed it with ![[diagram.png]] when you want a fixed image next to the live block.

Export your diagram here

Paste your Mermaid code below, pick a style, and download the image. Everything renders locally in your browser — no signup, no watermark.

Paste or edit Mermaid code
Replace the sample below, or load another example.
Load example
Paste Mermaid code here. Preview and export load locally in your browser.
Live previewSample preview · Clean Docs

Write

Preview

Export

Docs Asset

Render & export

Export controls activate after your diagram renders locally.

Flowchart
Mode
Default renderNative MermaidOptimized exportStyled download
Export style
Clean DocsGitHub READMEGitHub DarkTransparent DocsWarm Editorial✦ ProWhiteboard Sketch✦ ProAurora Noir✦ ProBlueprint✦ ProChampagne✦ ProEmerald Suite✦ ProEditorial✦ Pro
Scale
1x2x4x
Or exact width, e.g. 1200px wide
Output: White · comfortable padding
Size: calculated after render
Filename: mermaid-flowchart-white-2x.png

Code block, PNG or SVG?

Code block — inside the vault

Keep the Mermaid block for diagrams you edit. It stays text, so it diffs and syncs like the rest of the note, and Obsidian redraws it in your theme.

PNG — when it leaves Obsidian

Slides, Google Docs, chat and email take a PNG everywhere. Export at 2x so labels stay sharp, with a transparent background for coloured slides.

SVG — for a published page

For a blog or docs site built from your notes, SVG stays sharp at any width. Keep PNG for tools that do not take SVG uploads.

Open a .mmd or Markdown file in the Mermaid viewerExport every diagram from a Markdown noteMermaid timeline syntaxMermaid mindmap syntaxMermaid in NotionMermaid in GitHubMermaid themes, including Mermaid 12

FAQ

Questions about this workflow

Does Obsidian support Mermaid diagrams?+

Yes, with no plugin. Write a code block whose language is mermaid and Obsidian renders the diagram in the note. Since Obsidian 1.15 the rendering is done by Pele, Obsidian's own Mermaid renderer.

What is Pele in Obsidian?+

Pele is the Mermaid renderer the Obsidian team built and open-sourced under the MIT licence. Obsidian 1.15 uses it in place of the Mermaid library: it reads the same Mermaid syntax, renders faster, and draws diagrams in the colours and fonts of your theme.

Why do my Mermaid diagrams look different after updating Obsidian?+

Obsidian 1.15 switched from the Mermaid library to Pele, which styles diagrams with your theme. Your code keeps working, but CSS snippets or plugins written against Mermaid's own SVG classes may stop applying, because the SVG now carries Pele's classes.

How do I link to other notes from a Mermaid diagram in Obsidian?+

Give the nodes the internal-link class, for example class Biology,Chemistry internal-link; at the end of a flowchart. Nodes whose text matches a note name then open that note when clicked.

How do I export a Mermaid diagram from Obsidian as an image?+

Copy the code from the mermaid block, paste it into the editor on this page, choose a style and download PNG, SVG, JPG, WebP or PDF. The export looks the same for everyone, whatever theme their vault uses.

Can Obsidian open .mmd files?+

Obsidian renders Mermaid inside Markdown notes rather than standalone .mmd files. Paste the file's contents into a mermaid code block, or open the file in the Mermaid viewer, which renders .mmd and Markdown files in your browser.

Which Mermaid diagram types does Obsidian support?+

Obsidian's help names flowcharts, sequence diagrams and timelines among them, and Pele is built to read current Mermaid syntax. If one diagram type will not render, paste the code here to check whether the problem is the syntax or the renderer.

Sources