Create a MermaidComponent

[danielgafni]

Description

Mermaid diagrams are very powerful at visualizing various types of graphs. They are widely supported across tools that work with Markdown. It would be great if Evidence would have a MermaidComponent that could take a templated Mermaid code block and inject data from tables into this code block (to display dynamic values that are obtained at build-time).

What problem would this solve?

Visualizing lots of graphs. Also, it would solve #2345.

How should it work?

Not sure here

[archiewood]

We eventually removed the mermaid component from the core evidence library as it added a lot of dependencies and package size for a component that was relatively rarely used.

It should be relatively easy to add it as a custom component. Prior implementation:

https://github.com/evidence-dev/evidence/blob/c238cf0da1222751bcc5c1d8e78e9ad3e7e62f2c/packages/ui/core-components/src/lib/atoms/flowchart/Flowchart.svelte

[danielgafni]

What do you think of isolating this component into @evidence-dev/component-mermaid? This would solve the dependency bundling issue (not sure if optional dependencies are a thing in JS).

[danielgafni]

Vide-coding a custom FlowChart component was a success!
I was able to make a component that takes a table with stage, value, parents columns as input and draws the flow chart with Mermaid.

Doesn't look ideal right now but I can refine it later.

Thanks Claude!