Mermaid Diagrams for Obsidian Note-Taking

A Guide to Using Mermaid Syntax to Add Diagrams to Your Markdown Documents

If you’re anything like me, you love organizing your notes by creating lists, internal links, and footnotes. For this purpose, I love using Markdown and Obsidian. Perhaps you’re already familiar with Obsidian or another Markdown-based note-taking tool. One standout feature of Obsidian that I haven’t touched on yet is the ability to create diagrams, timelines, flowcharts, and more using Mermaid. As a researcher and data scientist, clear and concise note-taking, along with planning research designs and machine learning models, are crucial aspects of my work. Working with Obsidian and Mermaid has made it incredibly easy to plan my research in a structured and tidy manner. So let’s delve into it.

What is Mermaid and Why Use It?

Mermaid is a powerful tool for creating diagrams and visualizations using simple text and code. It is a JavaScript-based diagramming and charting tool with the ability to render Markdown-inspired text definitions into dynamic diagrams and charts.

Mermaid simplifies the process of creating complex diagrams by allowing users to describe them using a simple and intuitive syntax. This makes it ideal for generating various types of diagrams, including flowcharts, sequence diagrams, and Gantt charts, directly within Obsidian.

Mermaid diagrams offer a significant boost to the visual appeal of your content, making the planning of sequences, statistical or machine learning models much more intuitive and visually engaging.

Of course, Mermaid’s versatility extends beyond these applications. It can be effectively employed for any type of sequence diagram, allowing you to vividly depict relationships between elements. Additionally, Mermaid is ideal for creating DAC (Directed Acyclic Graph) diagrams and many other types of visual representations, providing a comprehensive toolkit for organizing and presenting complex information.

Examples of Mermaid Flowchart in Obsidian

Let’s explore some practical examples of how Mermaid can be utilized within Obsidian to enhance your note-taking and visualization capabilities:

Use Mermaid to create flowcharts illustrating the steps in a process or workflow. Whether it’s outlining the steps of a research methodology or visualizing the stages of a project, flowcharts provide a clear and structured representation of sequential tasks.

```mermaid
flowchart TB
    start_sequence((Start)) --> gather_ingredients{Gather Ingredients}
    gather_ingredients --> bread[Do I have Bread?]
    bread -->|No| get_bread{Get Bread}
    bread -->|Yes| do_i_peanut_butter[Do I have Peanut Butter?]
    get_bread -->   do_i_peanut_butter
    do_i_peanut_butter -->|No| get_peanut_butter{Get Peanut Butter}
    do_i_peanut_butter -->|Yes| assemble{Assemble Sandwich}
    get_peanut_butter --> assemble{Assemble Sandwich}
    assemble --> end_sequence((END))
```

Simple Guide to Mermaid Syntax

Let’s start with the simple syntax. First things first, you will need a `mermaid` code block and within it, an initial command with the type of diagram you would like, such as a simple flowchart with some of the basic shapes available:

```mermaid

flowchart 
 box_id[Text in a box] 
 squircle_id(Text in a squircle)
 circle_id((Circle))
 database_id[(Database)]
 diamond_id{Diamond}

```

You can see that different types of brackets or bracket combinations create different shapes.

Now let’s add arrows between them:

```mermaid

flowchart LR
 box_id[Text in a box] → squircle_id(Text in a squircle)

```

Also, notice how you can change the orientation of your diagram with two letters after the flowchart command, with either LR for left to right or TB for top to bottom.

```mermaid

flowchart TB
 box_id[Text in a box] --> squircle_id(Text in a squircle)

```

You can change the tie from a nondirectional tie --- to a unidirectional tie --> or a reciprocal tie <-->

```mermaid

flowchart LR
 A --- B
 C --> D
 F <--> E

```

If you have two nodes tied to another node, you can simplify the code with an `&`. See in the two code blocks below how two different syntaxes result in the same visualization.

```mermaid

flowchart LR
 A --> C
 B --> C
```

```mermaid

flowchart LR
 A & B --> C

```

To Sum Up

Mermaid stands as a valuable asset for Obsidian users, enabling the rapid and intuitive creation of flowcharts and various diagrams. Its seamless integration makes it an indispensable tool for visual clarity and organization in note-taking and knowledge management workflows.

There are, of course, many more variations and applications, but this is a simple introduction to get people interested in using Mermaid for their Obsidian note-taking. For much more detailed documentation and a full overview of what is possible with Mermaid, please refer to the official Mermaid website (https://mermaid.js.org/).

Before you leave

• 📰 Subscribe for more posts like this: Clemens Jarnach ⚡️
• 👉👈 Please follow me: Medium | Twitter | LinkedIn