[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10806":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":23,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":40,"readmeContent":41,"aiSummary":42,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":43,"discoverSource":44},10806,"react-diagrams","projectstorm\u002Freact-diagrams","projectstorm","a super simple, no-nonsense diagramming library written in react that just works","https:\u002F\u002Fprojectstorm.cloud\u002Freact-diagrams",null,"TypeScript",9408,1187,143,310,0,2,11,67.32,"MIT License",false,"master",true,[25,26,27,28,29,30,31,32,33,34,35,36,37,38,39],"beta","canvas","demo","diagram","diagrams","drag","editing-diagrams","factories","flowchart","modular","react","svg","typescript","visualization","web","2026-06-12 04:00:52","# Introduction\n\n[![Join the chat at https:\u002F\u002Fgitter.im\u002Fprojectstorm\u002Freact-diagrams](https:\u002F\u002Fbadges.gitter.im\u002Fprojectstorm\u002Freact-diagrams.svg)](https:\u002F\u002Fgitter.im\u002Fprojectstorm\u002Freact-diagrams?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![NPM](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@projectstorm\u002Freact-diagrams.svg)](https:\u002F\u002Fnpmjs.org\u002Fpackage\u002F@projectstorm\u002Freact-diagrams) [![Package Quality](https:\u002F\u002Fnpm.packagequality.com\u002Fshield\u002Fstorm-react-diagrams.svg)](https:\u002F\u002Fpackagequality.com\u002F#?package=storm-react-diagrams)\n\n![](.gitbook\u002Fassets\u002Flogo.jpg)\n\n**DEMO**: [http:\u002F\u002Fprojectstorm.cloud\u002Freact-diagrams](http:\u002F\u002Fprojectstorm.cloud\u002Freact-diagrams)\n\n**DOCS \\(wip\\)** [https:\u002F\u002Fprojectstorm.gitbook.io\u002Freact-diagrams](https:\u002F\u002Fprojectstorm.gitbook.io\u002Freact-diagrams)\n\nDocs are currently being worked on, along with a migration path.\n\n## What\n\nA flow & 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\u002Fassets\u002Fexample1.jpg)\n![](.gitbook\u002Fassets\u002Fexample2.jpg)\n\nGet started with the default models right out of the box:\n\n![](.gitbook\u002Fassets\u002Fexample3.jpg)\n\n## Installing\n\nFor all the bells and whistles:\n\n```text\nyarn add @projectstorm\u002Freact-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\u002Freact-diagrams-core\n```\n\nthis is built ontop of the evolving **react-canvas-core** library\n\n```text\nyarn add @projectstorm\u002Freact-canvas-core\n```\n\nwhich makes use of\n\n```text\nyarn add @projectstorm\u002Fgeometry\n```\n\nand of course, you can add some extras:\n\n```text\nyarn add @projectstorm\u002Freact-diagrams-defaults\nyarn add @projectstorm\u002Freact-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:\u002F\u002Fgithub.com\u002Fprojectstorm\u002Freact-diagrams\u002Ftree\u002Fmaster\u002Fdiagrams-demo-gallery\u002Fdemos)\n\n**or**\n\nTake a look at the [demo project](https:\u002F\u002Fgithub.com\u002Fprojectstorm\u002Freact-diagrams\u002Ftree\u002Fmaster\u002Fdiagrams-demo-project) which contains an example for ES6 as well as Typescript\n\n**or**\n\n[Checkout the docs](https:\u002F\u002Fprojectstorm.gitbook.io\u002Freact-diagrams\u002F)\n\n## Run the demos\n\nAfter running `pnpm install` and `pnpm build`, you must then run: `cd diagrams-demo-gallery && 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> Do you have an interesting project built with *react-diagrams*? PR it into this section for others to see.\n","projectstorm\u002Freact-diagrams 是一个基于 React 的简单易用的图表绘制库。它采用 TypeScript 编写，支持强大的泛型和先进的软件工程原则，整个库被设计为模块化，便于扩展和自定义。该库特别强调快速编辑流程图的能力，并将 HTML 节点视为一等公民来处理复杂的用户交互需求。适用于需要在运行时重构程序或使软件更加动态化的场景，例如构建可视化编程工具、流程管理系统等。其简洁的设计理念和高度可定制性使其成为开发人员的理想选择。","2026-06-11 03:30:15","top_topic"]