SPIKE: Get Mermaid charts rendering

[KevinEtchells]

Context

Getting diagrams rendering in chat, using Mermaid:

Still to explore

• I've had to allow "unsafe-inline" to allow inline-styles. A workaround could be to select all elements inside the SVG with inline styles and, instead, apply them programmatically.
• A few console errors around this type of theme: Error: <circle> attribute cy: Expected length, "NaN"
• We'll need to add something to the system prompt to provide diagrams in Mermaid format
• Anything else we need to consider? Alternatives?

Things to check

• I have added any new ENV vars in all deployed environments
• I have tested any code added or changed
• I have run integration tests

[wpfl-dbt]

Claude suggests some solutions:

1. Server side rendering with py-mermaid
2. Host mermaid on a subdomain
3. Use web workers
4. Use the (unfortunately-named) CSP nonces to allow specific inline scripts

[KevinEtchells]

Thanks Will! I'm going to try a JavaScript workaround in the first instance, as that will be the quickest solution (if it works!).

I think the SSR approach is also a strong contender. A little more fiddly because of the streaming, but I can see a couple of ways of approaching that.

Any thoughts/concerns around the system prompts?

[lmwilkigov]

We could add something to the effect of "if asked to create a diagram use the mermaid markdown format". I find that pretty much every LLM is quite fluent in it

[lmwilkigov]

A nice elegant change. As you note in an above thread, server side rendering is going to be prickly with the streaming which makes me think this is a client side thing for now.

My main thought is that LLM's can screw up in the validity of their mermaid definition which could cause errors. We might want to wrap that in our current "Redbox had an error" styling.

Finally, a copy and paste/download button specifically for the diagram would be really useful for people to grab and use these in documents and presentations

[KevinEtchells]

If/when we come back to this, now we have Lit SSR running this will likely give us good options.