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
- With a state diagram
<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.