diff --git a/_toc.yml b/_toc.yml
index 0bba4f7..cb6d636 100644
--- a/_toc.yml
+++ b/_toc.yml
@@ -41,6 +41,7 @@ parts:
     - file: faq/syllabus
     - file: faq/github
     - file: faq/tools
+    - file: faq/mermaid_tutorial
   - caption: Resources
     chapters:
     - file: resources/glossary
diff --git a/resources/mermaid_tutorial.md b/resources/mermaid_tutorial.md
new file mode 100644
index 0000000..8fe7240
--- /dev/null
+++ b/resources/mermaid_tutorial.md
@@ -0,0 +1,48 @@
+# Mermaid Overview
+
+## What is Mermaid?
+
+[Mermaid](https://mermaid.js.org/intro/) is a flowchart and diagram visualization tool based on JavaScript and uses Markdown syntax to create flowcharts that are extremely dynamic and high quality. [Mermaid](https://mermaid.js.org/intro/) is especially useful because you are able to display your beautiful flowcharts using backticks to create a code block. 
+
+There are plenty of types of diagrams with mermaid and you can explore the other types [here](https://mermaid.js.org/config/Tutorials.html).
+
+## Tutorial for Using Mermaid
+
+Either on [Mermaid](https://mermaid.live/edit#pako:eNp1j00OgjAQha8ymZUmcAEWJgp6Ad1RFyMdlEBbrK0_Ae5ugQ0LndXL-768ZDosjGRMsGzMq7iRdXDKhIZw2_xx92QZLuZ9hjje9JeGdN3DblV4-2Q5gvXs7kYOacdvUm3DYEogkBUpoydtmLV0OZPlUzj_QPv_6LBAGKFiq6iS4YFubAS6GysWmIQoydYChR6CR96Z40cXmDjrOULfSnKcVXS1pOZy-AJAwFci)  or within the **GitHub** markdown file that you're making edits to you can make complex flowcharts seamlessly. 
+
+### Using Code Blocks
+
+A code block should look like the following:
+````{toggle}
+```{toggle}
+This is a code block
+```
+````
+
+#### Example Mermaid Code Block
+
+```{mermaid}
+flowchart TD
+    A[blank] -->|blank| B(blank)
+    B --> C{blank}
+    C -->|blank| D[blank]
+    C -->|blank| E[blank]
+    C -->|blank| F[blank]
+```
+
+In Mermaid there are different styles for boxes with either square or round edges and the option to give a description of each item in its pipe.
+
+So the code above actually looks like this in it's code block:
+
+````{toggle}
+```{mermaid}
+flowchart TD
+    A[blank] -->|blank| B(blank)
+    B --> C{blank}
+    C -->|blank| D[blank]
+    C -->|blank| E[blank]
+    C -->|blank| F[blank]
+```
+````
+
+There's lots of cool and unique things that can be created using Mermaid and the best way to understand it better is to continue to practice.