mermaid/docs/n00b-syntaxReference.md at 723976be58dd9d18ee58924f16e0df295903622d

1.2 KiB

Raw Blame History

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 allows the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram.

Theme Creation:

Mermaid allows you to change Themes. This is also done using Directives.

1.2 KiB Raw Blame History