I am trying to build a simple task flow in graphviz. Below is my code
digraph R {
node [shape=record; fontname=Ariel];
overlap=false;
rankdir="LR";
box2 [label="Any blocking? "];
box3 [label="Any open points?"];
box4 [label="cleared?"];
box5 [label="cleared?"];
node [shape=circle; fixedsize=true; width=1.2;fillcolor="#bad9ff"; style="filled"];
S1 [label="New"];
node [shape=circle; fixedsize=true; width=1.2;fillcolor="yellow"; style="filled"];
S2 [label="InProgress"];
node [shape=circle; fixedsize=true; width=1.2; fillcolor="#8fff4f"; style="filled"];
S5 [label="Closed"];
node [shape=circle; fixedsize=true; width=1.2; fillcolor="#ff4f69"; fontcolor="white"; style="filled"];
S3 [label="On hold"]; S4 [label="Need \n Clarification"];
S1 -> S2
S2 -> S5
S2 -> box3
box3 -> S4
S4 -> box5
box5 -> S2
S2 -> box2
box2 -> S3
S3 -> box4
box4 -> S2
labelloc="t";
label="Task Flow";
fontsize="20";
}
Output:
I could not find a way to make the New node to start left, and Closed node to come to the right end. I tried pin, and pos but for both nodes but in vain. I used neato engine.
Here is an embarrassing kludge solution, but it works. Swap labels & arrow direction, like so:
digraph R {
node [shape=record; fontname=Ariel];
overlap=false;
//rankdir="LR";
box2 [label="Any blocking? "];
box3 [label="Any open points?"];
box4 [label="cleared?"];
box5 [label="cleared?"];
node [shape=circle; fixedsize=true; width=1.2;fillcolor="#bad9ff"; style="filled"];
S1 [label="Closed"]; // [label="New"]; // kludge
node [shape=circle; fixedsize=true; width=1.2;fillcolor="yellow"; style="filled"];
S2 [label="InProgress"];
node [shape=circle; fixedsize=true; width=1.2; fillcolor="#8fff4f"; style="filled"];
S5 [label="New"]; // [label="Closed"]; // kludge
node [shape=circle; fixedsize=true; width=1.2; fillcolor="#ff4f69"; fontcolor="white"; style="filled"];
S3 [label="On hold"]; S4 [label="Need \n Clarification"];
S1 -> S2 -> S5 [dir=back] //kludge
S2 -> box3
box3 -> S4
S4 -> box5
box5 -> S2
S2 -> box2
box2 -> S3
S3 -> box4
box4 -> S2
labelloc="t";
label="Task Flow";
fontsize="20";
}
Related
This question is a continuation of this question.
In addition to strictly east-to-west arcs, I would also like them to be orthogonal (ie not curved.) So I added the attribute "splines=ortho" to the dot file, like this:
digraph net {
graph [splines=ortho]
"C0" [shape=oval label="C0"]
"C1" [shape=oval label="C1"]
"B0" [shape=box label="B0"]
rankdir="LR"
"C0":e -> "B0":w
"B0":e -> "C1":w
"C1":e -> "B0":w
}
Now I am getting this image, where the arcs are going through the nodes:
Is it possible to get a picture like this, where the orthogonal arc moves around the nodes, something like this?
It is possible, but you have to DIY. Here we add lots of invisible nodes and then "connect the dots" (puns!).
Note the use of dir (https://graphviz.org/docs/attrs/dir/), headclip (http://www.graphviz.org/docs/attrs/headclip/), and tailclip (https://graphviz.org/docs/attrs/tailclip/) attributes.
digraph net {
graph [splines=false]
// rankdir="LR" << turned it off, makes things easier?
graph [nodesep=.07]
{
node [style=invis label=""]
I1 I2 I3 I4 I5 I6 X2 X4 X6
}
{rank=same I1 I2 I3 I4 I5 I6}
{rank=same C0 B0 C1 X2 X4 X6}
"C0" [shape=oval label="C0"]
"C1" [shape=oval label="C1"]
"B0" [shape=box label="B0"]
C0 -> X2 [dir=none headclip=false]
X2 -> B0 [tailclip=false]
B0 -> X4 [dir=none headclip=false]
X4 -> C1 [tailclip=false]
C1 -> X6 [dir=none headclip=false]
{
edge [dir=none tailclip=false headclip=false]
I6 -> X6
I2 ->I3 ->I4 -> I5 ->I6
}
I2 -> X2 [tailclip=false headclip=false]
}
Giving:
I'm working on DOT with graphivz, I currently have this code:
digraph {
q0 -> q0[label="a"];
q0 -> q1[label="b"];
q1 -> q2[label="a"];
q1 -> q1[label="b"];
q2 -> q2[label="a"];
q2 -> q0[label="b"];
{ rank=same; q0, q1 }
q0[shape=circle];
q1[shape=circle];
q2[shape=circle, peripheries=2];
}
When rendering the graph I get:
:
Would it be possible to change the q0 -> q0 arrow so that it appears on top of the node or to its left so that it doesn't overlap with the q0 -> q1 edge?
I'd like to generate the DOT code to draw the equivalent state machine diagram shown.
I going to be created programmatically, I've got the transitions between states and superstates done. ButI need a bit of help with this:
This gives me an initial transition, but the State1 should be the cluster:
digraph {
compound=true;
node [shape=Mrecord]
rankdir="LR"
subgraph clusterOpen
{
label = "State1"
State2
}
State1 -> State2 [style="solid"];
node [shape = point label="" ] i ->State1
}
Normally Graphviz programs try hard to avoid placing nodes on top of other nodes. But you can place nodes anywhere you like if you explicitly provide a pos attribute for each node (see https://graphviz.org/faq/#FaqDotWithNodeCoords).
The program that creates your input files should calculate a pos attribute for each node. (Remember that pos coordinates are in points, while node sizes are in inches!). You can probably skip calculating the splines for the edges and just let neato do that.
This program:
digraph {
graph [bb="0,0,482.8,337"];
node [label="\N"];
State1 [height=4.0139,
label="{State 1|\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n}",
pos="162,144.5",
shape=Mrecord,
width=4.5];
State2 [height=1.3333,
label="{State 2|\n\n\n\n}",
// pos="403,144.5",
pos="220,88",
shape=Mrecord,
width=1.6944];
xp3 [height=0.05,
label="",
// pos="429,331",
pos="0,194",
shape=point,
// style=dotted,
style=invis,
width=0.05];
r1 [height=0.16667,
label="",
// pos="455,331",
pos="154,194",
shape=square,
width=0.16667];
xp4 [height=0.05,
label="",
// pos="481,331",
pos="0,88",
shape=point,
// style=dotted,
style=invis,
width=0.05];
xp1 [height=0.16,
label="",
pos="162,331",
shape=point,
width=0.16];
xp1 -> State1:n [pos="e,162,288.5 162,325.23 162,319.09 162,308.89 162,298.63",
style=dashed];
xp2 [height=0.16,
label="",
// pos="403,331",
pos="220,194",
shape=point,
width=0.16];
xp2 -> State2:n [pos="e,403,192.5 403,325.19 403,307.39 403,251.8 403,202.57"];
// manually added:
xp3 -> r1 [label="Trigger 1" dir=none ]
xp4 -> State2 [label="Trigger 2" ]
}
Run with this command line:
neato -n -Tpng stateDiagram.dot >stateDiagram.png
Produces this graph:
I have the following simple graph and I want to have only the text GetArea() in italics. Is this possible?
digraph {
rankdir = BT;
node [shape=record];
cPolygon [label="{cPolygon|GetArea()}"];
{rank=same; cSquare cTriangle}
cSquare -> cPolygon;
cTriangle -> cPolygon;
}
I think you should use HTML like labels:
digraph {
rankdir = BT;
node [shape=record];
cPolygon [label=<<table border="0"><tr><td>cPolygon</td></tr><tr><td><i>GetArea()</i></td></tr></table>>];
{rank=same; cSquare cTriangle}
cSquare -> cPolygon;
cTriangle -> cPolygon;
}
yields
edit
a horizontal row:
...
cPolygon [label=<<table border="0"><tr><td>cPolygon</td></tr><hr/><tr><td><i>GetArea()</i></td></tr></table>>];
...
I want to draw a V-Modell for software development. I want to use graphviz to keep it more maintainable than in Visio.
How can I get the typical V-structure in Graphviz?
I think I need horizontal and vertical alignment.
I tried to work with dummy-nodes but the layout is still poor.
This code works for me. It has a bit of a workaround in it to create the V shape. I use an invisible node and invisible edges to create a wedge between the 2 sides of the V-model.
digraph Vmodel {
// Transparent background
graph [bgcolor=none]
// Node style
node [
shape=record
style="rounded, filled"
width=2.5
height=0.8
fillcolor=white
];
// Create the nodes
user_req_models [label="User\nRequirements\nModels"]
sys_req_models [label="System\nRequirements\Models"]
arch_models [label="Architectural\Models"]
comp_design_models [label="Component\Design\Models"]
unit_design_models [label="Unit\nDesign\nModels"]
units [label="Units\n(SW, HW and Data)"]
components [label="Components\n(SW, HW and Data)"]
subsystems [label="Subsystems"]
integrated_system [label="Integrated System"]
operational_system [label="Operational System"]
// Create a hidden node to form a V-shaped wedge
hidden [style="invis"]
// Create the basic layout of the V model
user_req_models->sys_req_models
sys_req_models->arch_models
arch_models->comp_design_models
comp_design_models->unit_design_models
unit_design_models->units
units->components
components->subsystems
subsystems->integrated_system
integrated_system->operational_system
// Create the dashed edges
user_req_models->operational_system [style="dashed", constraint=false]
sys_req_models->integrated_system [style="dashed", constraint=false]
arch_models->subsystems [style="dashed", constraint=false]
comp_design_models->components [style="dashed", constraint=false]
// Create a wedge between the two parts
hidden->user_req_models [style="invis"]
hidden->sys_req_models [style="invis"]
hidden->arch_models [style="invis"]
hidden->comp_design_models [style="invis"]
hidden->operational_system [style="invis"]
hidden->integrated_system [style="invis"]
hidden->subsystems [style="invis"]
hidden->components [style="invis"]
hidden->unit_design_models [style="invis"]
hidden->units [style="invis"]
// Ranking on the same level
{rank=same; user_req_models, operational_system}
{rank=same; sys_req_models, integrated_system}
{rank=same; arch_models, subsystems}
{rank=same; comp_design_models, components}
{rank=same; unit_design_models, units}
}
I have used the following graph for requirements and tests specified in DO-178C.
digraph V_Cycle {
ranksep=0.3;
graph [fontname = "Handlee"];
node [fontname = "Handlee"];
edge [fontname = "Handlee"];
bgcolor=transparent;
/* ==== NODES === */
// Create hidden nodes to lower derived req
hid_sys_hl [style="invis"];
hid_hl_ll [style="invis"];
hid_ll_code [style="invis"];
hid_sr_hsi[style="invis"];
hid_req_tests[style="invis"];
// Requirements
node [color="#FFB71B", shape=note];
sys_req[label="System Requirements"];
hlr[label="High-Level\nSW Requirements"];
d_hlr[label="Derived\nHigh-Level Req.", style="dashed"];
llr[label="Low-Level\nSW Requirements"];
d_llr[label="Derived\nLow-Level Req.", style="dashed"];
// Code
node [color="#FFB71B", shape=component];
code;
// Tests
node [color="#000000", shape=box];
hsi_tests[label="Hardware/Software\nIntegration Tests"];
si_tests[label="Software\nIntegration Tests"];
ll_tests[label="Low-Level\n(Unit) Tests"];
/* ==== EDEGES === */
// Hidden to create intermediate level for derived req
hlr:sw -> hid_hl_ll:ne -> llr:sw[style="invis"];
llr:sw -> hid_ll_code:ne -> code:w[style="invis"];
{rank=same; d_hlr, hid_hl_ll}
{rank=same; d_llr, hid_ll_code}
// Requirements
edge[splines="ortho"];
sys_req:s -> hlr:w[weight=10];
hlr:s -> llr:w[weight=10];
hlr:s -> d_hlr:w[splines="spline",style="dashed", weight=5];
llr:s -> code:w[weight=10];
llr:s -> d_llr:w[splines="spline",style="dashed", weight=5];
// Tests
hsi_tests:s -> si_tests:e[dir="back", weight=10];
si_tests:s -> ll_tests:e[dir="back", weight=10];
// REQ & CODE -- TESTS
edge[splines="spline",color="#C89211", dir="back"];
{rank=same; hid_sys_hl, hid_sr_hsi}
hid_sys_hl -> hid_sr_hsi -> hsi_tests[style="invis"];
{rank=same; d_hlr, hid_req_tests}
llr -> d_hlr -> hid_req_tests -> ll_tests[style="invis"];
{rank=same; sys_req, hsi_tests}
sys_req -> hsi_tests;
{rank=same; hlr, si_tests}
hlr -> si_tests;
d_hlr:ne -> si_tests:sw;
{rank=same; llr, ll_tests}
llr -> ll_tests;
d_llr:ne -> ll_tests:s;
}
When using https://sketchviz.com/, the rendering is the following: