Skip to main content

Mermaid Diagram Syntax?

Overview​

Mermaid diagram syntax is a simple, text-based language for creating different types of diagrams and charts. You can describe diagrams using easy-to-read code, which then turns into visual graphics.

Key Features of Mermaid Diagram Syntax​

  1. Text-Based: You can describe diagrams using plain text, making them easy to create, edit, and save alongside your code.

  2. Simple Syntax: The syntax is easy to learn, letting you quickly add elements like nodes, links, and labels without using complex graphic tools.

  3. Many Diagram Types: Mermaid supports various diagram types, including flowcharts, sequence diagrams, class diagrams, state diagrams, and Gantt charts.

  4. Easy Integration: You can add Mermaid diagrams to documentation, wikis, and other tools that support Markdown, making it simple to include visuals in your documents.

  5. Customization: You can customize how your diagrams look using Mermaid's syntax, including options for styling, alignment, and layout.

Example of Mermaid Syntax​

For a simple flowchart, the Mermaid syntax might look like this:

graph TD
    A[Start] --> B[Step 1]
    B --> C{Decision}
    C -->|Yes| D[Step 2]
    C -->|No| E[Step 3]
    D --> F[End]
    E --> F

In this example:

  • graph TD specifies the type of diagram (a top-down flowchart).
  • A, B, C, D, E, and F are nodes.
  • Arrows (-->) show the flow or connections between nodes.
  • {} and |Yes|, |No| show decision points and choices.

Mermaid syntax lets you create and maintain diagrams in a text-based format, making it easy and efficient for documentation and visualization.

More examples​

Check out the various examples on the child pages of this section.