Mermaid.js Blog
Tutorials, guides, and best practices for creating diagrams as code.
Mermaid Markdown Guide: Add Diagrams to README Files and Docs
Learn how to write Mermaid diagrams in Markdown for README files, docs sites, pull requests, wikis, and developer runbooks, with copyable examples.
Mermaid Flowchart Examples for Docs, Workflows, and System Design
Copy practical Mermaid flowchart examples for developer documentation, product specs, incident runbooks, onboarding, API flows, and system design reviews.
Mermaid OAuth Flow Diagram Guide
Create clear OAuth 2.0 and OpenID Connect flow diagrams with Mermaid sequence diagrams and flowcharts for login, authorization code, PKCE, refresh tokens, and API access.
Mermaid AI Diagram Generator Prompts for Better Flowcharts
Use AI to generate Mermaid diagrams that actually render: prompt templates, examples, cleanup rules, and review checklists for flowcharts, sequence diagrams, architecture maps, and docs.
Mermaid Data Flow Diagram Guide
Learn how to create data flow diagrams with Mermaid for APIs, ETL pipelines, event streams, databases, and developer documentation.
Mermaid Swimlane Diagram: Build Process Lanes with Subgraphs
Learn how to create swimlane-style process diagrams in Mermaid using flowchart subgraphs, lanes, handoffs, styling, and copy-paste examples for documentation.
Mermaid AWS Architecture Diagram Guide
Create clear AWS architecture diagrams with Mermaid for VPCs, ECS, Lambda, queues, databases, and deployment docs using copy-paste examples.
Mermaid Decision Tree Flowchart: Build Yes/No Diagrams Fast
Learn how to create decision trees in Mermaid using flowcharts, yes/no branches, subgraphs, labels, styling, and copy-paste examples for docs and product workflows.
Mermaid Flowchart Styling: Colors, Classes & Themes
Master Mermaid.js flowchart styling with inline styles, CSS classes, custom themes, and color schemes. Complete guide with copy-paste examples.
MermaidEditor vs mermaid.live: Which Editor Is Best?
MermaidEditor vs mermaid.live compared: templates, tutorials, export, official Mermaid support, and the best editor choice for docs teams.
Mermaid Documentation Workflow: Diagrams as Code
Build a practical Mermaid documentation workflow for README files, architecture decision records, pull requests, and developer portals with reusable diagram patterns.
Mermaid Kanban Board Guide: Build Project Boards with Code
Learn how to create Mermaid Kanban boards for project planning, product roadmaps, bug triage, and documentation workflows using text-based diagrams.
Mermaid Database Schema Diagram: Visualize Your DB with Code
Learn how to create database schema diagrams using Mermaid.js ER diagram syntax. Covers tables, relationships, cardinality, and real-world examples for developers.
Mermaid.js Vue Integration: Add Diagrams to Your Vue 3 App
Step-by-step guide to integrating Mermaid.js with Vue 3. Learn how to render flowcharts, sequence diagrams, and more inside Vue components with live examples.
How to Use Mermaid.js in Angular: Complete Integration Guide
Step-by-step guide to integrating Mermaid.js diagrams in Angular applications. Learn how to render flowcharts, sequence diagrams, and more inside Angular components.
How to Use Mermaid.js in Next.js (App Router & Pages Router)
Step-by-step guide to integrating Mermaid.js diagrams in Next.js. Covers dynamic imports, SSR pitfalls, custom hooks, and rendering flowcharts, sequence diagrams, and ER diagrams in your Next.js app.
Mermaid.js Microservices Architecture Diagrams
Learn how to diagram microservices architectures with Mermaid.js. Covers service maps, API gateways, event flows, and deployment topologies with copy-paste examples.
Mermaid for System Design Interviews in 2026
Ace your system design interview with Mermaid. Sketch scalable architectures, data flows, and sequence diagrams as code — fast, clean, and version-controlled.
Mermaid Packet Diagram: Network Protocols with Text
Learn how to create network packet diagrams in Mermaid.js v11. Visualize TCP, HTTP, DNS, and custom protocol headers with simple text syntax — no Wireshark screenshots needed.
Mermaid.js in React: Complete Integration Guide
Step-by-step guide to integrating Mermaid.js into a React app. Covers hooks, dynamic rendering, dark mode, SSR pitfalls, and a reusable MermaidDiagram component.
Mermaid Kubernetes Architecture Diagrams: Examples
Learn how to diagram Kubernetes clusters, deployments, and microservices architecture using Mermaid.js. Includes K8s namespace, ingress, service mesh, and pod topology examples.
All Mermaid.js Diagram Types Explained (With Examples)
A complete guide to every Mermaid.js diagram type: flowchart, sequence, class, ER, Gantt, state, mindmap, timeline, pie, quadrant, git graph, and more — with live examples.
Mermaid.js Tutorial: All Diagram Types with Examples
Master every Mermaid.js diagram type in one guide. Flowcharts, sequence diagrams, class diagrams, ER, Gantt, state, mindmaps, Git graphs, and more — with copy-paste examples and best practices.
Mermaid.js in MkDocs and MkDocs Material Guide
Step-by-step guide to adding Mermaid diagrams to MkDocs and MkDocs Material sites. Covers plugin setup, dark mode, custom themes, and common fixes.
Mermaid.js Architecture Diagrams: Complete Guide for 2026
Learn how to draw software architecture diagrams with Mermaid.js. Covers system architecture, microservices, cloud infrastructure, and database design with real examples.
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 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 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.
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.
How to Document REST APIs with Mermaid Sequence Diagrams
Learn how to use Mermaid sequence diagrams to document REST API flows, authentication, error handling, and microservice interactions — with copy-paste examples.
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.
Export Mermaid Diagrams to PNG, SVG, and PDF
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 & Examples
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: Flows, Budgets & Energy
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: Architecture as Code 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: Interactive Diagram 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 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 Customization Guide
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.
Mermaid.js in VS Code: Extensions, Preview & Tips
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.
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.