Flow chart diagram in liveview

How can I make a flow chart diagram with data from postgres database in phoenix liveview?
For example a flow chart of a country plus its drop down arrow of counties/provinces and each count, its dropdown of districts?

This is a really broad question. General idea is this

  • You load your data e.g. from database
  • You create a data structure for your flowchart from loaded data
  • You send this data structure to client somehow
    • If you’re just using normal controllers, you can embed this data structure in your page
    • If you’re using LV, you can use a hook to load data from server when needed
  • You use a charting library (like Mermaid) to draw the chart based on you data structure.

There are many details, like how you create your data structure depends on your choice of charting library, but this is the rough idea.

Of course, you can do more sophisticated things too. For example, you can generate a SVG of your flow chart in Elixir, and include it in your HTML to show the chart.

This is really a broad question. I think sky’s the limit :slight_smile: