Last updated 2 years ago

Mermaid Diagrams

You can insert mermaid charts and diagrams directly into markdown. This allows you to adhere to the docs-as-code philosophy. To insert a diagram, create a code block and specify the mermaid language, like this example:

graph LR
    Start --> Stop

An example of a Graph


An example of a Sequence diagram

AliceBobJohnHello John, how are you?Fight against hypochondrialoop[ Healthcheck ]Rational thoughts prevail...Great!How about you?Jolly good!AliceBobJohn

An example of a Gantt diagram

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 A sectionCritical tasksAdding GANTT diagram functionality to mermaid