flowchart and mermaid

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 computers¹. 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 ². 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 ³.

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 ⁴.

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 ⁵.

Then how to create a flowchart? There are at least about 15 best software that can help you in creating flowcharts online and offline ⁶. 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 ⁷. 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 ⁸.

types

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

• Document flowchart. These type is designed to show the existing controls over the document flow through the components of the system, e.g. various business units, and it is read from left to right.
• Data flowchart. The controls governing data flows within the system and is used primarily to show the channels through which data is transmitted throughout the system, which focuses on channels of data transmission, rather than how control flow is represented as in previous type, are represented using this type of flowchart.
• System flowchart. This type represent the flow of data to and through the main components of the system such as programs, storage media, data entry, processors, and communication networks.
• Program flowchart. The controls placed internally in a program within a system are represented using this type of flowchart.
• Swimlane flowchart. This type segments different functionalities into separate lanes, e.g. a swimlane diagram may be created with routes for the work processes performed by other organizational areas like human resources, operations, and accounting.
• Workflow flowchart. In order to to document workflows that involve tasks, documents, and information in offices this type is used.
• Cross-functional flowcharts. This type of flowchart is usually used to delineate who does what in a cross-functional team, since it represents who is responsible for ensuring that different functions are executed and when they are executed.
• Event-driven process chain flowchart. To document or plan a business process, which is driven by event, this type of flowchart is used.
• Specification and description language flowchart. This type is used to brainstorm computer algorithms based on three basic components – system definition, block, and process, which illustrates the modeling language used to show how event-driven applications work in real-time, e.g. used in aviation, automotive, communication, and medical industries.
• Influence diagram. It is a visual representations of decision problems, where the main purpose is to outline critical elements like roadblocks or objectives to achieve at different points.

Only program flowchart is discussed further here.

symbols

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

• Oval, ellipse, rounded rectangle are for start and finish.
  flowchart TD A(["Begin"]) B(["End"])

  {{< mermaid >}}
  flowchart TD
    A(["Begin"])
    B(["End"])
  {{< /mermaid >}}
  

• Rectangle is for process.
  flowchart TD P1["Calculate"] P2["Sort"]

  {{< mermaid >}}
  flowchart TD
    P1["Calculate"]
    P2["Sort"]
  {{< /mermaid >}}
  

• Trapezium is for input and output.
  flowchart TD I[/"Read"/] O[/"Display"/]

  {{< mermaid >}}
  flowchart TD
    I[/"Read"/]
    O[/"Display"/]
  {{< /mermaid >}}
  

• Diamond is for decision.
  flowchart TD \{"If x > 0"}

  {{< mermaid >}}
  flowchart TD
    {"If x > 0"}
  {{< /mermaid >}}
  

• Circle is for connector.
  flowchart TD \(("1"))

  {{< mermaid >}}
  flowchart TD
    (("1"))
  {{< /mermaid >}}
  

• Arrow is for flow direction.
  flowchart LR A ---> B A[" "] B[" "] style A fill:none, stroke-width:0; style B fill:none, stroke-width:0;

  {{< mermaid >}}
  flowchart TD
    A ---> B
    A["&nbsp;"]
    B["&nbsp;"]
    style A fill:none, stroke-width:0;
    style B fill:none, stroke-width:0;
  {{< /mermaid >}}
  

  The arrow actually can not be drawn without origin and destination symbols. In order to show only the arrow, CSS is used to hide the symbols, and space is used as string to display.

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).

• TB direction
  flowchart TB A --> B

    {{< mermaid >}}
    flowchart TB
      A --> B
    {{< /mermaid >}}
  

• LR direction
  flowchart LR A --> B

  {{< mermaid >}}
  flowchart LR
    A --> B
  {{< /mermaid >}}
  

• BT direction
  flowchart BT A --> B

    {{< mermaid /*>}}
  flowchart BT
    A --> B
  {{</* /mermaid >}}
  

• RL direction
  flowchart RL A --> B

    {{< mermaid >}}
  flowchart RL
    A --> B
  {{< /mermaid >}}
  

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

• Without nodes ide
  flowchart LR First --> Second --> Third

  {{< mermaid >}}
  flowchart LR
    First --> Second --> Third
  {{< /mermaid >}}
  

  This approach does not accomodate when the text containing spaces.
• With nodes id
  flowchart LR A(("First step")) B["Second step"] C[/"Third step"/] A --> B --> C

  {{< mermaid >}}
  flowchart LR
    A --> B --> C
    A(("First step"))
    B["Second step"]
    C[/"Third step"/]
  {{< /mermaid >}}
  

  Nodes id are A, B, and C. While declaring a node, a node id can be defined. Later, to create flow direction between two node, simple use nodes id of related nodes and an arrow connecting them.
• Use style on node id
  flowchart LR A(("Rot")) B["Blau"] A --> B style A color: white, fill: red, stroke: blue, stroke-width: 4px; style B color: white, fill: blue, stroke: red, stroke-width: 4px;

  {{< mermaid >}}
  flowchart LR
    A(("Rot"))
    B["Blau"]
    A --> B
    style A color: white, fill: red, stroke: blue, stroke-width: 4px;
    style B color: white, fill: blue, stroke: red, stroke-width: 4px;
  {{< /mermaid >}}
  

  It can be seen that fill color, stroke color and widhth, and also text color can be customized using CSS-like format. Notice that color keyword must be put before others or it will not work.

example

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

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.

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