{"id":13809333,"url":"https://github.com/MrBlenny/react-flow-chart","last_synced_at":"2025-05-14T05:33:49.664Z","repository":{"id":33659537,"uuid":"156473269","full_name":"MrBlenny/react-flow-chart","owner":"MrBlenny","description":"🌊 A flexible, stateless, declarative flow chart library for react.","archived":false,"fork":false,"pushed_at":"2022-12-30T02:01:09.000Z","size":14619,"stargazers_count":1517,"open_issues_count":100,"forks_count":310,"subscribers_count":33,"default_branch":"master","last_synced_at":"2025-05-09T05:01:47.950Z","etag":null,"topics":["diagram","diagrams","drag-and-drop","flowchart","react","styled-components","typescript","webpack4"],"latest_commit_sha":null,"homepage":"https://mrblenny.github.io/react-flow-chart/index.html","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MrBlenny.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-07T01:34:23.000Z","updated_at":"2025-05-08T03:03:24.000Z","dependencies_parsed_at":"2023-01-15T02:00:35.966Z","dependency_job_id":null,"html_url":"https://github.com/MrBlenny/react-flow-chart","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrBlenny%2Freact-flow-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrBlenny%2Freact-flow-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrBlenny%2Freact-flow-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrBlenny%2Freact-flow-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MrBlenny","download_url":"https://codeload.github.com/MrBlenny/react-flow-chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254077034,"owners_count":22010643,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["diagram","diagrams","drag-and-drop","flowchart","react","styled-components","typescript","webpack4"],"created_at":"2024-08-04T01:02:18.986Z","updated_at":"2025-05-14T05:33:47.976Z","avatar_url":"https://github.com/MrBlenny.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React Flow Chart\n\n[![CircleCI](https://circleci.com/gh/MrBlenny/react-flow-chart.svg?style=svg)](https://circleci.com/gh/MrBlenny/react-flow-chart)\n\n- [X] Dragabble Nodes and Canvas\n- [x] Create curved links between ports\n- [x] Custom components for Canvas, Links, Ports, Nodes\n- [X] React state container\n- [X] Update state on Select/Hover nodes, ports and links\n- [x] Base functionality complete\n- [X] Stable NPM version\n- [X] Scroll/Pinch canvas to zoom\n- [ ] Ctrl+z/Ctrl+y history\n- [X] Read-only mode\n- [ ] Redux state container\n- [ ] Arrow heads on links\n- [ ] Docs\n\n### [Storybook Demo](https://mrblenny.github.io/react-flow-chart/index.html?selectedKind=With%20Sidebar\u0026selectedStory=default\u0026full=0\u0026addons=1\u0026stories=1\u0026panelRight=0\u0026addonPanel=storybook-addon-viewport%2Faddon-panel)\n\n### [CodeSandbox Demo](https://codesandbox.io/s/4w46wv71o7)\n\nThis project aims to build a highly customisable, declarative flow chart library. Critically, you control the state. Pick from Redux, MobX, React or any other state managment library - simply pass in the current state and hook up the callbacks.\n\nFor example:\n\n![demo](./images/demo.gif)\n\n## Data Stucture\n\nThe flow chart is designed as a collection of Nodes, Ports and Links. You can specify your own custom properties, making this format quite flexible. See [types/chart.ts](./src/types/chart.ts). Note, nodes, ports and links should have a unique id.\n\n#### Example\n\n```ts\n\nexport const chart: IChart = {\n  offset: {\n    x: 0,\n    y: 0,\n  },\n  scale: 1,\n  nodes: {\n    node1: {\n      id: 'node1',\n      type: 'output-only',\n      position: {\n        x: 300,\n        y: 100,\n      },\n      ports: {\n        port1: {\n          id: 'port1',\n          type: 'output',\n          properties: {\n            value: 'yes',\n          },\n        },\n        port2: {\n          id: 'port2',\n          type: 'output',\n          properties: {\n            value: 'no',\n          },\n        },\n      },\n    },\n    node2: {\n      id: 'node2',\n      type: 'input-output',\n      position: {\n        x: 300,\n        y: 300,\n      },\n      ports: {\n        port1: {\n          id: 'port1',\n          type: 'input',\n        },\n        port2: {\n          id: 'port2',\n          type: 'output',\n        },\n      },\n    },\n  },\n  links: {\n    link1: {\n      id: 'link1',\n      from: {\n        nodeId: 'node1',\n        portId: 'port2',\n      },\n      to: {\n        nodeId: 'node2',\n        portId: 'port1',\n      },\n    },\n  },\n  selected: {},\n  hovered: {},\n}\n\n```\n\nThis will produce a simple 2 noded chart which looks like:\n\n![Demo](./images/demo.png)\n\n## Basic Usage\n\n```bash\nnpm i @mrblenny/react-flow-chart\n```\n\nMost components/types are available as a root level export. Check the storybook demo for more examples.\n\n```tsx\nimport { FlowChartWithState } from \"@mrblenny/react-flow-chart\";\n\nconst chartSimple = {\n  offset: {\n    x: 0,\n    y: 0\n  },\n  nodes: {\n    node1: {\n      id: \"node1\",\n      type: \"output-only\",\n      position: {\n        x: 300,\n        y: 100\n      },\n      ports: {\n        port1: {\n          id: \"port1\",\n          type: \"output\",\n          properties: {\n            value: \"yes\"\n          }\n        },\n        port2: {\n          id: \"port2\",\n          type: \"output\",\n          properties: {\n            value: \"no\"\n          }\n        }\n      }\n    },\n    node2: {\n      id: \"node2\",\n      type: \"input-output\",\n      position: {\n        x: 300,\n        y: 300\n      },\n      ports: {\n        port1: {\n          id: \"port1\",\n          type: \"input\"\n        },\n        port2: {\n          id: \"port2\",\n          type: \"output\"\n        }\n      }\n    },\n  },\n  links: {\n    link1: {\n      id: \"link1\",\n      from: {\n        nodeId: \"node1\",\n        portId: \"port2\"\n      },\n      to: {\n        nodeId: \"node2\",\n        portId: \"port1\"\n      },\n    },\n  },\n  selected: {},\n  hovered: {}\n};\n\nconst Example = (\n  \u003cFlowChartWithState initialValue={chartSimple} /\u003e\n);\n```\n\n### With Internal State\n[stories/InternalReactState.tsx](./stories/InternalReactState.tsx)\n\n### With External State\n[stories/ExternalReactState.tsx](./stories/ExternalReactState.tsx)\n\n### Readonly Mode\n[stories/ReadonlyMode.tsx](./stories/ReadonlyMode.tsx)\n\n### Other Demos\n[stories/ExternalReactState.tsx](./stories)\n\n\n## Contributing\n\nIf you're interested in helping out, let me know. \n\nIn particular, would be great to get a hand with docs and redux / mobx integrations.\n\n\n## Development\n\n```bash\nnpm install\nnpm run start:storybook\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMrBlenny%2Freact-flow-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMrBlenny%2Freact-flow-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMrBlenny%2Freact-flow-chart/lists"}