Table of Contents

About

mermaid is a library that renders diagram/chart based on a markup definition.

To ease the creation of mermaid diagram, we have created the following component that accepts directly the mermaid diagram definition

If for any reason, you wanted to show up also the diagram definition, you can use the below mermaid component.

Syntax

To render a mermaid diagram, you just need to enclose a code block with mermaid diagram definition language inside a webcode block.

Mermaid offers a live editor that you can use to validate and develop your diagrams. 

<webcode>
    <code mermaid display="none">
    ... mermaid diagram definition
    </code>
</webcode>

display=“none” is added to show you how to not print a code block but this is optional.

Example

<webcode>
<code mermaid>
stateDiagram-v2
    Direction LR
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
</code>
</webcode>
  • Output:
stateDiagram-v2
    Direction LR
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
stateDiagram-v2 Direction LR [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

Security

On a security level:

  • the level of security is set to strict
  • and we does not authorize script, style, iframe tag and on attribute handler.