Interactive graph/mind map/flow chart

I wanted to make an interface where I could interactively create a flow chart/graph and save it to a data table to be operated on e.g generate quizzes based on graph traversal etc.

I am quite new to anvil so I wasn’t sure if there were any client side options for this that were free, so I started to try and make one. I probably should have used neo4j and some front end stack to do this.

demo

4 Likes

That’s great @chongdtwdavid94 I was wondering how to do something similar.
This is what I had in mind Drag & Drop.

As used in Funnelytics and others

I used the canvas component and the associated events and drawing functions. Its not quite done yet, like I haven’t got round to implementing arrows for directed graphs and formatting the edge texts nicely etc.

1 Like

This is really cool! When you finish it, please do post an update :slight_smile:

(and Tweet it, if that’s your sort of thing…)

I’m looking forward to this. Node-RED (https://nodered.org/ ) has a powerful browser-based flow Javascript library that makes for me the case to adopt Anvil compelling. There’s also a related Node-RED uibuilder project (node-red-contrib-uibuilder (node) - Node-RED) that’s apparently easier to use. Unfortunately, I don’t have the technical chops to code the ‘escape hatch’ - as Meredydd eloquently described in one of his posts.

2 Likes

Dear chongdtwdavid94,

That’s cool stuff! Also interested. I want to build engineering concept diagrams and connect them to automatic calculations. Let us know whenever you’ve made some extra steps!