mermaid Graph Support

Generation of diagram and flowchart from text in a similar manner as markdown

Edit

Table of Contents

mermaid

mermaid-js/mermaid: Generation of diagram and flowchart from text in a similar manner as markdown

Example

Input

Use mermaid shortcode.

{{< mermaid >}}
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 <br/>prevail!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!
{{< /mermaid >}}

Output

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!
comments powered by Disqus