%% Get an idea of where your flowchart should start and where should end
flowchart TD
   A([start]) -.-> P([end])
   style A fill:black, color:#fff
   style P fill:grey, color:#fff
   
%% Arrows are more than a connection between two nodes.
flowchart TD
  A([start]) --> |variable declaration| B{{"*character*(str) 
                                          *count*(num) 
                                          *rows*(list) 
                                          *result*(str)"}}
  style A fill:black, color:#fff
  B -.-> C["..."]


%% Add descriptions to the shapes with references to operations, functions or target variables.
flowchart TD
   A["..."] -.-> D[/"`input: *i*`"/]
    --> |"`create strings of character of length (*i* + 1)`"| E["character.repeat(i+1)"]
    style D fill:#F8D192
    E --> |"`add newly created string 
            at the end of *rows* list`"| F["`rows.push(**new string**)`"] 
    -.-> B["..."] 
 
%% Make use of simple guides to highlight groups, and add a legend to explain those groupings.
flowchart TD
    A([start]) --> |variable declaration| B{{"`*character*(str)
    *count*(num)
    *rows*(list)
    *result*(str)`"}}
    style A fill:black, color:#fff
    B --> |start count-controlled for-loop| C{"`Is *i* >= *count*?`"}
    subgraph COUNT_CONTROLLED_LOOP
    C --> |No| D[/"`input: *i*`"/]
    style D fill:#F8D192
    D --> |"`create strings of character of length (*i* + 1)`"| E["character.repeat(i+1)"]
    E --> |"`add newly created string 
            at the end of *rows* list`"| F["`rows.push(**new string**)`"]
    F --> |"`bottom of the block: update *i*`"| G[/i = i+1/]
    style G fill:#F8D192
    G --> |evaluate condition| C
    end
    C ----> |Yes| H[/"`output: *rows* list with *count* string elements`"/]
    style H fill:#ECF892
    H --> |"`start collection-controlled for-loop: 
    *rows* = ['#','##','###',...] (length = *count*)`"|I{"`Did we enter all elements 
                                                       of the *rows* list?`"}
    subgraph COLLECTION_CONTROLLED_LOOP
    I --> |No|J[/"`input: 
               *row* (str) = currentOf(*rows*)`"/]
    style J fill:#F8D192
    J --> |"`concatenate *row* string and a endline (\n) to the current value of *result*`"|K["`*result* + *row* + \n`"]
    K --> |"`overwrite *result* with its new concatenation`"|L["`*result* = **concatenation**`"]
    L --> |"`bottom of the block: update entering value`"| M[/"`currentOf(*rows*) = nextOf(*rows*)`"/]
    style M fill:#F8D192
    M --> |evaulate condition| I
    end
    I --> |Yes| N[/"`output: *result*(str)`"/]
    style N fill:#ECF892
    N --> |"`display *result* on the console`"|O["`console.log(*result*)
            fa:fa-display`"]
    style O fill: #DFFF73
    O --> |finish|P([end])
    style P fill:grey, color:#fff
 
%% Be consistent with the conditional expressions.
flowchart TD
    A["..."] -.->|first condition| B{"is x > z"}
    B --> |YES|C["Do something with x"]
    C -->  |second condition| D{"is x < y?"}
    style D fill:lightblue
    D -->|NO| E["Do something with x"]
    E --> F["return x"]
    B --> |NO| F
    D --> |YES| F
    
flowchart TD
    A["..."] -.->|first condition| B{"is x > z"}
    B --> |YES|C["Do something with x"]
    C -->  |second condition| D{"is x >= y?"}
    style D fill:lightblue
    D -->|YES| E["Do something with x"]
    E --> F["return x"]
    B --> |NO| F
    D --> |NO| F
    
%% Loops are conditionals in disguise.
flowchart TD
    A["..."] -.->|"`**(1)** START A LOOP: entering values of initial *repeat* and *stop* (it can be a combination of them)`"| B[/"`input: *repeat*, *stop*`"/]
    B --> C{"`**(2)** Conditional that evaluates *repeat* against *stop*`"} 
    C --> |"`**(3)** ENTER THE LOOP: the entering value after evaluating the condition can be FALSE or TRUE (you decide this)`"| D[/"`input: *repeat*`"/]
    D --> |you can use repeat if necessary| E["`**(4)** Do something inside the loop`"]
    E --> |"`**(5)** bottom of the block: update *repeat* value if necessary`"| F[/updated *repeat*/]
    F --> |"`**(6)** evaluate condition again with (new) value of *repeat*`"| C
    C --> |"`**(7)** LEAVE THE LOOP: the value of the evalution changed (if it was FALSE, now it is TRUE, or viceversa)`"| G["somewhere out the loop..."]
    
%% Keep in mind that it is about tracing logic, not literally following the syntax.
flowchart TD
    A["..."] --> |start count-controlled for-loop| C{"`Is *i* >= *count*?`"}
    subgraph COUNT_CONTROLLED_LOOP
    C --> |No| D[/"`input: *i*`"/]
    style D fill:#F8D192
    D --> |"`create strings of character of length (*i* + 1)`"| E["character.repeat(i+1)"]
    E --> |"`add newly created string 
            at the end of *rows* list`"| F["`rows.push(**new string**)`"]
    F --> |"`bottom of the block: update *i*`"| G[/i = i+1/]
    style G fill:#F8D192
    G --> |evaluate condition| C
    end
    C -.-> |Yes| B["..."]
    
%% Remember that even expressions can be broken into different steps.
flowchart TD
    A["..."] -.-> J[/"`input: *row* (str) = currentOf(*rows*)`"/]
     --> |"`concatenate *row* string and a endline (\n) to the current value of *result*`"|K["`*result* + *row* + \n`"]
     style J fill:#F8D192
     K --> |"`overwrite *result* with its new concatenation`"|L["`*result* = **concatenation**`"]
     -.-> B["..."]
     
     
 %% Wrapping up (Challenge)
 flowchart TD
    A["..."] -.-> B{"is x > z"}
    B --> |YES|C["Do something with x"]
    C -->  D{"is x >= y?"}
    style D fill:lightblue
    D -->|YES| E["Do something with x"]
    E --> F["return x"]
    B --> |"NO (new flow)"| D
    D --> |NO| F
    B -.-x |This flow must be changed|F