{"data":{"slug":"reaviz-reaflow","name":"reaflow","tagline":"🎯 React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus.","github_url":"https://github.com/reaviz/reaflow","owner":"reaviz","repo":"reaflow","owner_avatar_url":"https://avatars.githubusercontent.com/u/63881140?v=4","primary_language":"TypeScript","stars":2489,"forks":160,"topics":["diagrams","elkjs","flowchart","hacktoberfest","node-editor","react","reactjs","visualizations","workflow"],"archived":false,"github_pushed_at":"2025-06-04T09:08:50+00:00","maintenance_label":"Dormant","url":"https://www.graphcanon.com/tools/reaviz-reaflow","markdown_url":"https://www.graphcanon.com/tools/reaviz-reaflow.md","api_url":"https://www.graphcanon.com/api/graphcanon/tools/reaviz-reaflow","graph_url":"https://www.graphcanon.com/api/graphcanon/graph?tool=reaviz-reaflow","description":"🎯 React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus.","homepage_url":"https://reaflow.dev","license":"Apache-2.0","open_issues":89,"watchers":17,"ai_summary":null,"readme_excerpt":"<div align=\"center\">\n  <img width=\"650\" src=\"docs/assets/logo-light.png\">\n  <br />\n  Node-based Visualizations for React\n  <br /><br />\n  <a href=\"https://github.com/reaviz/reaflow/workflows/build/\">\n    <img src=\"https://github.com/reaviz/reaflow/workflows/build/badge.svg?branch=master\" />\n  </a>\n  <a href=\"https://npm.im/reaflow\">\n    <img src=\"https://img.shields.io/npm/v/reaflow.svg\" />\n  </a>\n  <a href=\"https://npm.im/reaflow\">\n    <img src=\"https://badgen.net/npm/dw/reaflow\" />\n  </a>\n  <a href=\"https://github.com/reaviz/reaflow/blob/master/LICENSE\">\n    <img src=\"https://badgen.now.sh/badge/license/apache2\" />\n  </a>\n  <a href=\"https://discord.gg/tt8wGExq35\">\n    <img src=\"https://img.shields.io/discord/773948315037073409?label=discord\">\n  </a>\n  <a href=\"https://opencollective.com/reaviz\">\n    <img alt=\"Open Collective backers and sponsors\" src=\"https://img.shields.io/opencollective/all/reaviz?label=backers\">\n  </a>\n</div>\n\n---\n\nREAFLOW is a modular diagram engine for building static or interactive editors. The library is feature-rich and modular allowing for displaying complex visualizations with total customizability.\n\n## 🚀 Quick Links\n\n- Checkout the [**docs and demos**](https://reaflow.dev)\n- Learn about updates from the [Changelog](CHANGELOG.md)\n\n## 💎 Other Projects\n\n- [Reagraph](https://reagraph.dev?utm=reaflow) - Open-source library for large webgl based network graphs.\n- [Reablocks](https://reablocks.dev?utm=reaflow) - Open-source component library for React based on Tailwind.\n- [Reaviz](https://reaviz.dev?utm=reaflow) - Open-source library for data visulizations for React. \n- [Reachat](https://reachat.dev?utm=reaflow) - Open-source library for building LLM/Chat UIs for React.\n- \n## ✨ Features\n\n- Complex automatic layout leveraging ELKJS\n- Easy Node/Edge/Port customizations\n- Zooming / Panning / Centering controls\n- Drag and drop Node/Port connecting and rearranging\n- Nesting of Nodes/Edges\n- Proximity based Node linking helper\n- Node/Edge selection helper\n- Undo/Redo helper\n\n## 📦 Usage\n\nInstall the package via **NPM**:\n\n```\nnpm i reaflow --save\n```\n\nInstall the package via **Yarn**:\n\n```\nyarn add reaflow\n```\n\nImport the component into your app and add some nodes and edges:\n\n```jsx\nimport React from 'react';\nimport { Canvas } from 'reaflow';\n\nexport default () => (\n  <Canvas\n    maxWidth={800}\n    maxHeight={600}\n    nodes={[\n      {\n        id: '1',\n        text: '1'\n      },\n      {\n        id: '2',\n        text: '2'\n      }\n    ]}\n    edges={[\n      {\n        id: '1-2',\n        from: '1',\n        to: '2'\n      }\n    ]}\n  />\n);\n```\n\n## 🔭 Development\n\nIf you want to run reaflow locally, its super easy!\n\n- Clone the repo\n- `npm i`\n- `npm start`\n- Browser opens to Storybook page\n\n## ❤️ Contributors\n\nThanks to all our contributors!\n\n<a href=\"https://github.com/reaviz/reaviz/graphs/contributors\"><img src=\"https://opencollective.com/reaviz/contributors.svg?width=890\" /></a>","github_created_at":"2020-10-28T13:25:07+00:00","created_at":"2026-07-15T10:48:43.107099+00:00","updated_at":"2026-07-15T10:48:46.377981+00:00","categories":[{"slug":"llm-frameworks","name":"LLM Frameworks","url":"https://www.graphcanon.com/categories/llm-frameworks","markdown_url":"https://www.graphcanon.com/categories/llm-frameworks.md","api_url":"https://www.graphcanon.com/api/graphcanon/categories/llm-frameworks"},{"slug":"vector-databases","name":"Vector Databases","url":"https://www.graphcanon.com/categories/vector-databases","markdown_url":"https://www.graphcanon.com/categories/vector-databases.md","api_url":"https://www.graphcanon.com/api/graphcanon/categories/vector-databases"}],"tags":[{"slug":"diagrams","name":"diagrams"},{"slug":"elkjs","name":"elkjs"},{"slug":"flowchart","name":"flowchart"},{"slug":"hacktoberfest","name":"hacktoberfest"},{"slug":"node-editor","name":"node-editor"},{"slug":"react","name":"react"},{"slug":"reactjs","name":"reactjs"},{"slug":"visualizations","name":"visualizations"}],"trust":{"provenance":{"is_fork":false,"github_id":308024078,"owner_type":"Organization","methodology":"github_public_v1","parent_repo":null,"near_duplicate_slugs":[]},"computed_at":"2026-07-15T10:48:44.244Z","maintenance":{"label":"Dormant","score":18,"methodology":"github_public_v1","releases_90d":0,"days_since_push":406,"last_release_at":null},"security_summary":{"status":"no_lockfile","scanner":null,"low_count":0,"high_count":0,"last_scan_at":"2026-07-15T10:48:44.600Z","medium_count":0,"scan_profile":"none","critical_count":0}},"capability_facts":{"mcp":{"source":"repo_scan","observed_at":"2026-07-15T10:48:44.017Z","server_manifest":false},"scan":{"source":"repo_scan","observed_at":"2026-07-15T10:48:44.017Z"},"has_cli":{"value":true,"source":"package.json:bin|scripts","observed_at":"2026-07-15T10:48:44.017Z"},"languages":{"value":["typescript","javascript"],"source":"github.language+package.json","observed_at":"2026-07-15T10:48:44.017Z"},"license_spdx":{"value":"Apache-2.0","source":"github.license","observed_at":"2026-07-15T10:48:44.017Z"}}}}