Mermaid.js Blog
Tutorials, guides, and best practices for creating diagrams as code.
How to Use Mermaid Timeline Diagrams: Complete Instructions Guide (2026)
Step-by-step mermaid timeline instructions: syntax, sections, events, and real examples. Everything you need to build timelines in 2026.
10 Mermaid Timeline Examples with Step-by-Step Code (2026)
10 real mermaid timeline examples with step-by-step code. Copy-paste ready diagrams for projects, research, sprints, and more.
Mermaid Mindmap Syntax Cheat Sheet (2026 Edition)
Complete mermaid mindmap syntax cheat sheet for 2026. Node shapes, icons, classes, nested branches — all in one reference with working code.
Building a Research Plan with Mermaid Timeline: Real Examples
Use mermaid timeline to build a research plan. Real examples for academic studies, UX research, market research, and literature reviews.
Best Mermaid Diagram Editors in 2026: Honest Comparison
Comparing the best mermaid diagram editors in 2026. Side-by-side feature comparison of online editors, VS Code extensions, and desktop tools.
Mermaid Live Editor Guide: How to Use, Tips & Tricks (2026)
Complete guide to using a mermaid live editor in 2026. Learn the interface, diagram types, export options, tips, and keyboard shortcuts.
Mermaid Editor: The Complete Beginner's Guide (2026)
New to Mermaid? This beginner's guide covers what a mermaid editor is, how diagrams work, first diagram tutorial, and all diagram types explained.
Mermaid Mindmap Examples: 15 Real Use Cases with Code
15 real mermaid mindmap examples with working code. Project planning, business strategy, learning paths, and more — all with syntax explained.
Mermaid Timeline Syntax: Every Element Explained with Examples
Complete mermaid timeline syntax reference: every element with real examples. Sections, events, dates, titles, themes, and edge cases all covered.
How to Create Mermaid Diagrams Online (No Install Required)
Create mermaid diagrams online without installing anything. Browser-based tools, all diagram types, export options, and embedding in your docs.
Mermaid Requirement Diagram: Document Requirements as Code
Learn how to create requirement diagrams in Mermaid.js to document system requirements, trace dependencies, and link specs directly in your codebase.
How to Export Mermaid Diagrams to PNG, SVG, and PDF (2026 Guide)
A complete guide to exporting Mermaid.js diagrams as PNG, SVG, or PDF — using the live editor, CLI, browser, and code. Includes high‑resolution and transparent background tips.
Mermaid XY Charts: Build Bar & Line Graphs in Plain Text
Learn how to build Mermaid.js XY charts — bar and line graphs in pure text. Complete syntax guide with axis configuration, multi-series examples, and styling tips.
Mermaid Block Diagram Tutorial: Layouts, Arrows & Real Examples (2026)
Learn the Mermaid.js block diagram syntax with copy-paste examples. Build system architecture, hardware layouts, and grid-based diagrams in plain text.
Mermaid Sankey Diagrams: Visualize Flows, Budgets & Energy Data
Learn how to build Mermaid.js Sankey diagrams to visualize data flows, budgets, energy usage, and conversion funnels. Complete syntax guide with copy-paste examples.
Mermaid C4 Diagrams: Document Software Architecture as Code (2026 Guide)
Learn how to create C4 model architecture diagrams with Mermaid.js. Covers Context, Container, Component, and Dynamic diagrams with copy-paste examples for documenting software systems.
Mermaid Click Events: Build Interactive Diagrams (Complete Tutorial)
Learn how to add click events to Mermaid.js diagrams. Link nodes to URLs, trigger JavaScript callbacks, build interactive flowcharts, and create clickable architecture diagrams with copy-paste examples.
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 Mindmap Examples: 12 Copy-Paste Diagrams [2026 Syntax Guide]
12 ready-to-use Mermaid mindmap examples with full syntax — brainstorming, project planning, org charts & more. Copy, paste, render instantly. Free, no signup.
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.
Mermaid.js Mindmap Tutorial: Syntax + Examples (2026)
Learn Mermaid.js mindmap syntax in 5 minutes. Node shapes, icons, hierarchy — with copy-paste examples you can render instantly.
Mermaid.js Cheat Sheet: Every Syntax You Need (2026)
Every Mermaid.js syntax in one place — flowcharts, sequence, Gantt, class, ER, mindmap & more. Copy-paste ready. Bookmark this page.
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.
Add Mermaid Diagrams to GitHub README (2026 Guide)
Add beautiful Mermaid diagrams to your GitHub README in minutes. Copy-paste examples, rendering tips, and fixes for common issues.
Mermaid vs Draw.io vs Lucidchart: Honest Comparison (2026)
Mermaid vs Draw.io vs Lucidchart compared — pricing, features, collaboration, version control. Find the right diagramming tool in 2 minutes.
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.