Automatic Visual (GUI) Flow Chart Creation from Multi-Level Dictionaries

Hey there,
So I’m currently designing a singleplayer story game that relies on choices that affect your outcome and overall story. I’m implementing a flow chart as a GUI so the player can view their progress through the story and also see what else they could have done.

I have attempted to create my own but didn’t have much luck. I was able to get basic linear things in, however, when it came to some more advanced features, such as taking 3 actions outcoming into 1 ending the GUI would not assemble right.

I essentially would like to input a big table that will assemble everything using GUIs. I would rather not hard code this as the story is quite long and would be inefficient to do so.

Here’s a quick example of what I’m looking for:

This would all be in line with Achievements throughout the game. I know there is a possibility that this make not already exist in LUA. If someone knows of a good API in another language such as (C#, Java, JS, Python, PHP, etc.) that’d very helpful as I can easily transfer it to LUA.

Thank you!

7 Likes

Do you have a dictionary example? I would love to tackle this. Would be a neat thing to add to my tool set! Wait, did you already find a solution?

EDIT: Opologies, just saw that you found Defaultios behavior tree plugin. That could be some what easy to transfer to in-game, just check your plugins folder for the code.

1 Like

I’m not aware of anything in Lua, and especially not anything that will plug-and-play with Roblox. But there are several graph/chart markup languages that allow you to define e.g. flowcharts using plaintext in something like a programming language.

I use mermaid in my personal notebooks, for example, because it’s nicely integrated into several notetaking apps. If you’re good with JS, maybe you can render the flowchart on your own machine and use the mermaid API to figure out the coordinates of each node, then convert that to Roblox GUI objects.

EDIT: Seems that mermaid uses something called dagre for the graph layout logic. Installing dager with npm and running the examples gives me output like

Node swilliams: {"label":"Saul Williams","width":160,"height":100,"x":80,"y":200}
Node bpitt: {"label":"Brad Pitt","width":108,"height":100,"x":264,"y":200}
...
Edge hford -> lwilson: {"points":[{"x":440,"y":100},{"x":440,"y":125},{"x":440,"y":150}]}
Edge lwilson -> kbacon: {"points":[{"x":440,"y":250},{"x":440,"y":275},{"x":324.5,"y":324.21875}]}

which could totally be used to generate some Roblox GUI objects.

EDIT EDIT: Why was this bumped 2 years later? xD

1 Like