Add mermaid diagrams for CFG and DAG

Author: davepagurek

contributor_docs/p5.strands.md

@@ -70,6 +70,29 @@ return b;
 // End chunk 3
 ```
 
+```mermaid
+flowchart TD
+
+subgraph chunk1
+  a0[let a = 0]
+  b0[let b = 1]
+end
+
+subgraph chunk2
+  ifstart[if a < 2]
+  b1[b = 10]
+  ifend[end if]
+end
+
+subgraph chunk3
+  b2[b += 2]
+  ret[return b]
+end
+
+chunk1-->chunk2
+chunk2-->chunk3
+```
+
 We store the individual states that variables can be in as nodes in a **directed acyclic graph (DAG)**. This is a fancy name that basically means each of these variable states may depend on previous variable states, and outputs can't feed back into inputs. Each time you modify a variable, that represents a new state of that variable. For example, below, it is not sufficient to know that `c` depends on `a` and `b`; you also need to know *which version of `b`* it branched off from:
 
 ```js
@@ -91,6 +114,19 @@ return c_0;
 
 When we generate GLSL from the graph, we start from the variables we need to output, the return values of the function (e.g. `c_0` in the example above.) From there, we can track dependencies through the DAG (in this case, `b_1` and `a_1`). Each dependency has their own dependencies. We make sure we output the dependencies for a node before the node itself.
 
+```mermaid
+flowchart TB
+
+c_0-->c_0_plus((+))
+c_0_plus-->b_1
+c_0_plus-->a_0
+b_1-->b_1_plus((+))
+b_1_plus-->b_0
+b_1_plus-->n1_0[1]
+b_0-->b1_1[1]
+a_0-->n0[0]
+```
+
 Each node in the DAG belongs to a chunk in the CFG. This helps us keep track of key points in the code. If we need to, for example, generate a temporary variable at the end of an if statement, we can refer to that CFG chunk rather than whatever the last value node in the if statement happens to be.
 
 ## Control flow