Integrating Mermaid JS with Phoenix LiveView

221
clicks
Integrating Mermaid JS with Phoenix LiveView
The author, skwyckl, is in the process of transitioning a static website built with Phoenix to a dynamic web application using Phoenix LiveView. However, they're facing an issue with rendering Mermaid JS diagrams, which are used for creating charts and graphs. In a static Phoenix environment, initializing Mermaid JS was as simple as importing it into the application's JavaScript and enabling it to start on load. But once the application is converted into a LiveView web app, this method no longer works due to the dynamic nature of LiveView components. The author is exploring ways to dynamically post-process and render the Mermaid JS graphs when using LiveView, as pre-rendering static SVGs isn't viable for their use case, which requires a CRUD app with live preview features.

© HashMerge 2024