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

App Building
1

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

Screenshot 2024-03-13 at 14.38.17
Screenshot 2024-03-13 at 14.38.17737×493 30.7 KB

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

Screenshot 2024-03-13 at 14.37.43
Screenshot 2024-03-13 at 14.37.43858×618 19.6 KB

Screenshot 2024-03-13 at 14.38.44
Screenshot 2024-03-13 at 14.38.44737×493 40.5 KB

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

Screenshot 2024-03-13 at 14.42.13
Screenshot 2024-03-13 at 14.42.131268×746 115 KB

<html>

  <body>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.0/dist/mermaid.min.js"></script>
    Here is one mermaid diagram:
    <pre class="mermaid">
            graph TD 
            A[Client] --> B[Load Balancer] 
            B --> C[Server1] 
            B --> D[Server2]
    </pre>

    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]
    </pre>

    
  </body>
</html>
2

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: