Mermaid

mermaid
CSS
Published

September 2, 2023

Modified

December 30, 2023

About this site

Just a few things Mermaid can do

flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]
flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]
Note

Example of callout.
note, tip, warning, caution, and important.

flowchart BT 
    .globalenv --> env1 -->env2 --> ...
flowchart BT 
    .globalenv --> env1 -->env2 --> ... 
    

This content can be styled with a border

A 9px font.

A 18px font.

%% This is a comment.
stateDiagram-v2
    [*] --> Top
    Top --> env2
    env2 --> env1
    env1 --> .globalenv
    .globalenv --> [*]
    
   %% env1 --> env2
    %%.globalenv --> env1
%% This is a comment.
stateDiagram-v2
    [*] --> Top
    Top --> env2
    env2 --> env1
    env1 --> .globalenv
    .globalenv --> [*]
    
   %% env1 --> env2
    %%.globalenv --> env1