This graph was created from a hand-made figure in an operating system paper.
import { Graph, toDot } from 'ts-graphviz';
const g = new Graph('G');
g.set('layout', 'neato');
g.edge(['run', 'intr']);
g.edge(['intr', 'runbl']);
g.edge(['runbl', 'run']);
g.edge(['run', 'kernel']);
g.edge(['kernel', ['zombie', 'sleep', 'runmem']]);
g.edge(['sleep', 'swap']);
g.edge(['swap', 'runswap']);
g.edge(['runswap', 'new']);
g.edge(['runswap', 'runmem']);
g.edge(['new', 'runmem']);
g.edge(['sleep', 'runmem']);
toDot(g);
In this example, @ts-graphviz/react is used to describe the DOT language in JSX.
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>
);
renderToDot(<Example />);
This small example illustrates dot's feature to draw nodes and edges in clusters or separate rectangular layout regions.
Clusters are encoded as subgraphs whose names have the prefix cluster.
The color attribute of a cluster is interpreted as its outline color or its background color if its style is filled.
Mdiamond and Msquare are modified symbols for data flow diagrams.
import { toDot, digraph, attribute } from 'ts-graphviz';
const G = digraph('G', (g) => {
g.subgraph('cluster_0', (s) => {
s.set(attribute.label, 'process #1');
s.set(attribute.color, 'lightgrey');
s.set(attribute.style, 'filled');
s.node({
[attribute.style]: 'filled',
[attribute.color]: 'white',
});
s.edge(['a0', 'a1', 'a2', 'a3']);
});
g.subgraph('cluster_1', (s) => {
s.set(attribute.label, 'process #2');
s.set(attribute.color, 'blue');
s.node({
[attribute.style]: 'filled',
});
s.edge(['b0', 'b1', 'b2', 'b3']);
});
g.edge(['start', ['a0', 'b0']]);
g.edge(['a1', 'b3']);
g.edge(['b2', 'a3']);
g.edge(['a3', 'a0']);
g.edge([['a3', 'b3'], 'end']);
});
toDot(G);
# Create new script
$ yarn new <your-script-name>
# Build Gallary
$ yarn buildThis software is released under the MIT License, see LICENSE.
