Mermaid Demo

TLU can now support mermaid diagrams! Flowcharts, sequence diagrams and more!

How to write mermaid diagrams.

  1. RTFM.
  2. Wrap your mermaid code in <div> tags. Add the class=mermaid attribute to the tag. So your code will look like
<div class="mermaid"> graph LR ... </div>
  1. Note: You can't have blank lines in your diagrams, unfortunately, because the markdown renderer will interpret this as a new paragraph and break your diagram. However, you can sort of workaround this by putting a # as a spacer (see first example).

Sequence diagram example

<div class=mermaid> 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<br/>long time, so long<br/>that the text does<br/>not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes... John, how are you? </div>
AliceBobJohnHello Bob, how are you?How about you John?I am good thanks!I am good thanks!Bob thinks a longlong time, so longthat the text doesnot fit on a row.Checking with John...Yes... John, how are you?AliceBobJohn

Flowchart example

<div class=mermaid> graph LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] </div>
Link text
One
Two
Hard edge
Round edge
Decision
Result one
Result two

Gantt Chart example

<div class="mermaid"> gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page :20h Add another diagram to demo page :48h </div>
2014-01-072014-01-092014-01-112014-01-132014-01-152014-01-172014-01-192014-01-21Completed task Active task Future task Future task2 Completed task in the critical line Implement parser and jison Create tests for parser Future task in critical line Create tests for renderer Add to mermaid Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page A sectionCritical tasksDocumentationLast sectionAdding GANTT diagram functionality to mermaid