Diagrams for Arduino Programming
Diagrams are a good alternative way to describe functionality. When words are not enough - try to explain your sketch with diagrams
Graphviz is a online tool to generate various diagrams. Here is a short description how to describe a state machine and a UML class diagram.
States and Behaviour of a Finite State Machine
This is an example for a finite state machine
digraph FSM { graph [ label="Finite State Machine" labelloc="t" fontname="sans-serif" ] node [ style=filled fillcolor=gray95 fontname="sans-serif" ] step0 -> step1 [label="onKeyPressA" fontsize=10]; step1 -> step2 [label="after 15s" fontsize=10]; step1 -> step0 [label="onReset" fontsize=10]; step2 -> step3 [label="after 10s" fontsize=10]; step2 -> step0 [label="onReset" fontsize=10]; step3 -> step4 [label="after 10s" fontsize=10]; step3 -> step0 [label="onReset" fontsize=10]; step4 -> step0 [label="onReset" fontsize=10]; step0[label = "idle"] step1[label = "a name"] }
UML Class Diagram
This is an example for a UML class diagram:
as code xmp
digraph UML_Class_diagram {
graph [
label="UML Class Diagram Blink"
labelloc="t"
fontname="sans-serif"
]
node [
fontname="sans-serif"
shape=record
style=filled
fillcolor=gray95
]
edge [fontname="sans-serif"]
edge [dir=back arrowtail=empty style=""] // style=dashed
Base -> Derived1 [xlabel=inheritance fontsize=8]
Base -> Derived2
Base -> Derived3
Base [fontsize=10 label=<{<b>Blink</b>|+ state<br/>+ previousMillis<br/>|+update<br/>+ hwWrite<br/>}>]
Derived1[fontsize=10 label=<{<b>DiscretePin</b>|+ pin<br/>|+ begin<br/>+ hwWrite<br/>}>]
Derived2[fontsize=10 label=<{<b>Buzzer</b>|+ pin<br/>+ frequ<br/>|+ hwWrite<br/>+ setFrequency<br/>}>]
Derived3[fontsize=10 label=<{<b>Indicator</b>|+ col<br/>+ row<br/>+ onChar<br/>|+ hwWrite<br/>+ setOnChar<br/>}>]
}
Note: Broken HTML5
Unfortunately this page is not HTML5 compliant as I'm using the xmp tag which is deprecated.