All Projects → lempiy → react-direct-graph

lempiy / react-direct-graph

Licence: MIT license
📏 React component for drawing direct graphs with rectangular (non-curve) edges.

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to react-direct-graph

Mxgraph-EasyFlowEditor
基于mxGraph+vue设计的流程图编辑器
Stars: ✭ 73 (+192%)
Mutual labels:  diagram, flowchart
Flowy Vue
Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.
Stars: ✭ 107 (+328%)
Mutual labels:  diagram, flowchart
React Flow Chart
A flexible, stateless, declarative flow chart library for react.
Stars: ✭ 1,051 (+4104%)
Mutual labels:  diagram, flowchart
Gojs
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
Stars: ✭ 5,739 (+22856%)
Mutual labels:  diagram, flowchart
Diagram Maker
A library to display an interactive editor for any graph-like data.
Stars: ✭ 2,086 (+8244%)
Mutual labels:  diagram, flowchart
Jsplumb
Visual connectivity for webapps
Stars: ✭ 6,758 (+26932%)
Mutual labels:  diagram, flowchart
Vzl
💠 DOT Language Live Editor (GraphViz)
Stars: ✭ 83 (+232%)
Mutual labels:  diagram, flowchart
Hook Flow
A flowchart that explains the new lifecycle of a Hooks component. https://dwe.st/hf
Stars: ✭ 1,246 (+4884%)
Mutual labels:  diagram, flowchart
Nomnoml
The sassy UML diagram renderer
Stars: ✭ 1,685 (+6640%)
Mutual labels:  diagram, flowchart
X6
🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
Stars: ✭ 2,686 (+10644%)
Mutual labels:  diagram, flowchart
Grafana Flowcharting
Flowcharting, plugin for Grafana to create complexe visio's draws style like technical architectures, floorplan, diagrams, hierarchical schema based on draw.io
Stars: ✭ 463 (+1752%)
Mutual labels:  diagram, flowchart
bpmn
BPMN diagrams in R
Stars: ✭ 16 (-36%)
Mutual labels:  diagram, flowchart
Heimer
Heimer is a simple cross-platform mind map, diagram, and note-taking tool written in Qt.
Stars: ✭ 380 (+1420%)
Mutual labels:  diagram, flowchart
Flowchart.js
Draws simple SVG flow chart diagrams from textual representation of the diagram
Stars: ✭ 7,711 (+30744%)
Mutual labels:  diagram, flowchart
Butterfly
🦋Butterfly,A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件)
Stars: ✭ 2,343 (+9272%)
Mutual labels:  diagram, flowchart
dragonfly-dag
完全支持Vue3和Vitejs的DAG流程图组件
Stars: ✭ 54 (+116%)
Mutual labels:  diagram, flowchart
Mermaid
Provides a parser function to generate diagrams and flowcharts with the help of the mermaid script language
Stars: ✭ 27 (+8%)
Mutual labels:  diagram, flowchart
scdDiagram
smart substation connection and configuration software based on IEC 61850 protocal and SCD file. Email: [email protected]
Stars: ✭ 17 (-32%)
Mutual labels:  diagram
visioStencils
My 2,700 visio 🎨 shapes, stencils, symbols, and icons collection to visually represent IT infrastructure
Stars: ✭ 43 (+72%)
Mutual labels:  diagram
AMVennDiagramView
AMVennDiagramView is a view can display the diagram like Venn diagram.
Stars: ✭ 39 (+56%)
Mutual labels:  diagram

Build Status NPM Maintainability Test Coverage JavaScript Style Guide

react-direct-graph

React component for drawing direct graphs with rectangular (non-curve) edge

Examples

Samples with code and preview

Install

npm install --save react-direct-graph

Usage

import React, { Component } from "react";

import DirectGraph from "react-direct-graph";

const graph = [
    {
        id: "A",
        next: ["B"]
    },
    {
        id: "B",
        next: ["C", "D", "E"]
    },
    {
        id: "C",
        next: ["F"]
    },
    {
        id: "D",
        next: ["J"]
    },
    {
        id: "E",
        next: ["J"]
    },
    {
        id: "J",
        next: ["I"]
    },
    {
        id: "I",
        next: ["H"]
    },
    {
        id: "F",
        next: ["K"]
    },
    {
        id: "K",
        next: ["L"]
    },
    {
        id: "H",
        next: ["L"]
    },
    {
        id: "L",
        next: ["P"]
    },
    {
        id: "P",
        next: ["M", "N"]
    },
    {
        id: "M",
        next: []
    },
    {
        id: "N",
        next: []
    }
];

export class ExampleBasic extends Component {
    render() {
        const { cellSize, padding } = this.props;
        return (
            <DirectGraph list={graph} cellSize={cellSize} padding={padding} />
        );
    }
}

License

MIT © lempiy

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].