Flowcharts and Mermaid Code: A Science Teacher’s Secret Sauce

Getting students buzzing about the steps of a scientific process isn’t easy; helping them think through concepts and process, even harder. Imagine if you could engage them with flowcharts and learn the same critical content. One way to get it done is to combine flowcharts and coding.

Use flowcharts as visual tools that make student cognition visible to you and to peer learners. This can aide students in understanding and applying scientific concepts. What’s more, it can help with the new science Texas Essential Knowledge and Skills (TEKS).

A Quick Note: This blog entry shows examples of science-related flowcharts. I created each using Mermaid code, which I will explain later in the blog entry. You can see the code and the corresponding diagram online. A free mini-course for sixth grade students is also included and it’s great for grown-ups, too.

Visualize It

Flowcharts help students visualize the non-linear, iterative nature of scientific inquiry. It helps them see that science is more than a collection of cold facts. Instead, students practice decomposition and systematic disconfirmation.

Let’s explore these two terms in the context of flowcharts.

Decomposition

Decomposition involves breaking complex problems or systems into smaller, more manageable parts. When this is done, it makes tough concepts more accessible. You can represent it in this way:

Then, you can solve the smaller problems on your way to take care of the big one.

Flowchart Examples

Consider these examples, only two of the several made and available to you online (get a copy of the Google Doc). All the flowcharts below were made by the author.

The Water Cycle

Use a flowchart to illustrate the stages of evaporation, condensation, and precipitation.

Decomposition of Food Waste in a Compost Bin

Those are simple examples. But flowcharts aren’t only about processes that occur in the world around us. They can also be about claims that are made.

Systematic Disconfirmation

Scientists have the opportunity to develop testable hypotheses, then spend time trying to show how wrong they might be. This process is known as systematic disconfirmation. It’s the “identification of evidence that contradicts or challenges an initial belief or theory” (source). Here’s are two ways to break it down.

Five-Step Process

You can also follow a three-step process to disconfirmation, such as:

As you can see, these processes have the potential to promote critical thinking and engineering practices.

Promoting Critical Thinking and Engineering Practices

Flowcharts do not only make concepts simpler to understand, they also promote critical thinking. Imagine presenting students with a scientific mystery to solve by breaking the problem down in manageable pieces. Then they apply a systematic disconfirmation process to it.

When students create their own flowcharts, they’re not just passively absorbing information but are also engaged in the idea construction process. They do this because they have to map out their processes and identify any missed steps. This fosters a sense of ownership over the learning process.

One way to introduce students to flowchart creation and thinking problems through is to have them use Mermaid code.

The Benefits of Coding

There is a lot of research on the value of teaching students to code. Below are just a few.

Perplexity Pro AI-generated table, all sources verified by author

Now that you’ve had the opportunity to see peer-reviewed research on the benefits of coding in K-12 classrooms, let’s take a look at a simple way to introduce it.

Introducing Mermaid Code

Coding has always been difficult for me, but I took to Mermaid code quickly. In the classroom, I want quick results that lead to success. That’s why I like Mermaid code as a way to introduce coding without scaring people off.

Explaining Mermaid Code

Here’s an AI-generated definition of Mermaid coding:

Mermaid coding is a special way of making simple drawings using words and symbols on a computer. It’s like giving the computer instructions to create pictures for you, such as boxes, circles, and arrows that connect them.

For example, you can tell the computer to draw a box and write “Start” inside it. Then, you can tell it to draw an arrow from the “Start” box to another box with the word “End” inside.

Mermaid coding helps you create diagrams, charts, and other visual things quickly without having to draw them by hand. It’s a fun and easy way to show ideas and how things work using a computer. In simple terms, Mermaid coding is like using a secret language to tell the computer what to draw for you.

This is a fun way to introduce rapid prototyping (a key component of the Engineering Design Process) at little to no cost. Students are able to adjust diagrams on the fly by editing the code. Let’s take a look at an example.

A Modified Water Cycle Example

To generate the code for the water cycle flow chart earlier in this blog entry, I used the code below:

mermaid graph TD; 
A[Evaporation] -->|B[Condensation];
B --> C[Precipitation]; 
C --> A;

mermaid graph TD; 
A[Evaporation] -->|B[Condensation];
B --> C[Precipitation]; 
C --> A;

With this example, one can easily begin to see how Mermaid code works. I can make modifications to that code to get different results:

graph TD;
    A[Evaporation] -->|Results| B[Condensation];
    B -->|Transforms into| C[Precipitation];
    C ---|Then begins again...| A;

graph TD;
    A[Evaporation] -->|Results| B[Condensation];
    B -->|Transforms into| C[Precipitation];
    C ---|Then begins again...| A;

As you can see, in this version of the flowchart, I’ve added labels for the connectors. This yields a different result than the one introduced earlier in this blog entry:

Simple and Adaptable

The secret to Mermaid is its linear nature. One thing leads to another. As a result of its predictability, Mermaid code integrates well with web technologies, such as:

• HTML
• Cascading Style Sheets (CSS)
• JavaScript
• Markdown editors
• Project management software
• Documentation generators

This is important because it means you can embed Mermaid diagrams into web pages. Introducing students to it is an on-ramp to learning coding.

Students then can begin to use Mermaid code in designing flowcharts about scientific processes. In time, they can use it for online tutorials, educational content, or interactive visualizations.

Here’s a short video tutorial that was helpful for me. This quick reference guide may also be helpful. A few more videos and resources appear at the end of this blog entry.

AI-Powered Mermaid Code Assistance

AI chatbots can generate Mermaid code for flowcharts based on simple text descriptions. For example, a student could describe a scientific process in plain language, and an AI tool could generate the corresponding Mermaid code:

Prompt Input: The water cycle involves evaporation, condensation, and precipitation. Evaporation leads to condensation, which leads to precipitation, and the cycle repeats.

Output:

graph TD;
    A[Evaporation] --> B[Condensation];
    B --> C[Precipitation];
    C --> A;

graph TD;
    A[Evaporation] --> B[Condensation];
    B --> C[Precipitation];
    C --> A;

This AI-assisted approach can make the creation of flowcharts even more accessible and efficient for students. Try asking one of the following AI chatbots to develop code for a flowchart:

• Claude.ai
• Google Gemini
• OpenAI’s ChatGPT
• Perplexity

Then try that code in a markdown editor or free web-based tool. All of the solutions below support Mermaid code and are free:

Compiled by author

Mermaid Code Resources

Below you will find details on a five-module mini-course with 15 lessons in it that’s designed for sixth grade students as an introduction to Mermaid. Each module ends with a PBL scenario.

codingflowchartMermaidscienceSTEM

0 comment 1