Overview

mermaid allows you to create diagrams and flowcharts from text in a similar manner as markdown. You can find more information about mermaid from it's website or Github.

Examples

graph TB A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two]

graph LR A[Square Rect] -- Link text --> B((Circle)) A --> C(Round Rect) B --> D{Rhombus} C --> D

graph TB subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end c1-->a2

graph TB sq[Square shape] --> ci((Circle shape)) subgraph A subgraph od>Odd shape]-- Two line
edge comment --> ro di{Diamond with
line break} -.-> ro(Rounded
square
shape) di==>ro2(Rounded square shape) end %% Notice that no text in shape are added here instead that is appended further down e --> od3>Really long text with linebreak
in an Odd shape] %% Comments after double percent signs e((Inner / circle
and some odd
special characters)) --> f(,.?!+-*ز) cyr[Cyrillic]-->cyr2((Circle shape Начало)); classDef green fill:#9f6,stroke:#333,stroke-width:2px; classDef orange fill:#f96,stroke:#333,stroke-width:4px; class sq,e green class di orange

sequenceDiagram Bruce->>Steve: Hey, can we get a raise? Steve-->>Bruce: Sorry, I got The Look. Bruce->>Steve: What look? Steve-->>Bruce: The Look. Bruce->>Steve: Uh, what does that mean? Steve-->>Bruce: Nancy gave me The Look. Bruce->>Steve: So, did you even ask her? Steve-->>Bruce: No. I got The Look. Bruce->>Steve: So, do we get our raise or not? Steve-->>Bruce: No. Nothing I can do.

sequenceDiagram Alice ->> Bob: Hello Bob, how are you? Bob-->>John: How about you John? Bob--x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes... John, how are you?

sequenceDiagram loop Daily query Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice: Not so good :( else is well Bob->>Alice: Feeling fresh like a daisy end opt Extra response Bob->>Alice: Thanks for asking end end

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail... John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

gantt title A Gantt Diagram section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d anther task : 24d

Instructions

This was accomplished just by including the mermaid.min.js and mermain.css files with one slight modification to the mermain.css file which is shown below.

/** Section styling */
.section {
  stroke: none; 
/* below commented out because it conflicts with the readthedocs theme */
/*  opacity: 0.2; */
}