# storm-react-diagrams > **PSA**: React Diagrams is currently getting a bit of a rewrite to enable much more advanced features. To see the new foundation WIP visit [https://github.com/projectstorm/react-canvas](https://github.com/projectstorm/react-canvas). Latest version **5.2.1** (published 2018-05-05) · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install storm-react-diagrams pnpm add storm-react-diagrams yarn add storm-react-diagrams bun add storm-react-diagrams ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 5.2.1 | | Published | 2018-05-05 | | First published | 2017-02-18 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 5 | | Unpacked size | 5.9 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 9427 | | Author | dylanvorster | | Maintainers | dylanvorster | | Keywords | web, diagram, diagrams, react, typescript, flowchart, simple, links, nodes | ## Links - npm: https://www.npmjs.com/package/storm-react-diagrams - Repository: https://github.com/projectstorm/react-diagrams - Homepage: https://github.com/projectstorm/react-diagrams#readme - Issues: https://github.com/projectstorm/react-diagrams/issues - npm.io page: https://npm.io/package/storm-react-diagrams ## Dependencies (5) - [react](https://npm.io/package/react.md) ^16.3.2 - [lodash](https://npm.io/package/lodash.md) ^4.17.10 - [closest](https://npm.io/package/closest.md) ^0.0.1 - [paths-js](https://npm.io/package/paths-js.md) ^0.4.7 - [pathfinding](https://npm.io/package/pathfinding.md) ^0.4.18 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 5.2.1 (latest) — 2018-05-05 - 5.2.0 — 2018-05-05 - 5.1.1 — 2018-03-21 - 5.1.0 — 2018-03-17 - 5.0.0 — 2018-02-25 - 4.0.0 — 2018-01-18 - 3.2.0 — 2017-11-22 - 3.1.4 — 2017-11-15 - 3.1.3 — 2017-11-15 - 3.1.2 — 2017-09-15 - 3.1.1 — 2017-09-15 - 3.1.0 — 2017-09-15 - 3.0.0 — 2017-09-13 - 2.5.5 — 2017-09-04 - 2.5.4 — 2017-09-04 - … 27 more at https://npm.io/package/storm-react-diagrams/versions ## README # STORM React Diagrams **PSA**: React Diagrams is currently getting a bit of a rewrite to enable much more advanced features. To see the new foundation WIP visit [https://github.com/projectstorm/react-canvas](https://github.com/projectstorm/react-canvas). --- **DEMO**: [http://www.projectstorm.io/react-diagrams](http://www.projectstorm.io/react-diagrams) **DOCS:** [https://projectstorm.gitbooks.io/react-diagrams](https://projectstorm.gitbooks.io/react-diagrams) **RELEASE NOTES** : [http://dylanv.blog/2018/03/03/storm-react-diagrams-5-0-0/](http://dylanv.blog/2018/03/03/storm-react-diagrams-5-0-0/) A super simple, no-nonsense diagramming library written in React that just works. [![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/storm-react-diagrams.svg)](https://npmjs.org/package/storm-react-diagrams) [![NPM](https://img.shields.io/npm/dt/storm-react-diagrams.svg)](https://npmjs.org/package/storm-react-diagrams) [![Package Quality](http://npm.packagequality.com/shield/storm-react-diagrams.svg)](http://packagequality.com/#?package=storm-react-diagrams) [![CircleCI](https://circleci.com/gh/projectstorm/react-diagrams/tree/master.svg?style=svg)](https://circleci.com/gh/projectstorm/react-diagrams/tree/master) Example implementation using custom models: ![Personal Project](./images/example1.jpg) ![](./images/example2.jpg) Get started with the default models right out of the box: ![](./images/example3.jpg) ## Introduction A no-nonsense diagramming library written entirely in React with the help of a few small libraries. It aims to be: * Simple, and void of any fuss/complications when implementing it into your own application * Customizable without having to hack the core \(adapters/factories etc..\) * Simple to operate and understand without sugar and magic * Fast and optimized to handle large diagrams with hundreds of nodes/links * Super easy to use, and should work as you expect it to * Perfect for creating declarative systems such as programmatic pipelines and visual programming languages #### Run the demos After running `yarn install` you must then run: `yarn run storybook` #### Building from source Simply run `webpack` in the root directory \(or `export NODE_ENV=production && webpack` if you want a production build\) and it will spit out the transpiled code and typescript definitions into the dist directory as a single file. We use webpack for this because TSC cannot compile a single UMD file \(TSC can currently only output multiple UMD files\). ## [Checkout the docs](https://projectstorm.gitbooks.io/react-diagrams) --- _Source: https://npm.io/package/storm-react-diagrams · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._