Dylan Vorster 1e95edbc6f pretty
2020-09-23 10:24:36 +02:00
2019-08-11 00:35:56 +02:00
2019-08-11 13:17:09 +02:00
2019-07-24 16:32:05 +02:00
2020-09-14 00:35:03 +02:00
2020-09-23 10:24:36 +02:00
2019-08-11 00:35:00 +02:00
2018-03-10 15:32:24 +02:00
2019-08-11 13:17:09 +02:00
2019-07-22 22:55:33 +02:00
2019-07-26 13:38:34 +02:00
2020-06-03 21:02:49 +02:00
2019-07-25 01:00:59 +02:00
2020-06-03 21:13:39 +02:00
2020-06-03 21:08:04 +02:00
2016-06-13 11:48:10 +02:00
2020-09-14 00:35:03 +02:00
2020-09-14 00:35:03 +02:00

Introduction

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

pssst! Looking for the old version 5?

DEMO: http://projectstorm.cloud/react-diagrams

DOCS (wip) https://projectstorm.gitbook.io/react-diagrams

Docs are currently being worked on, along with a migration path.

What

A flow & process orientated diagramming library inspired by Blender, Labview and Unreal engine.

  • 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.
  • 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.
  • 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.
  • 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.
  • Fast diagram editing the defaults provided give the highest priority to editing diagrams as fast as possible.

Example implementation using custom models: Dylan's personal code

Personal Project

Get started with the default models right out of the box:

Installing

For all the bells and whistles:

yarn add @projectstorm/react-diagrams

This includes all the packages listed below and works \(mostly and conceptually like it used to in version 5.0)

A more modular approach

This library now has a more modular design and you can import just the core contains no default factories or routing

yarn add @projectstorm/react-diagrams-core

this is built ontop of the evolving react-canvas-core library

yarn add @projectstorm/react-canvas-core

which makes use of

yarn add @projectstorm/react-geometry

and of course, you can add some extras:

yarn add @projectstorm/react-diagrams-defaults
yarn add @projectstorm/react-diagrams-routing

How to use

Before running any of the examples, please run yarn build in the root. This project is a monorepo, and the packages (including the demos) require the packages to first be built.

Take a look at the diagram demos

or

Take a look at the demo project which contains an example for ES6 as well as Typescript

or

Checkout the docs

Run the demos

After running yarn install you must then run: cd packages/diagrams-demo-gallery && yarn run start

Building from source

Simply run yarn then yarn build or yarn 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.

Built with react-diagrams

Do you have an interesting project built with react-diagrams? PR it into this section for others to see.

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%