2018-02-24 18:44:07 +02:00
2018-01-07 23:01:50 +02:00
2018-02-25 13:47:22 +02:00
2017-04-25 21:02:38 +02:00
2018-02-25 11:50:24 +02:00
2018-02-25 11:59:14 +02:00
2017-11-21 00:39:19 +02:00
2018-02-25 14:04:59 +02:00
2018-02-25 11:59:14 +02:00
2016-06-13 11:48:10 +02:00
2018-02-25 14:12:22 +02:00
2018-02-25 14:04:59 +02:00
2018-02-24 15:34:09 +02:00
2018-02-24 18:49:40 +02:00

STORM React Diagrams

DEMO: http://www.projectstorm.io/react-diagrams

A super simple, no-nonsense diagramming library written in React that just works.

Join the chat at https://gitter.im/projectstorm/react-diagrams NPM NPM CircleCI

Personal Project

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

Usage

Installing

npm install storm-react-diagrams or yarn add storm-react-diagrams

Getting started

The best place to start is by looking at the simple demos demos/demo-simple and going from there.

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

Make your own nodes

To see how to create your own nodes like the one below, take a look at demos/demo-custom-link1:

Demo2

Learn More

Architecture Questions

Interactive Questions

Testing the Library

Description
a super simple, no-nonsense diagramming library written in react that just works
Readme MIT 15 MiB
Languages
TypeScript 97.6%
JavaScript 2%
CSS 0.3%
HTML 0.1%