Mermaid

Create diagrams and visualizations using text and code

🚀 Introduction

Mermaid is a JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. It allows you to generate diagrams, flowcharts, and visualizations using simple text syntax, similar to how Markdown works for text formatting.

🛠️ Mermaid Live Editor

You can experiment with Mermaid using the Mermaid Live Editor, which provides real-time preview of your diagrams.

📊 Diagram Examples

Mermaid supports various diagram types. Here are some examples:

State Diagrams

Basic State Diagram

Keyboard State Diagram

Sequence Diagrams

Sequence diagrams show how processes operate with one another and in what order.

Pie Charts

Pie charts are useful for representing categorical data.

Gantt Charts

Gantt charts are useful for project planning and scheduling.

Git Graphs

Git graphs show git branching and merging operations.

Flowcharts

Flowcharts can represent workflows or processes.

🧩 Diagram Syntax

Basic Syntax Structure

Each diagram type in Mermaid has its own specific syntax, but they all follow a similar pattern:

Start with the diagram type (e.g., graph, sequenceDiagram, gantt)
Follow with the diagram-specific syntax
Wrap in a code block with either:
- Plain code blocks: </code> and <code>
- Mermaid code blocks: mermaid</code> and <code>

Common Diagram Types and Their Starting Keywords

Flowcharts: graph or flowchart
Sequence Diagrams: sequenceDiagram
Class Diagrams: classDiagram
State Diagrams: stateDiagram
Entity Relationship Diagrams: erDiagram
User Journey: journey
Gantt Charts: gantt
Pie Charts: pie
Git Graphs: gitGraph

📚 Resources

🔧 Integration

Mermaid can be integrated into various platforms:

Markdown: Many Markdown processors support Mermaid
Documentation Tools: Like Docusaurus, VuePress, and Jekyll
Note-taking Apps: Like Obsidian and Notion
Online Editors: Like CodiMD and HackMD
Version Control: GitHub, GitLab, and Bitbucket support Mermaid in Markdown

💡 Tips for Using Mermaid

Start Simple: Begin with basic diagrams and gradually add complexity
Use the Live Editor: Test your diagrams in the live editor before embedding them
Check Syntax: Mermaid is sensitive to syntax; ensure proper spacing and indentation
Customize Appearance: Use styling options to enhance your diagrams
Responsive Design: Consider how your diagrams will appear on different screen sizes