Is there a way to have rx.markdown render mermaid diagrams?

[hragbalian]

Hi there,

I would like to be able to add mermaid diagrams to my markdown but the rx.markdown doesn't render it.

For example, the following code:

```mermaid
    graph TD
        A[Start] -->|Get books| B[Go to library]
        B --> C{Books available?}
        C -->|Yes| D[Borrow books]
        C -->|No| E[Reserve books]
        D --> F[Read books]
        E --> F
        F --> G[Return books]
        G --> H[Finish]

should yield:

    graph TD
        A[Start] -->|Get books| B[Go to library]
        B --> C{Books available?}
        C -->|Yes| D[Borrow books]
        C -->|No| E[Reserve books]
        D --> F[Read books]
        E --> F
        F --> G[Return books]
        G --> H[Finish]

Loading

but instead it's rendering as

Thanks!

[picklelo]

Looks like this is possible if we add a remark plugin: remarkjs/react-markdown#394

You can see here where we add the plugins:

reflex/reflex/components/markdown/markdown.py

Line 31 in 19007ee

# Special remark plugins.

We could add this plugin also, or figure out a way to make the plugins dynamic so the user could set the ones they want themselves. I'll convert this to an issue in case someone wants to take this on.

[datavistics]

That would be a cool feature!

[clemlesne]

See: #3137.