Introduce mermaid.js component

[TheItsNameless]

mermaid.js is a great way for building detailed diagrams and charts. A component in our wiki could help page creators for creating better and easy to understand content.

[TobidieTopfpflanze]

What is MermaidJS?

MermaidJS is a tool to create charts on text based input.
You can give it a try here on Github in markdown files or in the Mermaid.js live editor.

Examples

We are currently using images for flowcharts on the Animation Controllers page. Those could be replaced with generated charts using mermaid.js

This would also give other contributors to change/add graphs with the same style.

Old

New - Example

stateDiagram-v2
    noAnimation: play no animaton
    flyAnimation: play fly animaton
    
    state Ground {
        noAnimation
    }

    state Air {
        flyAnimation
    } 

    direction LR
    Ground --> Air : Is in Air
    Air --> Ground: Is on ground

Loading

Old

New - Example

stateDiagram-v2
    noAnimation: play no animaton
    flyAnimation: play fly animaton
    explodeAnimation: play explode animaton
    
    state Ground {
        noAnimation
    }

    state Air {
        flyAnimation
    } 

    state Explode {
        explodeAnimation
    }

    direction TB
    Ground --> Air : Is in Air
    Air --> Ground: Is on ground
    Ground --> Explode: Is dead
    Air --> Explode: Is dead

Loading

[SmokeyStack]

It seems like we need to use a plugin in order to use mermaidjs in vitepress using markdown. If we integrate mermaidjs, we also need to remember to update the style guide so our graphs are uniform