Home Coding/Computer Science Flowcharts and Mermaid Code: A Science Teacher’s Secret Sauce

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

by Miguel Guhlin
Created by author in Canva

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.

Mermaid code

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


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.

Improved Problem-Solving SkillsCoding helps students develop better problem-solving abilities by engaging them in logical and structured thinking processes.Brannon and Novak, 2019
Enhanced Cognitive SkillsLearning to code can improve cognitive skills such as planning, response inhibition, and mathematical problem-solving.Scherer et al., 2021
Increased Engagement and MotivationProgramming courses effectively motivate and engage students, making learning more interactive and enjoyable.Aljameel, 2022
Development of Computational ThinkingCoding fosters computational thinking, which includes skills like algorithmic thinking, pattern recognition, and abstraction.Popat and Starkey, 2019
Boosted Executive FunctionsCoding activities have been shown to improve executive functions such as planning and task management in young students.Coding in Primary Grades, 2019
Higher-Order Thinking SkillsCoding enhances higher-order thinking skills, including critical thinking and creativity.Brannon and Novak, 2019
Transfer of LearningSkills learned through coding can transfer to other academic domains, enhancing overall academic performance.Scherer et al., 2021
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;

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;

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.


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:

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

Product NameEditor TypeAccount RequiredDevice
StackeditMarkdown editor with Mermaid code supportYes (Google-friendly, web-based, free)Desktop
JoplinMarkdown editor with Mermaid code supportNo (free, downloadable)Desktop or smartphone
Mermaid Live EditorMermaid code editorNo (web-based, free)Desktop
Mermaid LiveMermaid code editorNo (web-based, free but an account can be created)Desktop
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.

ModuleTitleLessonsPBL Scenario
1Dive into Mermaid Basics1. What Is Mermaid?
2. Drawing Your First Flowchart
3. Adding Styles to Your Flowchart
My Morning Routine
2Charting New Waters1. Understanding Graph Types
2. Creating Sequence Diagrams
3. Styling Sequence Diagrams
A Day in the Life
3Navigating Complex Diagrams1. Introduction to Gantt Charts
2. Creating Gantt Charts
3. Styling Gantt Charts
Planning a School Event
4Mastering Mermaid1. Advanced Flowcharts
2. Advanced Sequence Diagrams
3. Advanced Gantt Charts
Organizing a Science Fair
5Mermaid Masterpieces1. Combining Diagrams
2. Interactive Diagrams
3. Presenting Your Diagrams
Showcase Your Skills

You may also like

Leave a Comment

You've Made It This Far

Like what you're reading? Sign up to stay connected with us.



*By downloading, you are subscribing to our email list which includes our daily blog straight to your inbox and marketing emails. It can take up to 7 days for you to be added. You can change your preferences at any time. 

You have Successfully Subscribed!