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=<{Blink|+ state
+ previousMillis
|+update
+ hwWrite
}>]
Derived1[fontsize=10 label=<{DiscretePin|+ pin
|+ begin
+ hwWrite
}>]
Derived2[fontsize=10 label=<{Buzzer|+ pin
+ frequ
|+ hwWrite
+ setFrequency
}>]
Derived3[fontsize=10 label=<{Indicator|+ col
+ row
+ onChar
|+ hwWrite
+ setOnChar
}>]
}
Note: Broken HTML5
Unfortunately this page is not HTML5 compliant as I'm using the xmp tag which is deprecated.