to

flowchart and mermaid

Sparisoma Viridi
9 mins read ·

Short intro about fowchart and the use of Mermaid

intro

The activity of using flowchart, or flowcharting, is a means of graphically stating ways of solving information handling problems, as people use the terms in working with computers1. It is a graphical representation of a process, where each process step is represented by a different symbol that contains a brief description of the process step 2. In process industry, flowcharts are used to indicate flow of the product during various stages or the process, where it is a combination of an outline process chart and the flow diagram, where each operation is represented by the appropriate shape of the equipment 3.

Flowchars are used in a wide variety of disciplines and fields, from software development to education to business and beyond, that might be used for document a process, identify potential breakdowns and bottlenecks in a process, visualize dependencies in a process, automate a manual process, visualize the flow of data, plan a project, identify the right person to own a task or project, troubleshoot technical issues, and make a decision that involves multiple variables 4.

Remember the purpose when begin to use flow chart, since readability is probably the most important aspect of a flowchart, where as the diagrammatic representation of a process, the flowchart aims to offer a visual description of a process to help us understand what is going on, but flowcharts can get a bit out of control and you can end up with something so complicated that it defeats the purpose of having one 5.

Then how to create a flowchart? There are at least about 15 best software that can help you in creating flowcharts online and offline 6. Not included on the list, there is also Mermaid. Mermaid is a powerful JavaScript library that can build a variety of charts and diagrams from a specialized flavor of Markdown, where one of them is flowchart 7. With Mermaid you have to code for creating flocharts. Rather than using traditional method to manually create flowcharts, there are several advantages in generating flowcharts as code, e.g. dynamic, editable, efficient, and quick to create 8.

types

Type of process flowcharts represent and their purpose determine their types as follow 9, where the first four are the main types, while the last six are additional sepecific purposes types.

Only program flowchart is discussed further here.

symbols

There are at least about 24 symbols used in flowchart 10, but only the first six are discussed here.

directions

Flowchart normally has top-bottom direction, but with current Mermaid version it can has top-bottom (TB), left-right (LR), bottom-top (BT) directions, and right-left (RL).

Using this direction feature, you can change direction of the flowchart without changing the whole code but only the option.

nodes id

Following are some flowchart examples without and with the use of nodes id

example

Following is a flowchart example in sorting numbers using bubble sort algorithm 11.

flowchart TB B --> I --> Init1 --> o1 --> Init2 --> o2 --> C1 C1 --"N"--> Incj C1 --"Y"--> Swap --> Incj --> Cj --"Y"--> o2 Cj --"N"--> Inci --> Ci --"Y"--> o1 Ci --"N"--> O --> E Ci{"i < n"} Cj{"j ≤ n"} Swap["Swap xi, xj"] Inci["i = i+1"] Incj["j = j+1"] C1{"xi > xj"} o1(("1")) o2(("2")) Init1["i = 1"] Init2["j = i + 1"] O[/"x1, x2, …, xn"/] I[/"x1, x2, …, xn"/] B(["Begin"]) E(["End"])

Above flowchart is produced using following Mermaid code

{{< mermaid >}}
flowchart TB
  B --> I --> Init1 --> o1 --> Init2 --> o2 --> C1
  C1 --"N"--> Incj
  C1 --"Y"--> Swap --> Incj --> Cj --"Y"--> o2
  Cj --"N"--> Inci --> Ci --"Y"--> o1
  Ci --"N"--> O --> E
  Ci{"i &lt; n"}
  Cj{"j &le; n"}
  Swap["Swap x<sub>i</sub>, x<sub>j</sub>"]
  Inci["i = i+1"]
  Incj["j = j+1"]
  C1{"x<sub>i</sub> &gt; x<sub>j</sub>"}
  o1(("1"))
  o2(("2"))
  Init1["i = 1"]
  Init2["j = i + 1"]
  O[/"x<sub>1</sub>, x<sub>2</sub>, &hellip;, x<sub>n</sub>"/]
  I[/"x<sub>1</sub>, x<sub>2</sub>, &hellip;, x<sub>n</sub>"/]
  B(["Begin"])
  E(["End"])
{{< /mermaid >}}

Let us see what it would be when use LR option for flowchart direction.

flowchart LR B --> I --> Init1 --> o1 --> Init2 --> o2 --> C1 C1 --"N"--> Incj C1 --"Y"--> Swap --> Incj --> Cj --"Y"--> o2 Cj --"N"--> Inci --> Ci --"Y"--> o1 Ci --"N"--> O --> E Ci{"i < n"} Cj{"j ≤ n"} Swap["Swap xi, xj"] Inci["i = i+1"] Incj["j = j+1"] C1{"xi > xj"} o1(("1")) o2(("2")) Init1["i = 1"] Init2["j = i + 1"] O[/"x1, x2, …, xn"/] I[/"x1, x2, …, xn"/] B(["Begin"]) E(["End"])

It seems that flowchart with TB direction is better than with LR direction, even for the first user still requires to scroll the browser while reading it.

Previous flowchart is used to create Python code, where one of its implementation is as follow

y = [9, 1, 3, 8, 2, 5, 4, 7, 6, 8, 0]
x = y.copy()

n = len(y)
for i in range(0, n-1):
  for j in range(i, n):
    if x[i] > x[j]:
      x[i], x[j] = x[j], x[i]

print('original:', y)
print('sorted-a:', x)

with

original: [9, 1, 3, 8, 2, 5, 4, 7, 6, 8, 0]
sorted-a: [0, 1, 2, 3, 4, 5, 6, 7, 8, 8, 9]

as the result. The code is available on OneCompiler 429gbrbse. The term sorted-a means sorted in ascending order.

Notice that the code is simpler compared to the flowchart. For simple example as bubble sort algorithm, it can be understood without the help of flowchart, but for complex example, it is advisable to use flowchart before writing the code.

notes


  1. Ned Chapin, “Flowcharting With the ANSI Standard: A Tutorial”, Computer Surveys, vol 2, no 2, p 119-146, url https://doi.org/10.1145/356566.356570↩︎

  2. Rashmi Karan, “What is a Flowchart? (With Examples)”, Shiksha Online, 28 Sep 2023, url https://www.shiksha.com/online-courses/articles/flowcharts-with-examples/ [20240406]. ↩︎

  3. D. R. Kiran, “Product and process development”, in Production Planning and Control, ch 16, p 223–246, 2019, url https://doi.org/10.1016/b978-0-12-818364-9.00016-0↩︎

  4. Shauna Ward, “What is a flowchart? — tips, examples, and templates”, Mural, 19 Mar 2021, url https://www.mural.co/blog/flowcharts [20240406]. ↩︎

  5. Luciano Rila, “What is the significance of a flowchart?”, University College London, 2 Jun 2021, url https://www.ucl.ac.uk/culture-online/case-studies/2021/jun/what-significance-flowchart [20240406]. ↩︎

  6. Alex York, “15 Best Flowchart Software Tools in 2024”, ClickUp, 6 Mar 2024, url https://clickup.com/blog/flowchart-software/ [20240406]. ↩︎

  7. Matt Eland, “How to Make Flowcharts with Mermaid.js”, The New Dev’s Guide – Medium, 16 Apr 2023, url https://medium.com/p/799c1d07ec6a [20240406]. ↩︎

  8. Zira Hira, “How to Create Diagrams as Code with Mermaid, GitHub, and Visual Studio Code”, freeCodeCamp, 6 Sep 2023, url https://www.freecodecamp.org/news/diagrams-as-code-with-mermaid-github-and-vs-code/ [20240406]. ↩︎

  9. Web Developer, “A Comprehensive Guide to Flowchart Symbols and Notations for Process Workflows”, Cavintek, 22 Nov 2023, url https://www.cflowapps.com/flowchart-symbols/ [20240406]. ↩︎

  10. Danesh Ramuthi, “Flowchart Symbols and Meaning: A Complete Guide (2024)”, Venngage, 29 Feb 2024, url https://venngage.com/blog/flowchart-symbols/ [20240406]. ↩︎

  11. GfG, “Bubble Sort – Data Structure and Algorithm Tutorials”, GeeksforGeeks, 21 Nov 2023, url https://www.geeksforgeeks.org/bubble-sort/ [20240406]. ↩︎

Tags: