Mermaid syntax

Mermaid

Create complex, visual diagrams with text. A smarter way of creating diagrams.

Introduction

Mermaid diagrams and charts are widely used in various fields and can be a valuable addition to any team or organization’s toolkit. They are easy to create, share, and collaborate on, as well as, easy to maintain and update.

Visualize your ideas

Using markdown-style text, you can create diagrams and charts to visualize your ideas.

Here is a flowchart depicting the process for making a cup of coffee:

  
    flowchart LR
      A[Start]-->B[Do you have coffee beans?]
      B-->|Yes|C[Grind the coffee beans]
      B-->|No|D[Buy ground coffee beans]
      C-->E[Add coffee grounds to filter]
      D-->E
      E-->F[Add hot water to filter]
      F-->G[Enjoy!]
  
  
      Copy
  

Nodes are created using the syntax node_name[Node text] and they are connected using --> for directed edges. Learn more about Flowchart syntax.

Getting started

Our documentation will help to familiarize you with Mermaid syntax. Click on any of the categories to the left to expand the section and view the syntax and examples for the respective diagrams and charts.

When you are ready to start creating your own diagrams, log into your account at Mermaid Chart. Don’t have an account? Sign up for a free account today. We are constantly adding new features and functionality to Mermaid, so check back often for updates.