Mermaid.js Blog
Tutorials, guides, and best practices for creating diagrams as code.
Creating User Journey Maps with Mermaid.js
Learn how to create user journey maps with Mermaid.js. Understand the syntax, add sections and scoring, and apply journey mapping to UX research and product design.
Mermaid Git Graph Tutorial — Visualize Branch Strategies
Learn to create git graph diagrams with Mermaid.js. Visualize branching strategies, merge workflows, cherry-picks, and popular models like GitFlow and trunk-based development.
Adding Mermaid Diagrams to Docusaurus Documentation
Complete guide to integrating Mermaid.js diagrams in Docusaurus. Learn plugin setup, MDX usage, theming, configuration, and practical examples for documentation sites.
Creating Mermaid Diagrams in Notion
How to create and use Mermaid diagrams in Notion. Learn the code block method, understand limitations, and discover workarounds for the best diagramming experience.
How to Create Mind Maps with Mermaid.js
Create mind maps with Mermaid.js for brainstorming, planning, and documentation. Learn syntax, shapes, icons, and practical examples.
Mermaid.js Syntax Cheat Sheet — Quick Reference
Complete Mermaid.js syntax reference. Quick-lookup guide for flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, ER diagrams, and more.
How to Use Mermaid Diagrams in Obsidian
Complete guide to creating and using Mermaid diagrams in Obsidian. Learn how to enable Mermaid, create diagrams, customize rendering, and publish compatibility.
Creating Pie Charts with Mermaid.js
Learn how to create pie charts with Mermaid.js. Simple syntax, customization options, real-world examples, and when to use pie charts in documentation.
Entity Relationship Diagrams with Mermaid.js
Design database schemas with Mermaid.js ER diagrams. Learn entities, attributes, relationships, cardinality, and best practices for data modeling.
Mermaid State Diagrams — Complete Tutorial
Create state machine diagrams with Mermaid.js. Learn states, transitions, guards, composite states, forks, joins, and real-world examples.
How to Use Mermaid Diagrams in GitHub README Files
Add diagrams to your GitHub README with native Mermaid support. Learn syntax, tips for rendering, common issues, and best practices for documentation.
Mermaid vs Draw.io vs Lucidchart — Which Diagramming Tool to Use?
Compare Mermaid.js, Draw.io, and Lucidchart for diagramming. Pricing, features, collaboration, version control, and when to use each tool.
Mermaid Class Diagrams for UML — Developer Guide
Create UML class diagrams with Mermaid.js. Learn classes, attributes, methods, relationships, inheritance, interfaces, and design patterns with examples.
Mermaid Gantt Chart: Examples & Best Practices
Create Gantt charts with Mermaid.js for project planning. Learn task syntax, dependencies, milestones, sections, and date formatting with practical examples.
Mermaid Sequence Diagram Tutorial with Examples
Learn how to create sequence diagrams with Mermaid.js. Covers participants, messages, loops, alt blocks, notes, and activation with real-world examples.
How to Create a Flowchart with Mermaid.js — Complete Guide
Step-by-step guide to creating flowcharts with Mermaid.js. Learn node shapes, edge types, styling, subgraphs, and best practices with copy-paste examples.
What is Mermaid.js? A Beginner's Introduction to Diagrams as Code
Learn what Mermaid.js is, how it works, and why developers love creating diagrams from simple text. A complete beginner's guide to diagrams as code.