# Streamlit Flow
[](https://stflow.streamlit.app)
**Build beautiful, interactive flow diagrams: Powered by React Flow, Simplified by Streamlit.**
### 🎉 Version 1.2.8 is out now! 🎉
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.*
##### Minor Changes
- Can optionally hide the `ReactFlow` watermark on the canvas.
## Features
- Create, edit and visualize beautiful flow diagrams.
- Add nodes and edges, move them around, pan and zoom.
- Edit node and edge properties.
- Easy to use Layouts - Layered, Tree, Force, Stress, Radial, Random, and Manual.
- Markdown Support in Nodes.
- Interactions with Streamlit - clicks on nodes and edges can be captured in Streamlit.
A demo for all these features can be found [here](https://stflow.streamlit.app).
## Installation
```bash
pip install streamlit-flow-component
```
## Running the example
#### Install the dependencies
```bash
git clone https://github.com/dkapur17/streamlit-flow.git
cd streamlit-flow
npm install --prefix streamlit_flow/frontend
```
#### Run the frontent
On the first terminal, run from the root of the repository
```bash
cd streamlit_flow/frontend
npm start
```
#### Run this Example Streamlit App
On the second terminal, run from the root of the repository
```bash
streamlit run example.py
```
## Change log
### Version 1.0.0
* **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.
### Version 0.6.0
* The initial release of the library, with the ability to visualize flow diagrams.
* Create nodes and edges, move them around, pan and zoom.
* Automatic Layered Layout Supported
* Interactions sent to Streamlit - The component returns the ID of the element that was clicked on.
Raw data
{
"_id": null,
"home_page": "https://github.com/dkapur17/streamlit-flow",
"name": "streamlit-flow-component",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": null,
"author": "Dhruv Kapur",
"author_email": "dhruvkapur4@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/bf/98/74af47cea4afa499ccb565ad4bb595ec25e19b76652d20f5c564f3a698ed/streamlit-flow-component-1.2.9.tar.gz",
"platform": null,
"description": "\n\n# Streamlit Flow\n[](https://stflow.streamlit.app)\n\n\n**Build beautiful, interactive flow diagrams: Powered by React Flow, Simplified by Streamlit.**\n\n### \ud83c\udf89 Version 1.2.8 is out now! \ud83c\udf89\n\nIntroducing **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.\n\n\n\n*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.*\n\n##### Minor Changes\n\n- Can optionally hide the `ReactFlow` watermark on the canvas.\n\n\n## Features\n\n- Create, edit and visualize beautiful flow diagrams.\n- Add nodes and edges, move them around, pan and zoom.\n- Edit node and edge properties.\n- Easy to use Layouts - Layered, Tree, Force, Stress, Radial, Random, and Manual.\n- Markdown Support in Nodes.\n- Interactions with Streamlit - clicks on nodes and edges can be captured in Streamlit.\n\n\nA demo for all these features can be found [here](https://stflow.streamlit.app).\n\n## Installation\n\n```bash\npip install streamlit-flow-component\n```\n\n## Running the example\n\n\n#### Install the dependencies\n```bash\ngit clone https://github.com/dkapur17/streamlit-flow.git\ncd streamlit-flow\nnpm install --prefix streamlit_flow/frontend\n```\n\n#### Run the frontent\nOn the first terminal, run from the root of the repository\n```bash\ncd streamlit_flow/frontend\nnpm start\n```\n\n#### Run this Example Streamlit App\nOn the second terminal, run from the root of the repository\n```bash\nstreamlit run example.py\n```\n\n## Change log\n\n### Version 1.0.0\n\n* **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.\n\n* **Pane Context Menu**: Right-clicking on the canvas now opens a context menu, allowing you to add new nodes or reset the layout.\n\n* **Node Context Menu**: Right-clicking on a node now opens a context menu, allowing you to edit or delete the node.\n\n* **Edge Context Menu**: Right-clicking on an edge now opens a context menu, allowing you to edit or delete the edge.\n\n* **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.\n\n* **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.\n\n### Version 0.6.0\n\n* The initial release of the library, with the ability to visualize flow diagrams.\n* Create nodes and edges, move them around, pan and zoom.\n* Automatic Layered Layout Supported\n* Interactions sent to Streamlit - The component returns the ID of the element that was clicked on.\n",
"bugtrack_url": null,
"license": null,
"summary": "Streamlit Component Wrapper for React Flow",
"version": "1.2.9",
"project_urls": {
"Homepage": "https://github.com/dkapur17/streamlit-flow"
},
"split_keywords": [],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "8b9043633723308db47c0b221186c559b0c463d392fcac2843bc692a437e0590",
"md5": "4993660c2b0cac911435f8acf4f14238",
"sha256": "474f410b115272e2d586d789a98976326c55547349d14933edc943f110f0f7ad"
},
"downloads": -1,
"filename": "streamlit_flow_component-1.2.9-py3-none-any.whl",
"has_sig": false,
"md5_digest": "4993660c2b0cac911435f8acf4f14238",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 4590424,
"upload_time": "2024-08-06T14:36:40",
"upload_time_iso_8601": "2024-08-06T14:36:40.144803Z",
"url": "https://files.pythonhosted.org/packages/8b/90/43633723308db47c0b221186c559b0c463d392fcac2843bc692a437e0590/streamlit_flow_component-1.2.9-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "bf9874af47cea4afa499ccb565ad4bb595ec25e19b76652d20f5c564f3a698ed",
"md5": "c5914a94de1190c284d4728a015626e1",
"sha256": "11a5ff4fdc5c3a39d5f970ff385b9ff03d75324af3bc587ef5c4425eb55bf521"
},
"downloads": -1,
"filename": "streamlit-flow-component-1.2.9.tar.gz",
"has_sig": false,
"md5_digest": "c5914a94de1190c284d4728a015626e1",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 4533400,
"upload_time": "2024-08-06T14:36:51",
"upload_time_iso_8601": "2024-08-06T14:36:51.697041Z",
"url": "https://files.pythonhosted.org/packages/bf/98/74af47cea4afa499ccb565ad4bb595ec25e19b76652d20f5c564f3a698ed/streamlit-flow-component-1.2.9.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-08-06 14:36:51",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "dkapur17",
"github_project": "streamlit-flow",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "streamlit-flow-component"
}
JSON
