Clean DFG spec a bit

docs/docs/CPG/specs/dfg.md

@@ -2,10 +2,6 @@
 
 The Data Flow Graph (DFG) is built as edges between nodes. Each node has a set of incoming data flows (`prevDFG`) and outgoing data flows (`nextDFG`). In the following, we summarize how different types of nodes construct the respective data flows.
 
-{:style="background:#dddddd"}
-[Statement](#estatement)
-
-<span class="child">[Statement](#estatement)</span>
 
 ## CallExpression
 
@@ -73,38 +69,29 @@ For this reason, if the assignment's ast parent is not a `Block` (i.e., a block
 If the `lhs` consists of multiple variables (or a tuple), we try to split up the `rhs` by the index. If we can't do this, the whole `rhs` flows to all variables in `lhs`.
 
 Scheme:
-```mermaid
-flowchart LR
-    node([AssignExpression]) -.- rhs(rhs);
-      rhs -- DFG --> lhs;
-    node([AssignExpression]) -.- lhs(lhs);
-```
 
-```mermaid
-flowchart LR
-  node([AssignExpression]) -.- lhs(lhs);
-  node([AssignExpression]) -.- rhs(rhs);
-  rhs -- DFG --> lhs;
-  rhs -- DFG --> node;
-```
-
-```mermaid
-flowchart LR
-  A[assignment.rhs] -- DFG --> assignment.lhs;
-  subgraph S[If the ast parent is not a Block]
-    direction LR
-    assignment.rhs -- DFG --> assignment;
-  end
-  A --> S;
-```
-
-If size of `lhs` and `rhs` is equal:
-```mermaid
-flowchart LR
-    node([AssignExpression]) -.- rhs("rhs[i]");
-      rhs -- "for all i: DFG[i]" --> lhs;
-    node([AssignExpression]) -.- lhs("lhs[i]");
-```
+* Standard case:
+  ```mermaid
+  flowchart LR
+      node([AssignExpression]) -.- rhs(rhs);
+        rhs -- DFG --> lhs;
+      node([AssignExpression]) -.- lhs(lhs);
+  ```
+* If the assignment happens inside another statement/expression (not inside a `Block`):
+  ```mermaid
+  flowchart LR
+      node([AssignExpression]) -.- lhs(lhs);
+      node([AssignExpression]) -.- rhs(rhs);
+      rhs -- DFG --> lhs;
+      rhs -- DFG --> node;
+  ```
+* Since `lhs` and `rhs` can consist of multiple values, if size of `lhs` and `rhs` is equal, we actually make the DFG-edges for each indexed value:
+  ```mermaid
+  flowchart LR
+      node([AssignExpression]) -.- rhs("rhs[i]");
+        rhs -- "for all i: DFG[i]" --> lhs;
+      node([AssignExpression]) -.- lhs("lhs[i]");
+  ```
 
 ### Case 2: Compound assignment (`operatorCode: *=, /=, %=, +=, -=, <<=, >>=, &=, ^=, |=` )
 
@@ -431,7 +418,7 @@ Interesting fields:
 
 The value of the iterable flow to the `VariableDeclaration` in the `variable`. Since some languages allow arbitrary logic, we differentiate between two cases:
 
-### Case 1. The `variable` is a `DeclarationStatement`.
+#### Case 1. The `variable` is a `DeclarationStatement`.
 
 This is the case for most languages where we can have only a variable in this place (e.g., `for(e in list)`). Here, we get the declaration(s) in the statement and add the DFG from the iterable to this declaration.
 
@@ -445,7 +432,7 @@ Scheme:
     iterable -- for all i: DFG --> declarations
 ```
 
-### Case 2. The `variable` is another type of `Statement`.
+#### Case 2. The `variable` is another type of `Statement`.
 
 In this case, we assume that the last VariableDeclaration is the one used for looping. We add a DFG edge only to this declaration.
 

docs/docs/stylesheets/extra.css

@@ -194,6 +194,9 @@ body {
   border-top: none;
   border-bottom: none;
 }
+.md-typeset li>.mermaid {
+  border: none;
+}
 
 .md-typeset .child {
   background: #dddddd;