Flow Graphs in Streamlit?

Using Streamlit
1

Summary

I am brand new to streamlit, I am looking for a fast way to build an mvp for an idea, and think this is the perfect environment, but am looking for a library that will accomplish what I am looking for.

Is there any library or solution that comes to mind accessible in Streamlit that can visualize and animate a Flow Graph? I am looking for a platform to quickly build and iterate a visual scripting tool for directing cashflows over a directed flow graph.

I saw some references to networkx and pyvis in this forum, but am looking for something more tailored to flows than to networks.

Examples in other environments/domains that are higher barrier to entry, and not Python friendly:
Node Editor in imgui

ReactFlow

Bolt in Unity

Nodes in Blender
https://docs.blender.org/manual/en/2.79/render/blender_render/materials/nodes/introduction.html

Additional information

Sorry if this is the wrong tag, but please let me know any ideas!

1 Like
2

Hey @mcryan6 :wave:

Sorry for the late reply. If you are willing to use Python then you have options like:

These are comprehensive and easier to get going. If you are more onto Javascript the ones you mentioned are worth it beside:

Feel free to choose one that best matches your use case.
Hope it helps and eases your process to build an MVP. All the best on that.

Thanks in advance!

1 Like
3

There’s streamlit barfi. It might be close to what you are looking for. Though to me it looks a bit too young yet.

Also there’s an early streamlit-react-flow too.

2 Likes
4

It would be awesome to have an updated version of Node-Based UIs in React – React Flow, the streamlit-react-flow has no maintenance nor updates since inception

1 Like
5

I’m looking for the flow graph too. update to NOW, the barfi is the closest option but it looks too young. There are so many LLM demoes associated with langchain, but there is no one like Langflow!

6

I just launched a new component called Streamlit Flow, that is a somewhat extensive wrapper over the React Flow Library. There is still a lot to be done, but I have implemented the necessary features to get most use cases going. Hope you guys like it!

3 Likes
7

This is a fantastic component, Dhruv! We appreciate you creating and sharing it with the community! :hugs:

Charly

2 Likes
8

amazing stuff! left a question issue (on node styles) :slight_smile:

9

Just wanted to add an announcement here. I’ve released v1.0.0 with a lot more features such as building full fledged flows from within the canvas itself. I’ve also hosted a docs-cum-demo site on Streamlit Cloud. Do check it out at

4 Likes
10

Amazing ! the exact thing that I looked for :crown:
will be a glad for colors capabilities for the nodes

11

Really great stuff. Thank you for sharing it!

1 Like
12

Hey @Elad_Beja . You can set node colours using the style attribute on the StreamlitFlowNode class. For example: style={'color': 'white', 'backgroundColor': '#00c04b', 'border': '2px solid white'} gives you something like:

image
image884Ă—340 7.93 KB

13

cool ! Thank you very much :pray:

1 Like