{"id":17991065,"url":"https://github.com/lempiy/react-direct-graph","last_synced_at":"2025-03-25T23:31:55.863Z","repository":{"id":34942684,"uuid":"192426663","full_name":"lempiy/react-direct-graph","owner":"lempiy","description":":straight_ruler: React component for drawing direct graphs with rectangular (non-curve) edges.","archived":false,"fork":false,"pushed_at":"2023-01-05T02:58:09.000Z","size":4751,"stargazers_count":28,"open_issues_count":25,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T13:06:45.804Z","etag":null,"topics":["component","diagram","flowchart","graph","react","svg","visualization"],"latest_commit_sha":null,"homepage":"https://lempiy.github.io/react-direct-graph/","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/lempiy.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2019-06-17T22:28:21.000Z","updated_at":"2025-02-18T14:12:51.000Z","dependencies_parsed_at":"2023-01-15T10:49:19.148Z","dependency_job_id":null,"html_url":"https://github.com/lempiy/react-direct-graph","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lempiy%2Freact-direct-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lempiy%2Freact-direct-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lempiy%2Freact-direct-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lempiy%2Freact-direct-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lempiy","download_url":"https://codeload.github.com/lempiy/react-direct-graph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245561889,"owners_count":20635833,"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":["component","diagram","flowchart","graph","react","svg","visualization"],"created_at":"2024-10-29T19:19:59.991Z","updated_at":"2025-03-25T23:31:50.843Z","avatar_url":"https://github.com/lempiy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/lempiy/react-direct-graph.svg?branch=master)](https://travis-ci.org/lempiy/react-direct-graph) [![NPM](https://img.shields.io/npm/v/react-direct-graph.svg)](https://www.npmjs.com/package/react-direct-graph) [![Maintainability](https://api.codeclimate.com/v1/badges/d333ef5cfaaa6a432aca/maintainability)](https://codeclimate.com/github/lempiy/react-direct-graph/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/d333ef5cfaaa6a432aca/test_coverage)](https://codeclimate.com/github/lempiy/react-direct-graph/test_coverage) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n![react-direct-graph](./img/graph.png)\n\n\u003e React component for drawing direct graphs with rectangular (non-curve) edge\n\n## Examples\n\n[Samples with code and preview](https://lempiy.github.io/react-direct-graph/)\n\n## Install\n\n```bash\nnpm install --save react-direct-graph\n```\n\n## Usage\n\n```jsx\nimport React, { Component } from \"react\";\n\nimport DirectGraph from \"react-direct-graph\";\n\nconst graph = [\n    {\n        id: \"A\",\n        next: [\"B\"]\n    },\n    {\n        id: \"B\",\n        next: [\"C\", \"D\", \"E\"]\n    },\n    {\n        id: \"C\",\n        next: [\"F\"]\n    },\n    {\n        id: \"D\",\n        next: [\"J\"]\n    },\n    {\n        id: \"E\",\n        next: [\"J\"]\n    },\n    {\n        id: \"J\",\n        next: [\"I\"]\n    },\n    {\n        id: \"I\",\n        next: [\"H\"]\n    },\n    {\n        id: \"F\",\n        next: [\"K\"]\n    },\n    {\n        id: \"K\",\n        next: [\"L\"]\n    },\n    {\n        id: \"H\",\n        next: [\"L\"]\n    },\n    {\n        id: \"L\",\n        next: [\"P\"]\n    },\n    {\n        id: \"P\",\n        next: [\"M\", \"N\"]\n    },\n    {\n        id: \"M\",\n        next: []\n    },\n    {\n        id: \"N\",\n        next: []\n    }\n];\n\nexport class ExampleBasic extends Component {\n    render() {\n        const { cellSize, padding } = this.props;\n        return (\n            \u003cDirectGraph list={graph} cellSize={cellSize} padding={padding} /\u003e\n        );\n    }\n}\n```\n\n## License\n\nMIT © [lempiy](https://github.com/lempiy)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flempiy%2Freact-direct-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flempiy%2Freact-direct-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flempiy%2Freact-direct-graph/lists"}