Skip to content

Mermaid

Main Navigation Docs Tutorials Integrations Contributing Latest News

Changelog

💻 Open Editor

Appearance

Sidebar Navigation

📔 Introduction

About Mermaid

Getting Started

Syntax and Configuration

📊 Diagram Syntax

Flowchart

Sequence Diagram

Class Diagram

State Diagram

Entity Relationship Diagram

User Journey

Gantt

Pie Chart

Quadrant Chart

Requirement Diagram

GitGraph (Git) Diagram

C4 Diagram 🦺⚠️

Mindmaps

Timeline

ZenUML

Sankey 🔥

XY Chart 🔥

Block Diagram 🔥

Packet 🔥

Kanban 🔥

Architecture 🔥

Radar 🔥

Other Examples

📚 Ecosystem

Mermaid Chart

Tutorials

Integrations - Community

Integrations - Create

⚙️ Deployment and Configuration

Configuration

API-Usage

Mermaid API Configuration

Mermaid Configuration Options

Registering icons

Directives

Theming

Math

Accessibility

Mermaid CLI

FAQ

🙌 Contributing

Getting Started

Contributing to Mermaid

Adding Diagrams

Questions and Suggestions

Security

📰 Latest News

Announcements

Blog

On this page

Customize your layout and design in Mermaid Chart’s visual editor!

mermaid

mermaid

Modules

config
defaultConfig
mermaid

Edit this page on GitHub

Pager

Previous pageAPI-Usage

Next pageMermaid Configuration Options

Opens in MermaidChart.com

mermaid ​

Modules ​

mermaid

Modules