Graphviz-dot Renderer using React.
The module can then be installed using npm:
# yarn
$ yarn add @ts-graphviz/react
# or npm
$ npm install @ts-graphviz/react
- React and ReactDOM(>=16.8)
- ts-graphviz
- @hpcc-js/wasm (Optional)
# Peer Dependencies
$ yarn add react react-dom ts-graphviz@"^0.12.0"
# Optional Peer Dependencies
$ yarn add @hpcc-js/wasm
import React, { FC } from 'react';
import { Digraph, Node, Subgraph, Edge, DOT, renderToDot } from '@ts-graphviz/react';
const Example: FC = () => (
<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>>,
];
}
The Graphviz
component can be rendered directly in the browser.
Since this component uses the function of @hpcc-js/wasm
internally, it is necessary to host @hpcc-js/wasm/dist/graphviz.wasm
and specify its directory with wasmFolder
.
For development, I recommend using the one hosted by unpkg.
import React, { FC } from 'react';
import ReactDOM from 'react-dom';
import { Graphviz, Digraph, Node, Edge } from '@ts-graphviz/react';
import { wasmFolder } from '@hpcc-js/wasm';
wasmFolder('https://unpkg.com/@hpcc-js/wasm/dist/');
const App: FC = () => (
<Graphviz>
<Digraph>
<Node id="n1" />
<Node id="n2" />
<Node id="n3" />
<Edge targets={['n1', 'n2', 'n3']} />
<Edge targets={['n1', 'n3']} />
</Digraph>
</Graphviz>
);
ReactDOM.render(<App />, document.getElementById('root'));
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).
This software is released under the MIT License, see LICENSE.