Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions _toc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ parts:
- file: faq/syllabus
- file: faq/github
- file: faq/tools
- file: faq/mermaid_tutorial
- caption: Resources
chapters:
- file: resources/glossary
Expand Down
48 changes: 48 additions & 0 deletions resources/mermaid_tutorial.md
Original file line number Diff line number Diff line change
@@ -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.