npm package: @keep-app/react-diagrams
Description: __PSA 2018__: React Diagrams ~is currently~ was 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).
Author: keep-app
Latest version: 1.2.49

# STORM React Diagrams

__PSA 2018__: React Diagrams ~is currently~ was 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).

__PSA 2019__: I still want to jump onto the rewrite, but it is a much larger project than anticipated, so going to try maintain this one in the mean time.

---

**DEMO**: [http://projectstorm.cloud/react-diagrams](http://projectstorm.cloud/react-diagrams)

**(SOME) 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/@projectstorm/react-diagrams.svg)](https://npmjs.org/package/@projectstorm/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

#### Installing

```yarn add @projectstorm/react-diagrams```

#### 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)

## Engine settings

    // Board related settings
    board: {
      /*
       * Define board type
       * - movable: absolute positioning
       * - scrollable: using scrollbars
       * type: "movable" | "scrollable";
       * default: "movable"
       */
      type: 'scrollable',
    },
    // Zoom related settings
    zoom: {
      /*
       * Keep/Adjust diagram position when zooming
       * type: boolean;
       * default: true
       */
      // center: true,
      // Zoom when scrolling related settings
      onScroll: {
        /*
         * Enable zooming using mouse scroll
         * type: boolean;
         * default: true
         */
        // enabled: true,
        /*
         * Inverse in/out zooming based on scrolling direction
         * type: boolean;
         * default: false
         */
        // inverse: false,
        /*
         * Use ctrl key to zoom
         * type: boolean;
         * default: true
         */
        // withCtrlKey: true,
        /*
         * Zoom delta
         * type: number;
         * default: 10
         */
        // delta: 10,
        /*
         * Center on mouse position
         * type: number;
         * default: true
         */
        // centerOnMouse: true
      },
      /*
       * Min zoom level
       * type: number
       * default: 10
       */
      // min: 10,
      /*
       * Max zoom level
       * type: number
       * default: 200
       */
      max: 100,
    },
    // Zoom to fit related settings
    zoomToFit: {
      /*
       * Place nodes in the diagram center
       * type: boolean
       * default: false
       */
      // centerNodes: false
      /*
       * Calculate diagram dimensions with padding
       * type: number
       * default: 0
       */
      padding: 60,
      /*
       * Zoom to fit initially
       * type: boolean
       * default: false
       */
      // onStart: false,
    },
    // Auto distribute related settings
    autoDistribute: {
      /*
       * Distance between nodes
       * type: number
       * default: 50
       */
      // padding: 50,
      // Distance from top left corner
      offset: {
        /*
         * Distance from top edge
         * type: number
         * default: 0
         */
        top: 60,
        /*
         * Distance from left edge
         * type: number
         * default: 0
         */
        left: 60,
      },
      /*
       * Callback to adjust default behaviour
       * type: Function
       * default: (distributedNodes) => {}
       */
      // renderer: () => {};
    },