Mermaid.js Blog
Tutorials, guides, and best practices for creating diagrams as code.
Mermaid.js for Brainstorming & Ideation: Visual Thinking for Developers (2026)
Use Mermaid.js for brainstorming and ideation — mindmaps, flowcharts, and journey maps to structure ideas, plan features, and collaborate visually with your team.
Mermaid.js Tips & Tricks: 15 Pro Shortcuts for Faster Diagrams (2026)
15 Mermaid.js tips and tricks every developer should know — shortcuts, hidden features, theme hacks, and workflow optimizations to create diagrams faster.
How to Write Incident Postmortems with Mermaid Diagrams (RCA That Engineers Actually Read)
Use Mermaid sequence diagrams, timelines, and flowcharts to document incident root cause analysis, blast radius, and remediation — with copy-paste templates for SRE and DevOps teams.
Mermaid Flowchart Node Shapes Guide: Rectangles, Diamonds, Rounded, Circles & More
Complete reference for every Mermaid flowchart node shape: rectangles, rounded, stadium, subroutine, cylindrical, asymmetric, rhombus, hexagon, parallelogram, trapezoid, double circle, and more. Copy-paste syntax for each shape.
Mermaid ZenUML: Modern Sequence Diagrams in Plain Text
Learn Mermaid ZenUML — the cleaner, code-like alternative to classic Mermaid sequence diagrams. Covers participants, sync/async messages, loops, alt/opt/par fragments, and real-world API flow examples.
Mermaid Network Diagram: Topology, Subnets & Firewall Rules
Use Mermaid.js to draw network topology diagrams for cloud VPCs, subnet routing, firewall rule flows, and infrastructure documentation. Examples for AWS VPC, hub-spoke, and DMZ architectures.
Mermaid Server-Side Rendering: Generate Diagrams Without a Browser
Learn how to render Mermaid diagrams server-side using mermaid-cli, Puppeteer, Playwright, and Node.js for automated documentation, CI/CD pipelines, and API-driven diagram generation.
How to Use Mermaid.js in Jupyter Notebooks and Python Projects
Render Mermaid diagrams directly in Jupyter Notebooks, Python scripts, and data pipelines — with zero JavaScript. Copy-paste examples for matplotlib-style inline diagrams.
Mermaid Graph Diagram Guide: Network Topology, Dependencies, and More
Learn how to use Mermaid graph diagrams for network topology, dependency maps, data lineage, and system graphs with practical code examples.
Mermaid.js Accessibility Guide: Making Diagrams Screen-Reader Friendly
Learn how to add ARIA labels, alt text, and accessible descriptions to Mermaid.js diagrams so they work with screen readers and meet WCAG standards.
Mermaid Troubleshooting: Fix Common Syntax Errors and Rendering Problems
Learn how to debug Mermaid.js syntax errors, blank diagrams, and rendering failures. Fix common flowchart, sequence, and state diagram problems in minutes.
How to Embed Mermaid Diagrams in HTML Pages
Step-by-step guide to adding Mermaid.js diagrams to any HTML page using CDN, auto-init, and manual rendering — with copy-paste examples.
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 Free Mermaid Diagram Editor (2026): Online & VS Code Compared
Best free Mermaid diagram editor in 2026: online editor, VS Code extension, and desktop tools compared. No signup, instant preview, PNG/SVG export.
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 Bar Chart Syntax & Examples: Copy-Paste XY Chart Code
Mermaid bar chart syntax with copy-paste xychart-beta code examples. Multi-series bar charts, line charts, combo charts, axis config, and theming for GitHub Markdown.
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.
Mermaid Timeline Examples with Code & Images (Copy-Paste)
Mermaid timeline examples with code and rendered images. Copy-paste syntax for roadmaps, research plans, sprints, milestones, and historical timelines.
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 Mindmap Example (Copy-Paste Syntax + Image)
Copy-paste mermaid mindmap example with syntax, node shapes, and a rendered image. Indentation hierarchy you can edit live.
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.