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"] 
}

GraphViz Example Finite State Machine

 

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/>}>] }

GraphViz Example UML class diagram

Note: Broken HTML5

Unfortunately this page is not HTML5 compliant as I'm using the xmp tag which is deprecated.

Links

(*) Disclosure: Some of the links above are affiliate links, meaning, at no additional cost to you I will earn a (little) comission if you click through and make a purchase. I only recommend products I own myself and I'm convinced they are useful for other makers.

History

First upload: 2023-03-06 | Version: 2024-03-22