https://github.com/lempiy/react-direct-graph

:straight_ruler: React component for drawing direct graphs with rectangular (non-curve) edges.
https://github.com/lempiy/react-direct-graph

component diagram flowchart graph react svg visualization

Last synced: 8 days ago
JSON representation

:straight_ruler: React component for drawing direct graphs with rectangular (non-curve) edges.

• Host: GitHub
• URL: https://github.com/lempiy/react-direct-graph
• Owner: lempiy
• License: mit
• Created: 2019-06-17T22:28:21.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T02:58:09.000Z (almost 2 years ago)
• Last Synced: 2024-10-03T07:14:10.744Z (about 1 month ago)
• Topics: component, diagram, flowchart, graph, react, svg, visualization
• Language: TypeScript
• Homepage: https://lempiy.github.io/react-direct-graph/
• Size: 4.53 MB
• Stars: 27
• Watchers: 4
• Forks: 5
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/lempiy/react-direct-graph.svg?branch=master)](https://travis-ci.org/lempiy/react-direct-graph) [![NPM](https://img.shields.io/npm/v/react-direct-graph.svg)](https://www.npmjs.com/package/react-direct-graph) [![Maintainability](https://api.codeclimate.com/v1/badges/d333ef5cfaaa6a432aca/maintainability)](https://codeclimate.com/github/lempiy/react-direct-graph/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/d333ef5cfaaa6a432aca/test_coverage)](https://codeclimate.com/github/lempiy/react-direct-graph/test_coverage) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

![react-direct-graph](./img/graph.png)

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

## Examples

[Samples with code and preview](https://lempiy.github.io/react-direct-graph/)

## Install

```bash

npm install --save react-direct-graph

```

## Usage

```jsx

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 (

            

        );

    }

}

```

## License

MIT © [lempiy](https://github.com/lempiy)