How to Build a Flowchart in Obsidian Using Mermaid (2023)

As an avid Obsidian user, I'm always curious as to how to get the most out of this app.

I love watching YouTubers live stream their work on Obsidian, and I'm constantly scouring the Obsidian forums for helpful tips and tricks.

If you're unfamiliar with Obsidian, it's a popular Markdown file-based knowledge management tool.

I started using it after reading the How to Take Smart Notes book and learning about the concept of note boxes and sticky notes.

However, after accumulating quite a few notes in my Knowledge Management System (KMS), I continued browsing YouTube for videos of Obsidian in use. Then I came across a super complete video ofBryan Jenks on his Obsidian workflow.

What struck me the most was the use of a flowchart to illustrate Bryan's workflow for processing content from multiple different sources.

As someone wanting to define this process for themselves, this was more than enough motivation to attempt to create our own version of this flowchart (although it meant putting off other work entirely for much of the afternoon).

With that in mind, in this article I want to show you how to create a flowchart in Obsidian using Mermaid.js.

We'll look at the benefits of these diagrams, the basics of Mermaid, and the step-by-step process of creating a knowledge management flowchart.

How to Build a Flowchart in Obsidian Using Mermaid (1)

The Benefits of Using Charts in Your Knowledge Management System (KMS)

If you're here reading this article, you might already know why you want to create charts in Obsidian.

That being said, there are many benefits of using charts in your KMS that I think are worth mentioning.

Let's take a closer look at them:

#1 Gives your thoughts an organized visual structure

When we think of something even slightly complex in our mind, it's hard to understand how all the pieces fit together.

Likewise in the bookThe bullet journal method, explains author Ryder Carroll:

If every thought were a word, that means our brains generate enough content every day to produce a book.

By learning how to create a useful diagram, for example with Mermaid, you can quickly get the most important thoughts and ideas out of your head and into a structured picture that you can look at when needed.

As well as creating an image for your thoughts, this also has the effect of removing those thoughts from your mind so you can focus on other things.

If you've heard of it beforeZeigarnik effectthen you know what I mean here. This concept is mentioned a lot from Getting Things Done to The Productivity Project, so this idea of ​​getting thoughts out of your head has many benefits.

Once you've created something tangible from your thoughts, you can easily share it with others to see what they think.

(Video) Comprehensive Overview | Using Mermaid Flowcharts In Obsidian 🧜🏻‍♀️️

Take a screenshot of your chart and share it on Twitter or theObsidian-ForenDiscuss your process with others.

This is a great way to get feedback from like-minded people and maybe shed some light on things I hadn't thought of before.

When I learned something from the book.Showcase your work by Austin Kleonis that there will always be someone interested in what you have to share.

Also, there is a lot of talk about personal knowledge management and KMS right now, so something like a Mermaid flowchart would be extremely helpful for someone new to this field.

#3 You can reinforce your understanding of a topic

Understanding things is the key to being able to remember them.

I learned this concept from the book.How to Take Smart Notes by Sönke Ahrensand I've tried to apply it to every new topic or concept I learn.

When you are struggling to understand or learn something new, sometimes you can improve your understanding by creating a picture like a chart.

This allows your brain to create the nodes and connections in a logical and meaningful way.

Once you create the diagram, you can see the elements of a theme and how those elements are connected in ways you may not have seen before.

The basics of Mermaid.js

Now that I've spent some time talking about the benefits of charting in your KMS, let's take a closer look at the tool used to create charts in Obsidian.

What is Mermaid.js?

Sirene.jsis a Javascript-based programming syntax used to create and generate diagrams, including flowcharts, pie charts, user journey maps, and more.

It offers a fairly simple and straightforward syntax for creating charts and graphs that even people with little programming knowledge can easily understand.

By using this language, you can create useful diagrams in Obsidian, for example to outline your processes and workflows.

What types of charts can you create in Mermaid.js?

At the time of writing this article, here is the list of chart types you can create in Mermaid:

  • Flussdiagramme
  • sequence diagrams
  • Class diagram
  • state diagrams
  • Entity-Relationship-Diagramme
  • User-Journey-Maps
  • Gantt-Diagram
  • Pie charts

You can check them anytimeMermaid Document Pageto keep up to date on what each of these charts is and how they work.

For this exercise, I worked only with the Flowchart diagram type.

What are the advantages of Mermaid.js?

Mermaid has many advantages that make it a great tool to add to your toolkit.

  • It can be used in places other than Obsidian; This means that you can learn this tool once and apply it to other areas of your work or personal life.
  • Charts are easy to update and maintain - Because they're built into Obsidian, you can easily update charts as your process changes. What's more, if you have yoursObsidian Vault synced to GitHubthen you don't have to worry about losing it.
  • It is relatively easy to learn without programming experience; As we mentioned earlier, the simple syntax makes it an easy tool to learn.

Plan out your chart on paper

The most important advice I can give you before you start creating your flowchart in Mermaid is to draw it on a piece of paper first.

This will help you get things straight on paper so you can focus on building it in Mermaid in one go.

Once you've been charting long enough to know what you're doing, this process might become less important, but I think it's important when you start Mermaid.

(Video) Create Custom Diagrams In Obsidian App | Mermaid & Markdown

If you have some notes or ideas for your own KMS workflow, take some time now to sketch it out before moving on to the next section where we walk through the creation process.

I'll wait :)

Create your flowchart in Obsidian

Now it's time to get to the good stuff and create a flowchart in Obsidian.

Set up a new siren chart

Ideally, you'll create a new note for your diagram to keep things organized, but where you start is up to you.

To create a new siren diagram, enter the following text:

```mermaidgraph TD```

The top and bottom lines tell Obsidian that this is a mermaid chart.

The line that says "graph TD" is siren syntax indicating that this is a top-down (TD) diagram, i.e. a flowchart.

You could also say "RL graphic" to change the graphic's orientation from right to left instead of top to bottom, but in this case we'll stick with top to bottom.

Create your top row of knots

You can then start creating the top row of nodes in your diagram. This can be done by adding this code after "graph TD":

ID1(incoming media)ID1.1(Feedly)ID1.2(Youtube)ID1.3(pocket to shape)ID1.4(Google Beat Books)ID1.5(General research)

Here you can see I've defined the Incoming Media node, as well as the nodes that define my feed sources (Feedly, YouTube, Pocket Casts, Google Play Books, General Research).

The term id1 is basically a variable for the node.

This means that if you want to refer to this node elsewhere in the diagram to make connections, you just need to refer to id1.

This process might seem quite complicated, but as someone with a background in programming, this path seemed the most logical to me.

At this stage, you can now put Obsidian in preview mode to see what you've created.

You can of course have two panels open, one for editing and one for preview, but I prefer to switch between them to avoid distractions.

Create the next row of knots

With your first set of knots, you can simply repeat this for the next set. In my case, these are the nodes that define the type of media I'm consuming:

(Video) Mermaid JS: Finally There's A Great UML & Diagram Drawing Tool

ID2.1(network Article)ID2.2(Books)ID2.3(Videos)ID2.4(Courses)ID2.5(Podcasts)

Here you can see that I increased the numbering from id1.1 to id2.1 to keep the order of the nodes clear.

Again, you can preview your work to make sure everything goes according to plan.

Don't worry, it'll all be a mess of disconnected nodes at this point, but as long as all your nodes are showing, you're fine.

Use the comments to find your way

As you add more nodes and connections, your code space becomes a mess of gibberish.

To overcome this, like any good programmer would, use comments to segment your content:

%% Cima nodeID1(incoming media)%% media FuentesID1.1(Feedly)ID1.2(Youtube)ID1.3(pocket to shape)ID1.4(Google Beat Books)ID1.5(General research)%% The type Von mediaID2.1(network Article)ID2.2(Books)ID2.3(Videos)ID2.4(Courses)ID2.5(Podcasts)

As you can see, to write a comment, we use "%%".

These comments don't appear in the preview window, but they help you navigate the code if you come back to it later.

connect the knots

Now comes the fun part, making connections between the first two rows of knots. In this case, the top node "Incoming Media" and the media sources i.e. Feedly, YouTube etc.

This is where your paper chart will come in handy to refer to.

ID1 --> ID1.1 & ID1.2 & ID1.3 & ID1.4 & ID1.5

This line of code will be connected

  • the node ID1 (which is "Incoming Media")
  • to id1.1 (which is "Feedly")
  • and id1.2 (this is "YouTube")
  • and so.

You can see in the code above that the symbol “–>” denotes a connection between nodes.

You will also see that you can connect a node to many nodes by using "&" after each node.

By switching between preview mode and edit mode after each change to your code, you can gradually see how each section of code affects the finished diagram.

You can now join the next two sets of lines. In this case the media sources with the media types.

(Video) Notion Charts: How to Use the New Feature (Mermaid tutorial)

Check your paper diagram again to make sure you're making the correct connections:

ID1.1 --> ID2.1ID1.2 --> ID2.3ID1.3 --> ID2.5ID1.4 --> ID2.2ID1.5 --> ID2.4

Create more nodes and connect them

Continue adding and connecting nodes until you're done drawing your flowchart.

Go back to the code you wrote earlier to make sure you're using the same conventions.

Add text between links

If you want to add more detail to your diagram, you can add text between the connections like I did here:

ID2.1 -- A file --> ID2.1.1ID2.1.1 -- In progress --> ID2.1.2ID2.1.2 -- A His checked --> ID2.1.3ID2.1.3 -- A His accused --> ID2.1.4ID2.1.4 --> ID2.1.5

Just use "- TEXT HERE –>" to add text to the connection between two nodes.

Preview often to make sure things look the way you expect

As I mentioned before, you should preview the chart often to make sure things are going as expected.

This was the best way for me to learn Mermaid.

When I saw what I wrote changing the output, I was able to understand how it all worked.

Design your chart

There are many more things you can do with your charts that I didn't even mention in my chart.

In my case, the theme I used does the job of presenting everything simply and clearly, so I didn't even start looking for the style of each node or connection.

I also found that nodes and links were all I needed to create my diagram, so I didn't delve too deeply into the other types of components, such as: B. differently shaped nodes or differently designed connections.

If you want to explore the full range of custom styling for your chart, see theMermaid Document Page.

At the end of this process you should have a clear and complete diagram showing your knowledge management workflow, i.e. your process of processing information.

As I mentioned at the beginning of this article, the best way to get feedback on your work is to share it with others.

With that in mind, take a look at theObsidian-ForenThis is an excellent resource full of very helpful people.

If you feel inspired by this article, please share your diagram on Twitter using the hashtag #KMWDiagram (be sure to tag me @mishacreatrix so I can see your diagram).

(Video) Obsidian - Mapping Relationships Using Mermaid

I'd love to learn more about how other people are using this process as I'm constantly tweaking my own workflow.


Thank you for reading this article to the end. I hope you have found some value in the information I have shared.

If yes, please consider sharing this article on social media. It would help me a lot and help others find it.


Does obsidian support mermaid? ›

Obsidian supports Mermaid. js natively, via mermaid codeblocks.

Can you make diagrams in Obsidian? › diagram plugin for

This plugin introduces diagrams to Obsidian that can be included within notes or as stand-alone files. Diagrams are created as SVG files (although . drawio extensions are also supported).

How do you create a flow chart? ›

How to plan and draw a basic flowchart
  1. Define your purpose and scope. ...
  2. Identify the tasks in chronological order. ...
  3. Organize them by type and corresponding shape, such as process, decision, data, inputs or outputs.
  4. Draw your chart, either sketching by hand or using a program such as Lucidchart.

How do you connect things in Obsidian? ›

To create a backlink in Obsidian, you use the Wikilink format using double brackets. For example, to link to another note called "another note" you would use [[another note]] . This links your current note to "another note" and also provides a backlink from "another note" to your current note.

What are the types of mermaid diagram? ›

The types of diagrams one can form with Mermaid include a flowchart, sequence diagram, class diagram, state diagram, entity-relationship diagram, user journey, gantt, pie chart, requirement diagram, and some other examples like pie charts.

How do you insert a graph into Obsidian? ›

Using The Local Graph in Obsidian. You can access the Local Graph in Obsidian by clicking More Options for a note (the three dots in the upper-right) and selecting Open Local Graph. This opens a new pane displaying the Local Graph for the note.

Can you do math in Obsidian? ›

Obsidian Math+ is a plugin for taking math notes quickly and efficiently.

Can you write code in Obsidian? ›

Obsidian Execute Code Plugin. This plugin allows you to execute code snippets in code blocks in your notes. The plugin adds a 'run' button for code blocks in supported languages. Clicking them results in the code of the block being executed.

Where can I make a simple flow chart? ›

Canva's free online flowchart maker is full of designer-made templates, so all that's left for you to do is add your information. Add and edit your flowchart steps in just a few clicks – simply click the holder text to add your own. Create a flowchart – fast – by selecting from our range of templates.

What are the 7 steps in developing a flowchart? ›

Steps to creating a process map
  • Step 1: Identify the problem: What is the process that needs to be visualized? ...
  • Step 2: Brainstorm all the activities that will be involved: ...
  • Step 3: Figure out boundaries: ...
  • Step 4: Determine and sequence the steps: ...
  • Step 5: Draw basic flowchart symbols: ...
  • Step 6: Finalize the process flowchart.

Where can I create a flow chart? ›

SmartDraw's flowchart software is the easiest way to make any type of flowchart or diagram representing a process. You start by picking one of the flow chart templates included and add steps in just a few clicks.

Does Obsidian support PlantUML? ›

PlantUML Support for Obsidian

This plugin uses either the PlantUML Online Server, or a local . jar file for rendering. You can also host your own server (Docker / JEE / PicoWeb) and specify its address in the settings. Please note that using the local rendering method is not as performant as using a server.

Does Obsidian support LaTeX? ›

Obsidian supports CommonMark and GitHub Flavored Markdown (GFM), along with other useful notetaking features such as tags, LaTeX mathematical expressions, mermaid diagrams, footnotes, internal links and embedding Obsidian notes or external files.

How do you use Obsidian charts? ›

  1. Go to Community Plugins in your Obsidian Settings and disable Safe Mode.
  2. Click on Browse and search for "Obsidian Charts"
  3. Click install.
  4. Toggle the Plugin on in the Community Plugins Tab.


1. Obsidian - Flow charts/Mind maps with Excalidraw
(Josh Plunkett)
2. mermaid flow chart working with google colab and obsidian
(Dennis G D)
3. Obsidian Basics: Diagrams
(Productivity Guru)
4. I Learn How To Build Flowcharts and Signal Diagram's in Mermaid.JS
(World of Zero)
5. Create text-based diagrams with Mermaid
(Chris Chinchilla)
6. Create Diagrams and Charts in Web Pages using Mermaid | Interesting JS Library Series | Episode 10
(Code Radiance)
Top Articles
Latest Posts
Article information

Author: Roderick King

Last Updated: 07/06/2023

Views: 6366

Rating: 4 / 5 (51 voted)

Reviews: 82% of readers found this page helpful

Author information

Name: Roderick King

Birthday: 1997-10-09

Address: 3782 Madge Knoll, East Dudley, MA 63913

Phone: +2521695290067

Job: Customer Sales Coordinator

Hobby: Gunsmithing, Embroidery, Parkour, Kitesurfing, Rock climbing, Sand art, Beekeeping

Introduction: My name is Roderick King, I am a cute, splendid, excited, perfect, gentle, funny, vivacious person who loves writing and wants to share my knowledge and understanding with you.