Back to Blog

How to Natively Embed Mermaid Diagrams in Markdown

Published on June 5, 2026 • 5 min read

The killer feature of Mermaid.js isn't just its syntax; it's the fact that major platforms now support it natively. You don't need to export PNGs and upload them to your repository anymore.

Markdown Code Blocks

In standard Markdown, you use triple backticks to create a code block. To tell the parser that the block contains Mermaid syntax, you simply use the language identifier mermaid.

```mermaid
pie title Pets Adopted
  "Dogs" : 386
  "Cats" : 85
  "Rabbits" : 15
```
  

Where Does This Work?

The Workflow

When drafting complex diagrams, writing them directly in GitHub can be tedious because you have to constantly preview the file. A better workflow is to use a dedicated live editor like Mermaid Preview. Draft your diagram, see the real-time result, and when you're happy, copy the code and paste it into your Markdown file.