{"id":13773874,"url":"https://github.com/ts-graphviz/react","last_synced_at":"2025-05-11T06:31:38.268Z","repository":{"id":39252820,"uuid":"221092835","full_name":"ts-graphviz/react","owner":"ts-graphviz","description":"⚛︎ Graphviz-dot Renderer using React.","archived":true,"fork":false,"pushed_at":"2024-03-17T15:29:12.000Z","size":3377,"stargazers_count":29,"open_issues_count":8,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-29T20:22:34.983Z","etag":null,"topics":["dot","graphviz","graphviz-dot","graphviz-dot-renderer","hacktoberfest","react","react-component-library","react-renderer","typescript-library"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@ts-graphviz/react","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/ts-graphviz.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,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":"ts-graphviz","patreon":null,"open_collective":"ts-graphviz","ko_fi":null,"tidelift":"npm/ts-graphviz","community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-11-12T00:05:19.000Z","updated_at":"2025-01-25T02:32:52.000Z","dependencies_parsed_at":"2024-04-15T11:23:49.681Z","dependency_job_id":"adddd60a-bf3b-4333-b579-33f62e2a1a5b","html_url":"https://github.com/ts-graphviz/react","commit_stats":{"total_commits":196,"total_committers":9,"mean_commits":21.77777777777778,"dds":"0.40306122448979587","last_synced_commit":"7098cc2edb702a75da7011377d85e80309c9eb11"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ts-graphviz%2Freact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ts-graphviz%2Freact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ts-graphviz%2Freact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ts-graphviz%2Freact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ts-graphviz","download_url":"https://codeload.github.com/ts-graphviz/react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253093550,"owners_count":21853021,"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":["dot","graphviz","graphviz-dot","graphviz-dot-renderer","hacktoberfest","react","react-component-library","react-renderer","typescript-library"],"created_at":"2024-08-03T17:01:21.159Z","updated_at":"2025-05-11T06:31:38.005Z","avatar_url":"https://github.com/ts-graphviz.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ts-graphviz","https://opencollective.com/ts-graphviz","https://tidelift.com/funding/github/npm/ts-graphviz"],"categories":["Miscellaneous"],"sub_categories":[],"readme":"\n# This Repository is archived.\n# Moved to \u003chttps://github.com/ts-graphviz/ts-graphviz\u003e\n\n---\n\n[![NodeCI](https://github.com/ts-graphviz/react/workflows/NodeCI/badge.svg)](https://github.com/ts-graphviz/react/actions?workflow=NodeCI)\n[![npm version](https://badge.fury.io/js/%40ts-graphviz%2Freact.svg)](https://badge.fury.io/js/%40ts-graphviz%2Freact)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n\n# @ts-graphviz/react\n\nGraphviz-dot Renderer using React.\n\n## Installation\n\nThe module can then be installed using [npm](https://www.npmjs.com/):\n\n[![NPM](https://nodei.co/npm/@ts-graphviz/react.png)](https://nodei.co/npm/@ts-graphviz/react/)\n\n```bash\n# yarn\n$ yarn add @ts-graphviz/react react\n# or npm\n$ npm install -S @ts-graphviz/react react\n```\n\n\u003e Install [React](https://github.com/facebook/react/) as peerDependencies at the same time.\n\n## Example\n\n```jsx\nimport React from 'react';\nimport { Digraph, Node, Subgraph, Edge, DOT, renderToDot } from '@ts-graphviz/react';\n\nconst Example = () =\u003e (\n  \u003cDigraph\n    rankdir=\"TB\"\n    edge={{\n      color: 'blue',\n      fontcolor: 'blue',\n    }}\n    node={{\n      shape: 'none',\n    }}\n  \u003e\n    \u003cNode\n      id=\"nodeA\"\n      shape=\"none\"\n      label={\n        \u003cDOT.TABLE BORDER=\"0\" CELLBORDER=\"1\" CELLSPACING=\"0\"\u003e\n          \u003cDOT.TR\u003e\n            \u003cDOT.TD\u003eleft\u003c/DOT.TD\u003e\n            \u003cDOT.TD PORT=\"m\"\u003emiddle\u003c/DOT.TD\u003e\n            \u003cDOT.TD PORT=\"r\"\u003eright\u003c/DOT.TD\u003e\n          \u003c/DOT.TR\u003e\n        \u003c/DOT.TABLE\u003e\n      }\n    /\u003e\n\n    \u003cSubgraph id=\"cluster\" label=\"Cluster\" labeljust=\"l\"\u003e\n      \u003cNode id=\"nodeB\" label=\"This is label for nodeB.\" /\u003e\n    \u003c/Subgraph\u003e\n    \u003cEdge targets={['nodeB', 'nodeA:m']} comment=\"Edge from node A to B\" label={\u003cDOT.B\u003eA to B\u003c/DOT.B\u003e} /\u003e\n  \u003c/Digraph\u003e\n);\n\nconst dot = renderToDot(\u003cExample /\u003e);\n\nconsole.log(dot);\n```\n\n### Output dot\n\n```dot\ndigraph {\n  rankdir = \"TB\";\n  edge [\n    color = \"blue\",\n    fontcolor = \"blue\",\n  ];\n  node [\n    shape = \"none\",\n  ];\n  \"nodeA\" [\n    shape = \"none\",\n    label = \u003c\u003cTABLE BORDER=\"0\" CELLBORDER=\"1\" CELLSPACING=\"0\"\u003e\u003cTR\u003e\u003cTD\u003eleft\u003c/TD\u003e\u003cTD PORT=\"m\"\u003emiddle\u003c/TD\u003e\u003cTD PORT=\"r\"\u003eright\u003c/TD\u003e\u003c/TR\u003e\u003c/TABLE\u003e\u003e,\n  ];\n  subgraph \"cluster\" {\n    labeljust = \"l\";\n    label = \"Cluster\";\n    \"nodeB\" [\n      label = \"This is label for nodeB.\",\n    ];\n  }\n  // Edge from node A to B\n  \"nodeB\" -\u003e \"nodeA\":\"m\" [\n    label = \u003c\u003cB\u003eA to B\u003c/B\u003e\u003e,\n  ];\n}\n```\n\n![dot](./example/example.svg)\n\n## See Also\n\nGraphviz-dot Test and Integration\n\n- [ts-graphviz](https://github.com/ts-graphviz/ts-graphviz)\n  - Graphviz library for TypeScript.\n- [jest-graphviz](https://github.com/ts-graphviz/jest-graphviz)\n  - Jest matchers that supports graphviz integration.\n- [setup-graphviz](https://github.com/ts-graphviz/setup-graphviz)\n  - GitHub Action to set up Graphviz cross-platform(Linux, macOS, Windows).\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://blog.kamiazya.tech/\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/35218186?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eYuki Yamazaki\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/ts-graphviz/react/commits?author=kamiazya\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/ts-graphviz/react/commits?author=kamiazya\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"#ideas-kamiazya\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/ts-graphviz/react/commits?author=kamiazya\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/nagasawaryoya\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/53528726?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003enagasawaryoya\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/ts-graphviz/react/commits?author=nagasawaryoya\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/ts-graphviz/react/commits?author=nagasawaryoya\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/tokidrill\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/42460318?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eYukiSasaki\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/ts-graphviz/react/commits?author=tokidrill\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/ts-graphviz/react/commits?author=tokidrill\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors)\nspecification. Contributions of any kind welcome!\n\n## License\n\nThis software is released under the MIT License, see [LICENSE](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fts-graphviz%2Freact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fts-graphviz%2Freact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fts-graphviz%2Freact/lists"}