{"id":15760519,"url":"https://github.com/ylzon/fiagram","last_synced_at":"2025-03-31T09:19:06.453Z","repository":{"id":237879701,"uuid":"795409146","full_name":"ylzon/fiagram","owner":"ylzon","description":"[WIP] F Word React + TypeScript diagram library that uses SVG and HTML for rendering","archived":false,"fork":false,"pushed_at":"2024-09-26T06:01:44.000Z","size":4336,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-06T13:47:36.734Z","etag":null,"topics":["d3","diagram","react","svg","typescript"],"latest_commit_sha":null,"homepage":"https://ylzon.github.io/fiagram/","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/ylzon.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,"publiccode":null,"codemeta":null}},"created_at":"2024-05-03T08:10:21.000Z","updated_at":"2024-09-26T06:01:48.000Z","dependencies_parsed_at":"2024-05-17T16:33:26.101Z","dependency_job_id":"d3e7a477-b56d-42a5-a8c8-05e2c750bfb8","html_url":"https://github.com/ylzon/fiagram","commit_stats":null,"previous_names":["ylzon/fiagram"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ylzon%2Ffiagram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ylzon%2Ffiagram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ylzon%2Ffiagram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ylzon%2Ffiagram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ylzon","download_url":"https://codeload.github.com/ylzon/fiagram/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246443534,"owners_count":20778252,"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":["d3","diagram","react","svg","typescript"],"created_at":"2024-10-04T10:58:32.363Z","updated_at":"2025-03-31T09:19:06.432Z","avatar_url":"https://github.com/ylzon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![fiagram-logo.png](docs/public/fiagram-logo.png)\n\n\n基于 SVG + D3.js，可快速构建出拓扑图、流程图等可视化图形组件\n\n\u003e WIP 项目，目前仅支持 React\n\n### Installation\n\n```bash\nnpm install @fiagram/react\n```\n\n```bash\npnpm add @fiagram/react\n```\n\n### Todo\nReact \n* [x] 支持 i18n 多语言\n* [x] 支持 CSS var\n* [ ] 支持黑白主题\n* [ ] 预置FlowChart、Topology等常用图形\n\nVue\n* [ ] WIP\n\n### React Usage\n\n```javascript\nimport { Diagram } from '@fiagram/react';\n\nconst NodeShape = ({ x, y, width, height, name }) =\u003e {\n  return (\n    \u003cg\u003e\n      \u003crect x={x} y={y} width={width} height={height} fill=\"white\" stroke=\"black\" /\u003e\n      \u003ctext x={x + width / 2} y={y + height / 2} textAnchor=\"middle\" alignmentBaseline=\"middle\"\u003e{name}\u003c/text\u003e\n    \u003c/g\u003e\n  );\n};\n\nconst App = () =\u003e {\n  return (\n    \u003cDiagram\n      shapes={[\n        { name: 'node1', shape: NodeShape }\n      ]}\n      nodes={[\n        { id: '1', x: 100, y: 100, shape: 'node1', width: 100, height: 100, name: 'Node 1' },\n        { id: '2', x: 300, y: 100, shape: 'node1', width: 100, height: 100, name: 'Node 2' },\n        { id: '3', x: 500, y: 100, shape: 'node1', width: 100, height: 100, name: 'Node 3' },\n      ]}\n      links={[\n        { id: '1', type: 'BROKEN_ROUNDED', source: '1', sourceDirection: 'BOTTOM', target: '2', targetDirection: 'TOP', name: 'Link 1' },\n        { id: '2', type: 'BROKEN_ROUNDED', source: '2', sourceDirection: 'BOTTOM', target: '3', targetDirection: 'TOP', name: 'Link 2' },\n      ]}\n    /\u003e\n  );\n};\n\nexport default App;\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fylzon%2Ffiagram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fylzon%2Ffiagram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fylzon%2Ffiagram/lists"}