Mermaid guides & tutorials
Practical, example-driven tutorials for writing, styling, exporting and sharing Mermaid diagrams.
What is Mermaid? A Beginner's Guide to Diagrams as Code
Mermaid is a JavaScript library that turns text into diagrams. Learn how Mermaid works, where it's supported, which diagram types exist and how to start for free.
7 min read
How to Create a Flowchart in Mermaid (Step by Step)
Step-by-step tutorial to create a Mermaid flowchart: choose a direction, add nodes and shapes, connect arrows with labels, group with subgraphs and style it.
8 min read
How to Use Mermaid Diagrams in GitHub Markdown
Add Mermaid diagrams to GitHub READMEs, issues, pull requests and wikis with ```mermaid code blocks. Supported types, limitations, dark mode and troubleshooting.
6 min read
How to Export Mermaid Diagrams to PNG, SVG and PDF
Convert Mermaid code to PNG, SVG or PDF for free. Choose resolution, transparent backgrounds and themes, copy to clipboard, and export from the command line.
5 min read
Mermaid Themes and Styling: Colors, Fonts and Custom CSS
Customise Mermaid diagrams: built-in themes, the init/frontmatter config, themeVariables for brand colors, classDef and style for individual nodes, and link styles.
7 min read
How to Fix Common Mermaid Syntax Errors
Fix Mermaid 'Parse error' and 'Syntax error in text' messages fast. The 12 most common mistakes with before/after examples, plus a one-click AI syntax fixer.
9 min read
Using Mermaid in Notion, Obsidian, Confluence and VS Code
How to add Mermaid diagrams to Notion, Obsidian, Confluence, VS Code, Docusaurus and other tools — native support, plugins, and when to embed or export instead.
6 min read
How to Generate Mermaid Diagrams with AI (Prompt Guide)
Generate Mermaid flowcharts, sequence diagrams and ER diagrams from text with AI. Prompt templates, examples, and how to refine, fix and explain diagrams with AI.
6 min read
Mermaid Sequence Diagram Tutorial: From Basics to Advanced
Learn Mermaid sequence diagrams step by step: participants, message types, activations, notes, loops, alt/else, parallel blocks, grouping boxes and numbering.
8 min read
Convert a SQL Schema into a Mermaid ER Diagram
Turn CREATE TABLE statements into a Mermaid ER diagram by hand or with AI. Map columns, primary and foreign keys and cardinality correctly, with full examples.
6 min read