{"_id":"@appspotr/react-diagrams-react19","name":"@appspotr/react-diagrams-react19","dist-tags":{"latest":"8.0.3"},"versions":{"8.0.3":{"name":"@appspotr/react-diagrams-react19","author":{"name":"appspotr"},"repository":{"type":"git","url":"git+https://github.com/appspotr/react-diagrams-react19.git"},"keywords":["web","diagram","diagrams","react","typescript","flowchart","simple","links","nodes"],"scripts":{"ncu":"ncu -u && pnpm recursive exec -- ncu -u","format":"prettier --write \"**/*.{ts,tsx,js,jsx}\"","clean":"rm -rf packages/*/dist","test":"pnpm run -r test","build":"tsc --build && pnpm run -r build","build:prod":"NODE_ENV=production pnpm build","release":"pnpm build:prod && pnpm changeset publish","release:storybook":"tsc --build && cd diagrams-demo-gallery && pnpm storybook:build && ./node_modules/.bin/storybook-to-ghpages --existing-output-dir .out"},"devDependencies":{"@changesets/cli":"^2.26.2","@types/jest":"^29.5.5","@types/node":"^20.6.3","jest":"^29.7.0","jest-cli":"^29.7.0","prettier":"^3.0.3","rimraf":"^5.0.1","source-map-loader":"^4.0.1","terser-webpack-plugin":"^5.3.9","ts-jest":"^29.1.1","ts-loader":"^9.4.4","typescript":"^5.2.2","webpack":"^5.88.2","webpack-cli":"^5.1.4","webpack-dev-server":"^4.15.1","webpack-node-externals":"^3.0.0"},"pnpm":{"overrides":{"react":"^19.0.0"}},"version":"8.0.3","_id":"@appspotr/react-diagrams-react19@8.0.3","gitHead":"cd3bdd119376836a0c675be5e3e58ee807cfd0c1","description":"[![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&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![NPM](","bugs":{"url":"https://github.com/appspotr/react-diagrams-react19/issues"},"homepage":"https://github.com/appspotr/react-diagrams-react19#readme","_nodeVersion":"18.20.8","_npmVersion":"10.8.2","dist":{"integrity":"sha512-cR6wVhY8YfwQ0NwG2w9M/leHW9twoaC0B8vqLqdKkKCbZ6z2lIhWbtGeBUb1dj3iDlXHpoGyjzgA156PSBdjPw==","shasum":"5d09480f28a582184479c11c7a08987e43aeed7d","tarball":"https://registry.npmjs.org/@appspotr/react-diagrams-react19/-/react-diagrams-react19-8.0.3.tgz","fileCount":394,"unpackedSize":2810818,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICvW2DD1VzrjK+L4gH39OmPQF1f8eECfurqZ6C5SKty1AiEAsOKuoeibUo2bjawwoJ7DlQduks/Bz3X6BgnahI9lWLA="}]},"_npmUser":{"name":"srinath-appspotr","email":"srinath@appspotr.com","actor":{"name":"srinath-appspotr","email":"srinath@appspotr.com","type":"user"}},"directories":{},"maintainers":[{"name":"srinath-appspotr","email":"srinath@appspotr.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-diagrams-react19_8.0.3_1750390094471_0.2873330425211209"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-20T03:28:14.370Z","8.0.3":"2025-06-20T03:28:14.716Z","modified":"2025-06-20T03:28:15.021Z"},"maintainers":[{"name":"srinath-appspotr","email":"srinath@appspotr.com"}],"description":"[![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&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![NPM](","homepage":"https://github.com/appspotr/react-diagrams-react19#readme","keywords":["web","diagram","diagrams","react","typescript","flowchart","simple","links","nodes"],"repository":{"type":"git","url":"git+https://github.com/appspotr/react-diagrams-react19.git"},"author":{"name":"appspotr"},"bugs":{"url":"https://github.com/appspotr/react-diagrams-react19/issues"},"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&utm_medium=badge&utm_campaign=pr-badge&utm_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 & 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 && 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","readmeFilename":"README.md","_rev":"1-85d89daa7dd846890e6bfcc216441968"}