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 G { 
  graph [
    label="Finite State Machine"
    labelloc="t"
    fontname="sans-serif"
  ]
  node [
    style=filled
    fillcolor=gray95
    fontname="sans-serif"
  ]
  
  IDLE   -> STEP_A [label="onAlarm" fontsize=10];  
  STEP_A -> STEP_B [label="after 15s" fontsize=10];  
  STEP_A -> IDLE   [label="onDisarm" fontsize=10];  
  STEP_B -> STEP_C [label="after 10s" fontsize=10];  
  STEP_A -> IDLE   [label="onDisarm" fontsize=10];  
  STEP_C -> STEP_D [label="after 10s" fontsize=10];  
  STEP_C -> IDLE   [label="onDisarm" fontsize=10];  
  STEP_D -> IDLE   [label="onDisarm" fontsize=10];
  
  IDLE[label = "IDLE (do nothing)"]
  STEP_A[label = "A_NAME"] 
}

GraphViz Example Finite State Machine

 

UML Class Diagram

This is an example for a UML class diagram:


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-08-13