Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ts-graphviz/react

⚛︎ Graphviz-dot Renderer using React.
https://github.com/ts-graphviz/react

dot graphviz graphviz-dot graphviz-dot-renderer hacktoberfest react react-component-library react-renderer typescript-library

Last synced: 3 months ago
JSON representation

⚛︎ Graphviz-dot Renderer using React.

Host: GitHub
URL: https://github.com/ts-graphviz/react
Owner: ts-graphviz
License: mit
Archived: true
Created: 2019-11-12T00:05:19.000Z (about 5 years ago)
Default Branch: main
Last Pushed: 2024-03-17T15:29:12.000Z (11 months ago)
Last Synced: 2024-10-29T20:21:04.241Z (3 months ago)
Topics: dot, graphviz, graphviz-dot, graphviz-dot-renderer, hacktoberfest, react, react-component-library, react-renderer, typescript-library
Language: TypeScript
Homepage: https://www.npmjs.com/package/@ts-graphviz/react
Size: 3.22 MB
Stars: 28
Watchers: 4
Forks: 2
Open Issues: 8
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-react-renderer - @ts-graphviz/react - Graphviz-dot Renderer using React. (Miscellaneous)

README

        
# This Repository is archived.

# Moved to 

---

[![NodeCI](https://github.com/ts-graphviz/react/workflows/NodeCI/badge.svg)](https://github.com/ts-graphviz/react/actions?workflow=NodeCI)

[![npm version](https://badge.fury.io/js/%40ts-graphviz%2Freact.svg)](https://badge.fury.io/js/%40ts-graphviz%2Freact)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)

[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)

# @ts-graphviz/react

Graphviz-dot Renderer using React.

## Installation

The module can then be installed using [npm](https://www.npmjs.com/):

[![NPM](https://nodei.co/npm/@ts-graphviz/react.png)](https://nodei.co/npm/@ts-graphviz/react/)

```bash

# yarn

$ yarn add @ts-graphviz/react react

# or npm

$ npm install -S @ts-graphviz/react react

```

> Install [React](https://github.com/facebook/react/) as peerDependencies at the same time.

## Example

```jsx

import React from 'react';

import { Digraph, Node, Subgraph, Edge, DOT, renderToDot } from '@ts-graphviz/react';

const Example = () => (

  

    

          

            left

            middle

            right

          

        

      }

    />

    

      

    

    A to B} />

  

);

const dot = renderToDot();

console.log(dot);

```

### Output dot

```dot

digraph {

  rankdir = "TB";

  edge [

    color = "blue",

    fontcolor = "blue",

  ];

  node [

    shape = "none",

  ];

  "nodeA" [

    shape = "none",

    label = <leftmiddleright>,

  ];

  subgraph "cluster" {

    labeljust = "l";

    label = "Cluster";

    "nodeB" [

      label = "This is label for nodeB.",

    ];

  }

  // Edge from node A to B

  "nodeB" -> "nodeA":"m" [

    label = <A to B>,

  ];

}

```

![dot](./example/example.svg)

## See Also

Graphviz-dot Test and Integration

- [ts-graphviz](https://github.com/ts-graphviz/ts-graphviz)

  - Graphviz library for TypeScript.

- [jest-graphviz](https://github.com/ts-graphviz/jest-graphviz)

  - Jest matchers that supports graphviz integration.

- [setup-graphviz](https://github.com/ts-graphviz/setup-graphviz)

  - GitHub Action to set up Graphviz cross-platform(Linux, macOS, Windows).

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
_{Yuki Yamazaki}
💻 ⚠️ 🤔 📖

    
_{nagasawaryoya}
💻 ⚠️

    
_YukiSasaki
💻 ⚠️

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors)

specification. Contributions of any kind welcome!

## License

This software is released under the MIT License, see [LICENSE](./LICENSE).