Build beautiful, interactive flow diagrams: Powered by React Flow, Simplified by Streamlit.
Introducing Markdown Support in Nodes! Now you are no longer limited to having text in your nodes. Use the features offered by Markdown and HTML to spice up your nodes.
The label
attribute on the data
property of SteamlitFlowNode
has been replaced by the content
attribute, which accepts as input a string that can be either plain text, markdown, or raw HTML. For extened support, the label
attribute still works, but is internally reassigned to the content
attribute, but label
will be depricated in the next release.
ReactFlow
watermark on the canvas.A demo for all these features can be found here.
pip install streamlit-flow-component
git clone https://github.com/dkapur17/streamlit-flow.git
cd streamlit-flow
npm install --prefix streamlit_flow/frontend
On the first terminal, run from the root of the repository
cd streamlit_flow/frontend
npm start
On the second terminal, run from the root of the repository
streamlit run example.py
Overhauled State Management: The component now manages the state of the flow diagram automatically. As such, it keeps track of changes to node positions, connections, and more.
Pane Context Menu: Right-clicking on the canvas now opens a context menu, allowing you to add new nodes or reset the layout.
Node Context Menu: Right-clicking on a node now opens a context menu, allowing you to edit or delete the node.
Edge Context Menu: Right-clicking on an edge now opens a context menu, allowing you to edit or delete the edge.
Way more Layouts: The layouts are now more extensive, including Tree, Layered, Force, Stress, Radial, Random and Manual. One can also make a custom layout by inheriting from the Layout
class.
Hackable Python State: The primary state management is done within the component, and the state can be read by Python. This is the intended usage. However, while not recommended, it is possible to modify the state from Python as well if the user wishes to.