Mermaid.js Blog
Tutorials, guides, and best practices for creating diagrams as code.
How to Create CI/CD Pipeline Diagrams with Mermaid.js
Learn how to visualize CI/CD pipelines using Mermaid.js. Step-by-step examples for GitHub Actions, GitLab CI, Jenkins, and deployment workflows.
Mermaid.js Quadrant Chart: Complete Guide with Examples
Learn how to create quadrant charts in Mermaid.js for prioritization, risk analysis, and strategic planning. Includes syntax, examples, and best practices.
How to Create Timeline Diagrams with Mermaid.js
Learn how to create mermaid timeline diagrams with simple text syntax. Includes real-world examples for project roadmaps, historical events, and release schedules.
Mermaid Subgraphs: Group, Nest & Style Diagram Sections
Master Mermaid.js subgraphs to group related nodes, nest containers, set per-subgraph directions, and build cleaner architecture diagrams. Includes real-world examples.
How to Add Mermaid.js Diagrams to Confluence
Learn how to embed Mermaid.js diagrams in Confluence using macros and third-party apps. Step-by-step instructions and real-world examples for technical teams.
How to Use Mermaid.js Diagrams in GitLab: Complete Guide
Integrate Mermaid.js diagrams into your GitLab Markdown files, wikis, issues, and merge requests. Learn native support, configuration, and best practices for developers.
Mermaid.js vs PlantUML — Which Diagrams-as-Code Tool Should You Use?
Compare Mermaid.js and PlantUML on syntax, diagram types, rendering, integration, and performance. Find out which diagrams-as-code tool is right for your team.
Mermaid.js Themes & Dark Mode — Complete Customization Guide (2026)
Learn how to apply built-in themes, enable dark mode, and customize Mermaid.js diagrams with themeVariables and CSS. Includes copy-paste examples for every theme.
How to Use Mermaid.js in VS Code: Extensions, Preview & Tips (2026)
Learn how to create, preview, and export Mermaid.js diagrams directly in VS Code. Complete guide to the best extensions, settings, and workflow tips for developers.
Mermaid.js Mindmap Diagrams: Advanced Examples & Real-World Use Cases
Go beyond basic mindmaps with Mermaid.js. Explore advanced examples for brainstorming, project planning, note-taking, and team collaboration with practical code snippets.
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.
Mermaid.js Flowchart Styling: Colors, Classes & Custom Themes
Master Mermaid.js flowchart styling with inline styles, CSS classes, custom themes, and color schemes. Complete guide with copy-paste examples.