@ts-graphviz/react v0.10.6
@ts-graphviz/react
It is part of the ts-graphviz library, which is split into modular packages to improve maintainability, flexibility, and ease of use.
Graphviz-dot Renderer using React.
Installation
The module can then be installed using npm:
# yarn
$ yarn add @ts-graphviz/react react react-dom
# or npm
$ npm install -S @ts-graphviz/react react react-dom
Install React and React DOM as peerDependencies at the same time.
Example
import { Digraph, Node, Subgraph, Edge, 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>>;
];
}
Contributing
Contributions to the ts-graphviz project are welcome.
Please refer to the main ts-graphviz repository for guidelines on how to contribute.
License
This software is released under the MIT License.
6 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago