Mermaid support in Markdown

[Pelicans-git]

If Mermaid (https://github.com/mermaidjs) support is added to the Markdown Card, then we would be able to generate live network diagrams that show the status of a network.

For instance, to get this diagram:

You would need only need this (very simple) markdown with some templating:

graph TD
    classDef default fill:#00ff00,stroke:#333,stroke-width:1px;
    classDef boxerror fill:#db4437,stroke:#333,stroke-width:2px;
    classDef boxunavailable fill:#a0a0a0,stroke:#333,stroke-width:2px;
    classDef boxactive fill:#FDD835,stroke:#333,stroke-width:2px;  
    classDef boxdisabled fill:#ff4444,stroke:#333,stroke-width:1px; 
 
    Raspi --- |Bluetooth| B(Temp Humidity 1)
    Raspi --- |Bluetooth| C(Temp Humidity 2)
    Raspi ---|Wifi| D(Sonoff 1)
    D --- E(Porch Light)
    Raspi ---|Wifi| F(Sonoff 2)
    F --- G(Garage Light)
    Raspi ---|Zigbee| H(Aqara Remote)

    class E boxerror;
    class B boxunavailable;
    class C boxactive;
    class D boxdisabled;   
    linkStyle 0 stroke:#00ff00,stroke-width:4px;    
    linkStyle 1 stroke:#ff0000,stroke-width:4px;
    linkStyle 2 stroke:#ffaa00,stroke-width:4px,stroke-dasharray: 5,5;
    linkStyle 3 stroke:#ffaa00,stroke-width:4px,stroke-dasharray: 5,5;
    linkStyle 4 stroke:#00ff00,stroke-width:4px;
    linkStyle 5 stroke:#00ff00,stroke-width:4px;
    linkStyle 6 stroke:#00ff00,stroke-width:4px;

Loading

There must be somebody else who can see how useful this would be.

[borango]

Yes @Pelicans-git , I am using GraphViz (or mermaid) all over other places, mostly for documenting transitive cause-and-effect.

In the case of Home Assistant, I would like to show the dependency of a dashboard on a card on a template sensor on two MQTT sensors and their physical implementations and transport protocols (where it would connect to the layers in your example).