Is it possible to use Mermaid (Diagramming and charting tool)?

Is it possible to use in Retool? I can't get it to work. I've added the CDN to Libraries:

And tried to add a diagram using the HTML, Text and Custom Component elements, but none of them render a diagram:

I created a static page HTML page locally on my machine (not in Retool) to test the code:


    <script src=""></script>
    Here is one mermaid diagram:
    <pre class="mermaid">
            graph TD 
            A[Client] --> B[Load Balancer] 
            B --> C[Server1] 
            B --> D[Server2]

    And here is another:
    <pre class="mermaid">
            graph TD 
            A[Client] -->|tcp_123| B
            B(Load Balancer) 
            B -->|tcp_456| C[Server1] 
            B -->|tcp_456| D[Server2]


Hi @jkns :wave:

I highly advise taking a look at our documentation on JS libraries if you aren't familiar with it. Unfortunately, there's not an easy way to check if any given library is supported.

Here are some points to keep in mind:

  • JS libraries typically need to have a umd build to work in retool
  • The library has require statements
  • One way to troubleshoot is to look at browser console errors!

Send an update on your conclusion. Hope it works :crossed_fingers: