michaelh/zephyr
1
0
Fork 0
Code Releases Activity

doc: guides: smf: use graphviz extension

Browse source 
Diagrams were pre-rendered and code included at the end, however, it is
possible to use the Graphviz extension to render them directly. The
advantage is that diagrams follow pre-defined defaults, making them
consistent with the documentation style.

Signed-off-by: Gerard Marull-Paretas <gerard.marull@nordicsemi.no>
This commit is contained in:
Gerard Marull-Paretas 2021-11-09 23:41:08 +01:00 • committed by Anas Nashif
commit 2c3e12b597
3 changed files with 36 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

60
doc/guides/smf/img/flat.svg generated
View file

@ -1,60 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.43.0 (0)
-->
<!-- Title: flat_smf Pages: 1 -->
<svg width="129pt" height="231pt"
viewBox="0.00 0.00 129.00 230.60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 226.6)">
<title>flat_smf</title>
<polygon fill="white" stroke="transparent" points="-4,4 -4,-226.6 125,-226.6 125,4 -4,4"/>
<!-- ENTRY -->
<g id="node1" class="node">
<title>ENTRY</title>
<ellipse fill="black" stroke="black" cx="78" cy="-220.8" rx="1.8" ry="1.8"/>
</g>
<!-- A -->
<g id="node2" class="node">
<title>A</title>
<path fill="none" stroke="black" d="M47,-146.5C47,-146.5 109,-146.5 109,-146.5 115,-146.5 121,-152.5 121,-158.5 121,-158.5 121,-170.5 121,-170.5 121,-176.5 115,-182.5 109,-182.5 109,-182.5 47,-182.5 47,-182.5 41,-182.5 35,-176.5 35,-170.5 35,-170.5 35,-158.5 35,-158.5 35,-152.5 41,-146.5 47,-146.5"/>
<text text-anchor="middle" x="78" y="-160.8" font-family="Times,serif" font-size="14.00">STATE S0</text>
</g>
<!-- ENTRY&#45;&gt;A -->
<g id="edge1" class="edge">
<title>ENTRY&#45;&gt;A</title>
<path fill="none" stroke="black" d="M78,-218.86C78,-215.58 78,-204.26 78,-192.88"/>
<polygon fill="black" stroke="black" points="81.5,-192.64 78,-182.64 74.5,-192.64 81.5,-192.64"/>
</g>
<!-- B -->
<g id="node3" class="node">
<title>B</title>
<path fill="none" stroke="black" d="M12,-73.5C12,-73.5 74,-73.5 74,-73.5 80,-73.5 86,-79.5 86,-85.5 86,-85.5 86,-97.5 86,-97.5 86,-103.5 80,-109.5 74,-109.5 74,-109.5 12,-109.5 12,-109.5 6,-109.5 0,-103.5 0,-97.5 0,-97.5 0,-85.5 0,-85.5 0,-79.5 6,-73.5 12,-73.5"/>
<text text-anchor="middle" x="43" y="-87.8" font-family="Times,serif" font-size="14.00">STATE S1</text>
</g>
<!-- A&#45;&gt;B -->
<g id="edge2" class="edge">
<title>A&#45;&gt;B</title>
<path fill="none" stroke="black" d="M69.53,-146.31C65.44,-138.03 60.46,-127.91 55.91,-118.69"/>
<polygon fill="black" stroke="black" points="58.96,-116.95 51.39,-109.53 52.68,-120.05 58.96,-116.95"/>
</g>
<!-- C -->
<g id="node4" class="node">
<title>C</title>
<path fill="none" stroke="black" d="M47,-0.5C47,-0.5 109,-0.5 109,-0.5 115,-0.5 121,-6.5 121,-12.5 121,-12.5 121,-24.5 121,-24.5 121,-30.5 115,-36.5 109,-36.5 109,-36.5 47,-36.5 47,-36.5 41,-36.5 35,-30.5 35,-24.5 35,-24.5 35,-12.5 35,-12.5 35,-6.5 41,-0.5 47,-0.5"/>
<text text-anchor="middle" x="78" y="-14.8" font-family="Times,serif" font-size="14.00">STATE S2</text>
</g>
<!-- B&#45;&gt;C -->
<g id="edge3" class="edge">
<title>B&#45;&gt;C</title>
<path fill="none" stroke="black" d="M51.47,-73.31C55.56,-65.03 60.54,-54.91 65.09,-45.69"/>
<polygon fill="black" stroke="black" points="68.32,-47.05 69.61,-36.53 62.04,-43.95 68.32,-47.05"/>
</g>
<!-- C&#45;&gt;A -->
<g id="edge4" class="edge">
<title>C&#45;&gt;A</title>
<path fill="none" stroke="black" d="M84.89,-36.52C88.71,-46.88 93.06,-60.48 95,-73 97.52,-89.25 97.52,-93.75 95,-110 93.62,-118.9 91.02,-128.35 88.26,-136.79"/>
<polygon fill="black" stroke="black" points="84.87,-135.88 84.89,-146.48 91.48,-138.18 84.87,-135.88"/>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 3.2 KiB

65
doc/guides/smf/img/hierarchical.svg generated
View file

@ -1,65 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.43.0 (0)
-->
<!-- Title: hierarchical_smf Pages: 1 -->
<svg width="145pt" height="234pt"
viewBox="0.00 0.00 145.00 233.60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 229.6)">
<title>hierarchical_smf</title>
<polygon fill="white" stroke="transparent" points="-4,4 -4,-229.6 141,-229.6 141,4 -4,4"/>
<g id="clust1" class="cluster">
<title>clusterOpen</title>
<path fill="none" stroke="black" d="M20,-65C20,-65 98,-65 98,-65 104,-65 110,-71 110,-77 110,-77 110,-202 110,-202 110,-208 104,-214 98,-214 98,-214 20,-214 20,-214 14,-214 8,-208 8,-202 8,-202 8,-77 8,-77 8,-71 14,-65 20,-65"/>
<text text-anchor="middle" x="59" y="-198.8" font-family="Times,serif" font-size="14.00">PARENT</text>
</g>
<!-- A -->
<g id="node1" class="node">
<title>A</title>
<path fill="none" stroke="black" d="M28,-146.5C28,-146.5 90,-146.5 90,-146.5 96,-146.5 102,-152.5 102,-158.5 102,-158.5 102,-170.5 102,-170.5 102,-176.5 96,-182.5 90,-182.5 90,-182.5 28,-182.5 28,-182.5 22,-182.5 16,-176.5 16,-170.5 16,-170.5 16,-158.5 16,-158.5 16,-152.5 22,-146.5 28,-146.5"/>
<text text-anchor="middle" x="59" y="-160.8" font-family="Times,serif" font-size="14.00">STATE S0</text>
</g>
<!-- B -->
<g id="node2" class="node">
<title>B</title>
<path fill="none" stroke="black" d="M28,-73.5C28,-73.5 90,-73.5 90,-73.5 96,-73.5 102,-79.5 102,-85.5 102,-85.5 102,-97.5 102,-97.5 102,-103.5 96,-109.5 90,-109.5 90,-109.5 28,-109.5 28,-109.5 22,-109.5 16,-103.5 16,-97.5 16,-97.5 16,-85.5 16,-85.5 16,-79.5 22,-73.5 28,-73.5"/>
<text text-anchor="middle" x="59" y="-87.8" font-family="Times,serif" font-size="14.00">STATE S1</text>
</g>
<!-- A&#45;&gt;B -->
<g id="edge2" class="edge">
<title>A&#45;&gt;B</title>
<path fill="none" stroke="black" d="M59,-146.31C59,-138.29 59,-128.55 59,-119.57"/>
<polygon fill="black" stroke="black" points="62.5,-119.53 59,-109.53 55.5,-119.53 62.5,-119.53"/>
</g>
<!-- C -->
<g id="node3" class="node">
<title>C</title>
<path fill="none" stroke="black" d="M63,-0.5C63,-0.5 125,-0.5 125,-0.5 131,-0.5 137,-6.5 137,-12.5 137,-12.5 137,-24.5 137,-24.5 137,-30.5 131,-36.5 125,-36.5 125,-36.5 63,-36.5 63,-36.5 57,-36.5 51,-30.5 51,-24.5 51,-24.5 51,-12.5 51,-12.5 51,-6.5 57,-0.5 63,-0.5"/>
<text text-anchor="middle" x="94" y="-14.8" font-family="Times,serif" font-size="14.00">STATE S2</text>
</g>
<!-- B&#45;&gt;C -->
<g id="edge3" class="edge">
<title>B&#45;&gt;C</title>
<path fill="none" stroke="black" d="M67.47,-73.31C71.56,-65.03 76.54,-54.91 81.09,-45.69"/>
<polygon fill="black" stroke="black" points="84.32,-47.05 85.61,-36.53 78.04,-43.95 84.32,-47.05"/>
</g>
<!-- C&#45;&gt;A -->
<g id="edge4" class="edge">
<title>C&#45;&gt;A</title>
<path fill="none" stroke="black" d="M102.83,-36.75C111.11,-55.4 120.86,-85.71 111,-110 106.48,-121.14 98.4,-131.23 89.94,-139.58"/>
<polygon fill="black" stroke="black" points="87.47,-137.09 82.48,-146.44 92.21,-142.24 87.47,-137.09"/>
</g>
<!-- ENTRY -->
<g id="node4" class="node">
<title>ENTRY</title>
<ellipse fill="black" stroke="black" cx="59" cy="-223.8" rx="1.8" ry="1.8"/>
</g>
<!-- ENTRY&#45;&gt;A -->
<g id="edge1" class="edge">
<title>ENTRY&#45;&gt;A</title>
<path fill="none" stroke="black" d="M59,-221.81C59,-218.21 59,-205.41 59,-192.93"/>
<polygon fill="black" stroke="black" points="62.5,-192.73 59,-182.73 55.5,-192.73 62.5,-192.73"/>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 3.5 KiB

87
doc/guides/smf/index.rst
View file

@ -104,9 +104,21 @@ Flat State Machine Example
This example turns the following state diagram into code using the SMF, where This example turns the following state diagram into code using the SMF, where
the initial state is S0. the initial state is S0.
.. figure:: img/flat.svg .. graphviz::
:align: center :caption: Flat state machine diagram
:alt: Flat state machine diagram
digraph smf_flat {
node [style=rounded];
init [shape = point];
STATE_S0 [shape = box];
STATE_S1 [shape = box];
STATE_S2 [shape = box];
init -> STATE_S0;
STATE_S0 -> STATE_S1;
STATE_S1 -> STATE_S2;
STATE_S2 -> STATE_S0;
}
Code:: Code::
@ -194,9 +206,27 @@ Hierarchical State Machine Example
This example turns the following state diagram into code using the SMF, where This example turns the following state diagram into code using the SMF, where
S0 and S1 share a parent state and S0 is the initial state. S0 and S1 share a parent state and S0 is the initial state.
.. figure:: img/hierarchical.svg
:align: center .. graphviz::
:alt: Hierarchial state machine diagram :caption: Hierarchial state machine diagram
digraph smf_hierarchical {
node [style = rounded];
init [shape = point];
STATE_S0 [shape = box];
STATE_S1 [shape = box];
STATE_S2 [shape = box];
subgraph cluster_0 {
label = "PARENT";
style = rounded;
STATE_S0 -> STATE_S1;
}
init -> STATE_S0;
STATE_S1 -> STATE_S2;
STATE_S2 -> STATE_S0;
}
Code:: Code::
@ -286,48 +316,3 @@ When designing hierarchical state machines, the following should be considered:
is called. is called.
- The parent_run function only executes if the child_run function returns - The parent_run function only executes if the child_run function returns
whithout transitioning to another state, ie. calling smf_set_state. whithout transitioning to another state, ie. calling smf_set_state.
State Machine diagrams in this guide
====================================
The State Machine diagrams in this guide were generated using the graphviz dot
tool.
The following code generated flat.svg
.. code-block:: none
digraph smf_flat {
node [style=rounded];
init [shape = point];
STATE_S0 [shape = box];
STATE_S1 [shape = box];
STATE_S2 [shape = box];
init -> STATE_S0;
STATE_S0 -> STATE_S1;
STATE_S1 -> STATE_S2;
STATE_S2 -> STATE_S0;
}
The following code generated hierarchical.svg
.. code-block:: none
digraph smf_hierarchical {
node [style = rounded];
init [shape = point];
STATE_S0 [shape = box];
STATE_S1 [shape = box];
STATE_S2 [shape = box];
subgraph cluster_0 {
label = "PARENT";
style = rounded;
STATE_S0 -> STATE_S1;
}
init -> STATE_S0;
STATE_S1 -> STATE_S2;
STATE_S2 -> STATE_S0;
}