ts-graphviz/react

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 295 Commits
.devcontainer		.devcontainer
.github		.github
.vscode		.vscode
config/jest		config/jest
example		example
src		src
.all-contributorsrc		.all-contributorsrc
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.npmignore		.npmignore
.prettierignore		.prettierignore
.prettierrc.json		.prettierrc.json
LICENSE		LICENSE
README.md		README.md
jest.config.js		jest.config.js
package.json		package.json
rollup.config.js		rollup.config.js
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Repository files navigation

This Repository is archived.

Moved to https://github.com/ts-graphviz/ts-graphviz

NodeCI npm version License: MIT PRs Welcome tested with jest code style: prettier All Contributors

@ts-graphviz/react

Graphviz-dot Renderer using React.

Installation

The module can then be installed using npm:

NPM

# yarn
$ yarn add @ts-graphviz/react react
# or npm
$ npm install -S @ts-graphviz/react react

Install React as peerDependencies at the same time.

Example

import React from 'react';
import { Digraph, Node, Subgraph, Edge, DOT, renderToDot } from '@ts-graphviz/react';
const Example = () => (
 <Digraph
 rankdir="TB"
 edge={{
 color: 'blue',
 fontcolor: 'blue',
 }}
 node={{
 shape: 'none',
 }}
 >
 <Node
 id="nodeA"
 shape="none"
 label={
 <DOT.TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
 <DOT.TR>
 <DOT.TD>left</DOT.TD>
 <DOT.TD PORT="m">middle</DOT.TD>
 <DOT.TD PORT="r">right</DOT.TD>
 </DOT.TR>
 </DOT.TABLE>
 }
 />
 <Subgraph id="cluster" label="Cluster" labeljust="l">
 <Node id="nodeB" label="This is label for nodeB." />
 </Subgraph>
 <Edge targets={['nodeB', 'nodeA:m']} comment="Edge from node A to B" label={<DOT.B>A to B</DOT.B>} />
 </Digraph>
);
const dot = renderToDot(<Example />);
console.log(dot);

Output dot

digraph {
 rankdir = "TB";
 edge [
 color = "blue",
 fontcolor = "blue",
 ];
 node [
 shape = "none",
 ];
 "nodeA" [
 shape = "none",
 label = <<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0"><TR><TD>left</TD><TD PORT="m">middle</TD><TD PORT="r">right</TD></TR></TABLE>>,
 ];
 subgraph "cluster" {
 labeljust = "l";
 label = "Cluster";
 "nodeB" [
 label = "This is label for nodeB.",
 ];
 }
 // Edge from node A to B
 "nodeB" -> "nodeA":"m" [
 label = <<B>A to B</B>>,
 ];
}