Complete Guide

Mermaid.jsDocumentation

Master the art of creating beautiful diagrams with Mermaid.js. From basic flowcharts to complex system architectures, learn everything you need to know with practical examples and best practices.

Quick Start Guide

Get started with Mermaid.js in 4 simple steps

Basic Syntax

Learn the fundamental syntax rules for Mermaid diagrams

Choose Diagram Type

Select the appropriate diagram type for your use case

Add Content

Define nodes, connections, and styling

Customize

Apply themes, colors, and advanced formatting

Diagram Types

Explore comprehensive guides for each diagram type with syntax examples and use cases

Flowcharts

Beginner3 Examples

Create decision trees, process flows, and workflow diagrams

Learn More

Sequence Diagrams

Intermediate4 Examples

Visualize interactions between different actors over time

Learn More

Class Diagrams

Intermediate3 Examples

Model object-oriented systems and relationships

Learn More

State Diagrams

Advanced2 Examples

Represent states and transitions in systems

Learn More

Entity Relationship

Intermediate2 Examples

Design database schemas and relationships

Learn More

Git Graphs

Beginner2 Examples

Visualize Git branching and merging strategies

Learn More

Why Use Mermaid.js?

Discover the benefits of using Mermaid.js for your documentation and diagramming needs

Text-Based

Write diagrams using simple text syntax. Version control friendly and easy to maintain.

Collaborative

Share diagrams easily with your team. Perfect for documentation and presentations.

Versatile

Multiple diagram types for different use cases. From simple flowcharts to complex architectures.

Ready to Start Creating?

Put your knowledge to practice with our interactive playground or start building your own diagrams.