React Diagrams

a super simple, no-nonsense diagramming library written in react that just works
Alternatives To React Diagrams
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
5 days ago50gpl-3.0TypeScript
✨ Innovative and open-source visualization application that transforms various data formats, such as JSON, YAML, XML, CSV and more, into interactive graphs.
React Diagrams8,04472522 days ago36September 23, 2023309mitTypeScript
a super simple, no-nonsense diagramming library written in react that just works
Butterfly3,842193 months ago513August 03, 2023165mitJavaScript
🦋Butterfly,A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件)
React Lifecycle Methods Diagram3,783
7 days ago8mitTypeScript
Interactive React Lifecycle Methods diagram.
Beautiful React Diagrams2,5596a year ago14November 27, 202062mitJavaScript
💎 A collection of lightweight React components and hooks to build diagrams with ease 💎
Hook Flow1,9262a year ago5March 11, 20195mitShell
A flowchart that explains the new lifecycle of a Hooks component.
Reaflow1,7561117 days ago119November 13, 202380apache-2.0TypeScript
🎯 React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus.
React Flow Chart1,287814a year ago14June 28, 2020100mitTypeScript
🌊 A flexible, stateless, declarative flow chart library for react.
Jdl Studio402
a month ago12apache-2.0TypeScript
JDL Studio is an online JHipster Domain Language visual editor
Yfiles For Html Demos379
2 months agoother
The source code demos for the yFiles for HTML diagramming library
Alternatives To React Diagrams
Select To Compare

Alternative Project Comparisons


Join the chat at NPM Package Quality


DOCS (wip)

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


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:


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/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 pnpm 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


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


Checkout the docs

Run the demos

After running pnpm install and pnpm build, you must then run: cd diagrams-demo-gallery && pnpm run start

Building from source

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

Built with react-diagrams

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

Popular Diagram Projects
Popular Reactjs Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.