Graphviz-dot Renderer using React.
The module can then be installed using npm:
# yarn $ yarn add @ts-graphviz/react react # or npm $ npm install -S @ts-graphviz/react reactInstall React as peerDependencies at the same time.
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);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>>, ]; }
Graphviz-dot Test and Integration
- ts-graphviz
- Graphviz library for TypeScript.
- jest-graphviz
- Jest matchers that supports graphviz integration.
- setup-graphviz
- GitHub Action to set up Graphviz cross-platform(Linux, macOS, Windows).
Thanks goes to these wonderful people (emoji key):
 Yuki Yamazaki 💻 |  nagasawaryoya 💻 |  YukiSasaki 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
This software is released under the MIT License, see LICENSE.
