mermaid/docs/n00b-syntaxReference.md

Diagram syntax

If you are new to mermaid, read the Getting Started and Overview sections, to learn the basics of mermaid. Video Tutorials can be found at the bottom of the Overview Section.

Below is a list of diagram types supported by mermaid and how they can be defined.

mermaid tag

These Diagram Definitions can be entered within a <div class=mermaid> tag. like so :

<div class="mermaid">
     graph LR
      A --- B
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner);
</div>

Mermaid Live Editor

You can proofread or render and download your definitions in real-time with the Mermaid Live Editor. This would then offer you the following choices to download the diagram:

Note: Copying the markdown will allow you to link to your unique diagram from anywhere online.

Directives:

Directives gives a diagram author the capability to alter the appearance of a diagram before rendering, by changing some of the applied configurations and can alter the font style, color and other aesthetic aspects of the diagram.

Theme Creation:

Mermaid allows Customized Themes for websites and even individual diagrams.This is done using directives and can be very helpful, not only for styling but for simplifying more complex diagrams.