Blog
Mermaid tutorials & guides
Practical posts on writing Mermaid diagrams — prompting AI assistants, embedding in docs, and getting the syntax right the first time.
-
How to Add Mermaid Diagrams to Confluence and Jira
Confluence and Jira do not render Mermaid on their own. The Marketplace macro route, the image route, and how to keep diagrams editable when the source lives outside Atlassian.
6 min read -
Mermaid in VS Code: Preview, Extensions, and Export
The built-in Markdown preview skips Mermaid blocks. Which extension adds rendering, how to preview a standalone .mmd file, and how to export PNG or SVG from the editor or the command line.
6 min read -
How to Export Mermaid Diagrams to PNG and SVG
Which format to pick for docs, slides, email, and print, how to get a sharp high-resolution PNG, and three export routes: the browser editor, the mermaid CLI, and a build-time plugin.
5 min read -
How to Use Mermaid Diagrams in Notion
Notion renders Mermaid inside code blocks with a live preview. How to turn it on, what the built-in renderer cannot do, and when to paste a PNG or SVG instead.
6 min read -
Mermaid Diagrams in Obsidian: Setup, Styling, and Export
Obsidian renders Mermaid out of the box. How the code block works in Live Preview and Reading view, CSS snippets for theming, and three ways to get the diagram out as an image.
6 min read -
Mermaid vs PlantUML in 2026: Which Should You Use?
Both turn text into diagrams, but they differ in runtime, diagram coverage, layout quality, and where they render natively. A side-by-side comparison with a recommendation for each situation.
8 min read -
Where Does Mermaid Render Natively? Tool Support in 2026
A tool-by-tool list of where a ```mermaid block renders on its own: GitHub, GitLab, Notion, Obsidian, Docusaurus, JupyterLab and more, plus the places that still need an image.
7 min read -
Mermaid Diagram Not Rendering? 10 Common Errors and How to Fix Them
Parse error on line 3, blank output, arrows that turn into circles: the ten Mermaid mistakes behind most broken diagrams, what each error message means, and the one-line fix for each.
9 min read -
How to Generate Mermaid Diagrams with ChatGPT and Claude
AI assistants write Mermaid code reliably when you prompt them right. Five prompt patterns, the four mistakes models make most often, and how to fix each one in seconds.
7 min read -
How to Add Mermaid Diagrams to a GitHub README
GitHub renders Mermaid natively inside fenced code blocks — no build step, no images, no external service. The exact syntax, dark-mode handling, and fallbacks for places that do not support it.
5 min read