The provided Graphviz code is a directed graph written in DOT language, defining a process flow diagram with nodes and edges that represent stages and transitions in the process, and specifying various properties such as layout direction, font, and color.
The Graphviz code defines a directed graph with a specific layout direction and font properties, and it outlines a process flow diagram with nodes and edges representing various stages and transitions. The code also specifies default properties for nodes and edges, allowing for customization of the graph's appearance.
%%
dot
digraph
apply
{
rankdir = BT;
fontname = Helvetica
node[peripheries = 0, style = filled, fillcolor = blue, fontcolor = white, fontname = Helvetica, fixedsize = true, width = 1.8, height = 0.8]
edge[fontname = Helvetica, fontsize = 12, fontcolor = blue, labeldistance = 1.8]
subgraph
cluster_student
{
label = 'Student';
style = filled;
fillcolor = grey92
submit [shape = record, style = 'filled,rounded', label = 'Submit\nRegistration\n']
letter [shape = box, peripheries = 0, label = 'Letter']
}
subgraph
cluster_admin
{
label = 'Admin'
style = filled;
fillcolor = grey92
complete [shape = diamond, height = 1.5, label = 'Application\nComplete?']
admreject [shape = record, label = 'Write Rejection\nLetter\n']
}
subgraph
cluster_registrar
{
label = 'Registrar'
style = filled;
fillcolor = grey92
min [shape = diamond, height = 1.8, label = 'Minimum\nStandard\nMet?']
}
subgraph
cluster_faculty
{
label = 'Faculty'
style = filled;
fillcolor = grey92
{
rank = same;
suitable [shape = diamond, height = 1.8, label = 'Suitable for\nProgram?\n']
facaccept [shape = record, label = 'Write Acceptance\nLetter\n']
}
}
submit -> complete
complete -> submit [headlabel = 'no']
complete -> min [headlabel = 'yes']
min -> admreject [headlabel = 'no']
min -> suitable [headlabel = 'yes']
suitable -> admreject [headlabel = 'no']
suitable -> facaccept [headlabel = 'yes']
admreject -> letter
facaccept -> letter
}typescript
// Import the Graphviz library
import * as Graphviz from 'graphviz';
// Create a new directed graph object
const dot = new Graphviz.Digraph({
filename: 'example',
dir: 'LR',
});
// Set the font and style for all nodes
dot.setGraph({
rankdir: 'BT',
fontname: 'Helvetica',
});
// Set the visual style for all nodes
dot.node().setStyle({
peripheries: 0,
style: 'filled',
fillcolor: 'blue',
fontcolor: 'white',
fixedsize: true,
height: 0.8,
width: 1.8,
});
// Set the font style for all edges
dot.edge().setStyle({
fontname: 'Helvetica',
fontsize: 12,
fontcolor: 'blue',
labeldistance: 1.8,
});
// Define the student cluster
dot.subgraph('cluster_student', {
label: 'Student',
style: 'filled',
fillcolor: 'grey92',
node: {
shape:'record',
style: 'filled, rounded',
label: 'Submit\nRegistration\n',
},
node: {
shape: 'box',
peripheries: 0,
label: 'Letter',
},
});
// Define the admin cluster
dot.subgraph('cluster_admin', {
label: 'Admin',
style: 'filled',
fillcolor: 'grey92',
node: {
shape: 'diamond',
height: 1.5,
label: 'Application\nComplete?',
},
node: {
shape:'record',
label: 'Write Rejection\nLetter\n',
},
});
// Define the registrar cluster
dot.subgraph('cluster_registrar', {
label: 'Registrar',
style: 'filled',
fillcolor: 'grey92',
node: {
shape: 'diamond',
height: 1.8,
label: 'Minimum\nStandard\nMet?',
},
});
// Define the faculty cluster
dot.subgraph('cluster_faculty', {
label: 'Faculty',
style: 'filled',
fillcolor: 'grey92',
node: {
shape: 'diamond',
height: 1.8,
label: 'Suitable for\nProgram?\n',
},
node: {
shape:'record',
label: 'Write Acceptance\nLetter\n',
},
});
// Define the edges between nodes
dot.addEdge('submit', 'complete');
dot.addEdge('complete','submit', { label: 'no' });
dot.addEdge('complete','min', { label: 'yes' });
dot.addEdge('min', 'admreject', { label: 'no' });
dot.addEdge('min','suitable', { label: 'yes' });
dot.addEdge('suitable', 'admreject', { label: 'no' });
dot.addEdge('suitable', 'facaccept', { label: 'yes' });
dot.addEdge('admreject', 'letter');
dot.addEdge('facaccept', 'letter');
// Render the graph
dot.render('png', (err, graph) => {
if (err) {
console.error(err);
} else {
console.log(graph);
}
});Graphviz Code Breakdown
This is a Graphviz code written in DOT language, which is used to create directed graphs.
digraph apply {
...
}
digraph keyword specifies that the graph is directed.apply is the name of the graph.rankdir = BT;
fontname = Helvetica
rankdir = BT; specifies the direction of the graph's layout. BT stands for "bottom-to-top".fontname = Helvetica sets the font family for the graph to Helvetica.node[peripheries = 0, style = filled, fillcolor = blue, fontcolor = white, fontname = Helvetica, fixedsize = true, width = 1.8, height = 0.8]
node keyword specifies the default properties for all nodes in the graph.peripheries = 0 removes the border around nodes.style = filled fills the nodes with a color.fillcolor = blue sets the fill color to blue.fontcolor = white sets the text color to white.fontname = Helvetica sets the font family to Helvetica.fixedsize = true fixes the size of the nodes.width = 1.8 and height = 0.8 set the width and height of the nodes, respectively.edge[fontname = Helvetica, fontsize = 12, fontcolor = blue, labeldistance = 1.8]
edge keyword specifies the default properties for all edges in the graph.fontname = Helvetica sets the font family for the edge labels to Helvetica.fontsize = 12 sets the font size for the edge labels to 12.fontcolor = blue sets the text color for the edge labels to blue.labeldistance = 1.8 sets the distance between the edge labels and the edge.The code defines four subgraphs: cluster_student, cluster_admin, cluster_registrar, and cluster_faculty. Each subgraph represents a stage in a process.
Within each subgraph, nodes and edges are defined to represent the stages and transitions between them.
For example:
submit -> complete
complete -> submit [headlabel = 'no']
complete -> min [headlabel = 'yes']
submit is a node in the cluster_student subgraph.complete is a node in the cluster_admin subgraph.submit -> complete specifies an edge from submit to complete.headlabel = 'no' and headlabel = 'yes' specify labels for the edges, which are used to indicate the direction of the flow (e.g., "no" indicates that the process should not proceed, while "yes" indicates that it should proceed).This code can be used to create a process flow diagram using Graphviz tools.