{"id":13406331,"url":"https://github.com/projectstorm/react-diagrams","last_synced_at":"2025-09-09T20:50:24.308Z","repository":{"id":38451964,"uuid":"60334478","full_name":"projectstorm/react-diagrams","owner":"projectstorm","description":"a super simple, no-nonsense diagramming library written in react that just works","archived":false,"fork":false,"pushed_at":"2025-04-03T17:33:25.000Z","size":14171,"stargazers_count":8922,"open_issues_count":318,"forks_count":1189,"subscribers_count":146,"default_branch":"master","last_synced_at":"2025-05-12T16:22:57.011Z","etag":null,"topics":["beta","canvas","demo","diagram","diagrams","drag","editing-diagrams","factories","flowchart","modular","react","svg","typescript","visualization","web"],"latest_commit_sha":null,"homepage":"https://projectstorm.cloud/react-diagrams","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/projectstorm.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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,"zenodo":null}},"created_at":"2016-06-03T09:10:01.000Z","updated_at":"2025-05-11T21:38:25.000Z","dependencies_parsed_at":"2024-02-19T23:25:43.593Z","dependency_job_id":"8a9fddf8-131f-4ed0-9afd-a8d38c18b6bc","html_url":"https://github.com/projectstorm/react-diagrams","commit_stats":{"total_commits":755,"total_committers":95,"mean_commits":7.947368421052632,"dds":0.5258278145695364,"last_synced_commit":"999f4902e2c7b35ff9743850b25f8a17c0ed5951"},"previous_names":[],"tags_count":90,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectstorm%2Freact-diagrams","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectstorm%2Freact-diagrams/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectstorm%2Freact-diagrams/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectstorm%2Freact-diagrams/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/projectstorm","download_url":"https://codeload.github.com/projectstorm/react-diagrams/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253774660,"owners_count":21962210,"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":["beta","canvas","demo","diagram","diagrams","drag","editing-diagrams","factories","flowchart","modular","react","svg","typescript","visualization","web"],"created_at":"2024-07-30T19:02:27.443Z","updated_at":"2025-05-12T16:23:42.043Z","avatar_url":"https://github.com/projectstorm.png","language":"TypeScript","funding_links":[],"categories":["Data Visualization","TypeScript","Applications","React 相关","前端开发框架及项目","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["Design Tool (e.g. Figma, Excalidraw)","其他_文本生成、文本对话"],"readme":"# Introduction\n\n[![Join the chat at https://gitter.im/projectstorm/react-diagrams](https://badges.gitter.im/projectstorm/react-diagrams.svg)](https://gitter.im/projectstorm/react-diagrams?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge) [![NPM](https://img.shields.io/npm/v/@projectstorm/react-diagrams.svg)](https://npmjs.org/package/@projectstorm/react-diagrams) [![Package Quality](https://npm.packagequality.com/shield/storm-react-diagrams.svg)](https://packagequality.com/#?package=storm-react-diagrams)\n\n![](.gitbook/assets/logo.jpg)\n\n**DEMO**: [http://projectstorm.cloud/react-diagrams](http://projectstorm.cloud/react-diagrams)\n\n**DOCS \\(wip\\)** [https://projectstorm.gitbook.io/react-diagrams](https://projectstorm.gitbook.io/react-diagrams)\n\nDocs are currently being worked on, along with a migration path.\n\n## What\n\nA flow \u0026 process orientated diagramming library inspired by **Blender**, **Labview** and **Unreal engine**.\n\n* **Modern Codebase** written entirely in Typescript and React, the library makes use of powerful generics, advanced software engineering principles and is broken up into multiple modules.\n* **Hackable and extensible** the entire library including its core can be extended, rewired and re-assembled into fundamentally different software to suit your own software needs.\n* **HTML nodes as a first class citizen** the library was originally written to represent advanced dynamic nodes, that are difficult to represent as SVG's due to complex input requirements ux requirements.\n* **Designed for process** the library is aimed for software engineers that want to rewire their programs at runtime, and that want to make their software more dynamic.\n* **Fast diagram editing** the defaults provided give the highest priority to editing diagrams as fast as possible.\n\n## Gallery\n\nExample implementation using custom models: \\(Dylan's personal code\\)\n\n![Personal Project](.gitbook/assets/example1.jpg)\n![](.gitbook/assets/example2.jpg)\n\nGet started with the default models right out of the box:\n\n![](.gitbook/assets/example3.jpg)\n\n## Installing\n\nFor all the bells and whistles:\n\n```text\nyarn add @projectstorm/react-diagrams\n```\n\nThis includes all the packages listed below \\(and works \\(mostly and conceptually\\) like it used to in version 5.0\\)\n\n### A more modular approach\n\nThis library now has a more modular design and you can import just the core \\(contains no default factories or routing\\)\n\n```text\nyarn add @projectstorm/react-diagrams-core\n```\n\nthis is built ontop of the evolving **react-canvas-core** library\n\n```text\nyarn add @projectstorm/react-canvas-core\n```\n\nwhich makes use of\n\n```text\nyarn add @projectstorm/geometry\n```\n\nand of course, you can add some extras:\n\n```text\nyarn add @projectstorm/react-diagrams-defaults\nyarn add @projectstorm/react-diagrams-routing\n```\n\n## How to use\n\nBefore running any of the examples, please run `pnpm build` in the root. This project is a monorepo, and the packages (including the demos) require the packages to first be built.\n\n\nTake a look at the [diagram demos](https://github.com/projectstorm/react-diagrams/tree/master/diagrams-demo-gallery/demos)\n\n**or**\n\nTake a look at the [demo project](https://github.com/projectstorm/react-diagrams/tree/master/diagrams-demo-project) which contains an example for ES6 as well as Typescript\n\n**or**\n\n[Checkout the docs](https://projectstorm.gitbook.io/react-diagrams/)\n\n## Run the demos\n\nAfter running `pnpm install` and `pnpm build`, you must then run: `cd diagrams-demo-gallery \u0026\u0026 pnpm run start`\n\n## Building from source\n\nSimply run `pnpm` then `pnpm build` or `pnpm build:prod` in the root directory and it will spit out the transpiled code and typescript definitions into the dist directory as a single file.\n\n## Built with react-diagrams\n\n\u003e Do you have an interesting project built with *react-diagrams*? PR it into this section for others to see.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprojectstorm%2Freact-diagrams","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprojectstorm%2Freact-diagrams","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprojectstorm%2Freact-diagrams/lists"}