Skip to content

Instantly share code, notes, and snippets.

@evaristoc

evaristoc/gist:d6bf83cc8818f50f21b5d2dd3c90af72

Created November 19, 2024 19:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save evaristoc/d6bf83cc8818f50f21b5d2dd3c90af72 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save evaristoc/d6bf83cc8818f50f21b5d2dd3c90af72 to your computer and use it in GitHub Desktop.
Download ZIP
Mermaid scripts for "How Flow Diagrams Can..." article on Freecodecamp
Raw
gistfile1.txt
%% 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment