reaflow - 🕸 React library for building workflow editors, flow charts and diagrams

  •        613

REAFLOW is a modular diagram engine for building static or interactive editors. The library is feature-rich and modular allowing for displaying complex visualizations with total customizability.

https://github.com/reaviz/reaflow#readme
https://github.com/reaviz/reaflow

Dependencies:

calculate-size : ^1.1.1
classnames : ^2.2.6
d3-shape : ^2.1.0
elkjs : ^0.7.1
ellipsize : ^0.1.0
framer-motion : ^4.1.4
kld-affine : ^2.1.1
kld-intersections : ^0.7.0
p-cancelable : ^2.1.0
rdk : ^5.1.2
react-cool-dimensions : ^1.2.0
react-fast-compare : ^3.2.0
react-use-gesture : ^8.0.1
reakeys : ^1.1.0
undoo : ^0.5.0

Tags
Implementation
License
Platform

   




Related Projects

reaviz - 📊 Data visualization library for React based on D3

  •    TypeScript

REAVIZ is a modular chart component library that leverages React natively for rendering the components while using D3js under the hood for calculations. The library provides an easy way to get started creating charts without sacrificing customization ability. If you are looking for node-based graphs, checkout reaflow.

GoJS - JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages

  •    Javascript

GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. GoJS is a flexible library that can be used to create a number of different kinds of interactive diagrams, including data visualizations, drawing tools, and graph editors. There are samples for flowchart, org chart, business process BPMN, swimlanes, timelines, state charts, kanban, network, mindmap, sankey, family trees and genogram charts, fishbone diagrams, floor plans, UML, decision trees, pert charts, Gantt, and hundreds more. GoJS includes a number of built in layouts including tree layout, force directed, radial, and layered digraph layout, and a number of custom layout examples.

reaviz - 📊 Data visualization library for React based on D3

  •    TypeScript

REAVIZ is a modular chart component library that leverages React natively for rendering the components while using D3js under the hood for calculations. The library provides an easy way to get started creating charts without sacrificing customization ability.

diagram-maker - A library to display an interactive editor for any graph-like data.

  •    TypeScript

Diagram Maker is a library to display an interactive editor for any graph-like data. Following is a screenshot from one of the consumers of this library, AWS IoT Events Console with Diagram Maker in action.

react-apexcharts - 📊 React Component for ApexCharts

  •    Javascript

React.js wrapper for ApexCharts to build interactive visualizations in react. Simple! Just change the series or any option and it will automatically re-render the chart.


Mermaid - Generation of diagram and flowchart from text in a similar manner as markdown

  •    Javascript

Mermaid is a Javascript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development. Diagramming and documentation costs precious developer time and gets outdated quickly. But not having diagrams or docs ruins productivity and hurts organizational learning.

QuickFlow - SharePoint Workflow Enhancement and Flowchart Designer

  •    

A simple and powerfull workflow engine on SharePoint. It provider a flowchart flowcontainer to make the development of complex sharepoint workflow more easy. It's based on WF3.5 not WF4.

js-code-to-svg-flowchart - js2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart

  •    Javascript

Why? While I've been working on Under-the-hood-ReactJS I spent enormous amount of time on creating schemes. Each change in code or flowchart affects all entire scheme instantly, forcing you to move and align 'broken pieces'. Just repeated manual work... Imagine a library which takes any JS code and generate SVG flowchart from it, works on client and server. Allows you easily adjust styles scheme for your context or demonstrate your code logic from different abstractions levels. Highlighting, destructing whole blocks, custom modifiers for your needs etc.

streamsheets - An open-source tool for processing stream data using a spreadsheet-like interface.

  •    Javascript

The Streamsheet® core is an open-source tool for making your data immediately understandable and for creating IoT applications visually and interactively - without a single line of code. Also, visit us on our website or check out the Streamsheets forum.

graphql-editor - GraphQL Visual Node Editor

  •    TypeScript

GraphQLEditor makes it easier to understand GrapHQL schemas. Create a schema by joining visual blocks. GraphQLEditor will transform them into code. With GraphQLEditor you can create visual diagrams without writing any code.

Dia - Visio alternative

  •    GTK+

Dia is inspired by the commercial Windows program Visio, though more geared towards informal diagrams for casual use. It can be used to draw many different kinds of diagrams. It currently has special objects to help draw entity relationship diagrams, UML diagrams, flowcharts, network diagrams, and many other diagrams. It is also possible to add support for new shapes by writing simple XML files, using a subset of SVG to draw the shape.

Diagramo - Create Flowchart using HTML5

  •    PHP

Diagramo is pure HTML5 (canvas) flowchart software, No Flash, no Java or other plugins. You can export diagrams in SVG, Gif of JPEG format.

amazona - Build Ecommerce Like Amazon By MERN Stack

  •    Javascript

Welcome to my React and Node tutorial to build a fully-functional e-commerce website exactly like amazon. Open your code editor and follow me for the next hours to build an e-commerce website using MERN stack (MongoDB, ExpressJS, React and Node.JS).

react-coding-challenges - A series of ReactJS coding challenges with a variety of difficulties.

  •    SCSS

A series of ReactJS coding challenges with a variety of difficulties. Deep dive into the why here. Interested in NodeJS? Check out our Node Coding Challenges (coming soon).

Diagram Ring

  •    

Advanced diagram editor for Flowcharts, Class Diagrams, DFDs, ERDs, Pie charts, Bar charts and etc. It's been developed in WPF , C#

react-trend - 📈 Simple, elegant spark lines

  •    Javascript

These are very simple and elegant visualizations, and they should not require a bloated graphing library to produce. React Trend is a concrete component that does 1 thing, and does it well: generate these trending graphs.

react-rte - Pure React rich text "WYSISYG" editor based on draft-js.

  •    Javascript

This is a UI component built completely in React that is meant to be a full-featured textarea replacement similar to CKEditor, TinyMCE and other rich text "WYSIWYG" editors. It's based on the excellent, open source Draft.js from Facebook which is performant and production-tested. RichTextEditor is the main editor component. It is comprised of the Draft.js <Editor>, some UI components (e.g. toolbar) and some helpful abstractions around getting and setting content with HTML/Markdown.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.