New Component: Streamlit Flow - Beautiful, Interactive and Flexible Flow Diagrams in Streamlit

Custom Components
, ,
1

Hey everyone!

I’d like to let the community know about this new component I’m working on called Streamlit Flow. It is a streamlit component wrapper over the Flow diagram library React Flow.

For some project that I was working on, I needed the ability to create interactive flow diagrams. I had a look at graphviz, but that doesn’t have intractability from what I saw. Barfi looked promising, but it didn’t quite hit the right spot. I came across React Flow, that has an absolutely stunning UI and a lot of interactive capabilities. Turns out that there already exists a streamlit-react-flow component, but it doesn’t have a lot of the features I needed, and is not currently maintained. As such, I decided it was time to get my hands dirty :smiley:

QuickDemo

I think I have made decent progress in porting a lot of the functionality of React Flow into Streamlit Flow, but being the mature and complex ecosystem that React Flow is, a full (or nearly full) port is going to take significant time and effort.

Some features include:

  • Super fast flow building
  • Flexible node and edge elements
  • Built-in layout engine (ElkJS)
  • Capturing Component Interaction within Python

There are a lot more details in the README file of the repo:

The Component is now available on PyPI. Install it using

pip install streamlit-flow-component

Would love to hear some feedback from the community, to see what direction to drive this project in. Cheers!

11 Likes
2

I like it a lot! Could you explain how you capture the component interaction within python? I would to launch a function whenever I click on one of the nodes

3

Hi! You can find the example here: https://stflow.streamlit.app/Interactions#1-getting-interaction-element. The component returns the element id of the element that has been clicked and None if no element has been clicked, or the pane has been clicked. You can use a conditional statement on the return value to trigger the function as required.

1 Like
4

Ok thanks, sorry I had missed it. It works very smoothly, thanks for the component!
A feature I’d love is a more complex customization of the nodes, ideally to be able to replace them by images.
But this version is already very cool, I was really looking for this kind of component!

5

I am currently working on a more complex node representation. Look out for the features in the new version once I release it!

1 Like
6

From v1.2.8, nodes now support Markdown and HTML rendering. So you are no longer limited to plaintext within the nodes!

image
image1062×757 84.1 KB

Check out the demo at https://stflow.streamlit.app/Markdown_Node

2 Likes
7

I am planning to build a “Kanban” like app to track workflow, including planning, working in progress, complete, etc. I think Streamlit Flow can be the basic engine.
If you have other suggestions, please let me know.

Thank you for the great work.