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.

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.

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.

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:

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.

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).

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

Conclusion

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.