bytes-und-grains

in-proc-out flowchart examples

Sparisoma Viridi
3 mins read ·

List of common flowchart symbols

There are at least 5+1 symbols used as common flowchart symbols, which are oval, rectangle, arrow, diamond, parallelogram, and plus circle 1, where the first is more to rectangle with rounded corners with some names, e.g. stadium, capsule, or pill 2. Beside flowchart, there is an alternative known as algorithm, where both are tools to visualize the solution of a problem in computer programming and they differ from each other 3. Flowchart can also be made using code, e.g. Mermaid 4. Here examples of flowchart that only using input, process, and output symbols are given using Mermaid.

addition of two numbers

flowchart LR B --> I --> P --> O --> E B(["Begin"]) I[/"Read x, y"/] P["z = x + y"] O[/"Display z"/] E(["End"])
{{< mermaid >}}
flowchart LR
  B --> I --> P --> O --> E
  B(["Begin"])
  I[/"Read x, y"/]
  P["z = x + y"]
  O[/"Display z"/]
  E(["End"])
{{< /mermaid >}}

subtraction of two numbers

flowchart LR B --> I --> P --> O --> E B(["Begin"]) I[/"Read x, y"/] P["z = x — y"] O[/"Display z"/] E(["End"])
{{< mermaid >}}
flowchart LR
  B --> I --> P --> O --> E
  B(["Begin"])
  I[/"Read x, y"/]
  P["z = x &mdash; y"]
  O[/"Display z"/]
  E(["End"])
{{< /mermaid >}}

multiplication of two numbers

flowchart LR B --> I --> P --> O --> E B(["Begin"]) I[/"Read x, y"/] P["z = x × y"] O[/"Display z"/] E(["End"])
{{< mermaid >}}
flowchart LR
  B --> I --> P --> O --> E
  B(["Begin"])
  I[/"Read x, y"/]
  P["z = x &times; y"]
  O[/"Display z"/]
  E(["End"])
{{< /mermaid >}}

division of two numbers

flowchart LR B --> I --> P --> O --> E B(["Begin"]) I[/"Read x, y"/] P["z = x / y"] O[/"Display z"/] E(["End"])
{{< mermaid >}}
flowchart LR
  B --> I --> P --> O --> E
  B(["Begin"])
  I[/"Read x, y"/]
  P["z = x / y"]
  O[/"Display z"/]
  E(["End"])
{{< /mermaid >}}

difference of squares

There is a relation

$$\tag{1} a^2 - b^2 = (a + b)(a - b) $$

known as difference of squares 5.

flowchart LR B --> I --> P1 --> P2 --> P3 --> O --> E B(["Begin"]) I[/"Read a, b"/] P1["c = a + b"] P2["d = a — b"] P3["e = c × d"] O[/"Display e"/] E(["End"])
{{< mermaid >}}
flowchart LR
  B --> I --> P1 --> P2 --> P3 --> O --> E
  B(["Begin"])
  I[/"Read a, b"/]
  P1["c = a + b"]
  P2["d = a &mdash; b"]
  P3["e = c &times; d"]
  O[/"Display e"/]
  E(["End"])
{{< /mermaid >}}

Above example using three process symbols, P1, P2, P3, that actually can be merged into single P, but they are displayed separated for clearer meaning.

other examples

Infinite number of examples using only input, process, and output symbols can be made. Following are other examples.

refs


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

  2. Abhimanyu, Glorfindel, “What is this shape that looks like a rectangle with rounded ends called?”, Graphic Design Stack Exchange, 14 Nov 2018, url https://graphicdesign.stackexchange.com/q/117005/196920 [20240826]. ↩︎

  3. Shreeya Thakur, “Difference Between Algorithm And Flowchart - Explained!”, Unstop, 22 Nov 2023, url https://unstop.com/blog/difference-between-algorithm-and-flowchart [20240826]. ↩︎

  4. Sparisoma Viridi, “flowchart and mermaid”, bytes-and-grains, 6 Apr 2024, url https://dudung.github.io/bug/2002/ [20240826]. ↩︎

  5. Elizabeth Stapel, “Special Factoring: Differences of Squares”, Purplemath, May 2012, url https://www.purplemath.com/modules/specfact.htm [20240826]. ↩︎

Tags: