Charts & Diagrams in Obsidian

Charts & Diagrams in Obsidian – #12 My Experience

Greetings and welcome to the twelfth blog post of: My Experience. For more information about this series click here. In this blog post we will look at charts and diagrams that you can easily make in Obsidian. We will look at how you can optimally use these, I do this by giving examples.

If you want to read related content about Obsidian, please go to the end of the post for an overview.

Introduction

Obsidian has a lot of features built-in, one of these is the option to add and customize all sorts of charts and diagrams. This can greatly enhance your note taking. There are no special plugins or software needed. Just the out of the box Obsidian installation. For this blog post I have selected four charts and diagrams that I think are useful:

  1. Gantt Diagram
  2. Flowchart
  3. Timeline Diagram
  4. Quadrant Chart

For each I will explain how you can best use them, also how to add and edit them in Obsidian. So you can start using them right away.

Mermaid

To achieve this Obsidian makes use of Mermaid. This is a tool based on Javascript to render charts and diagrams. The advantage is that Mermaid renders dynamically, this means that changes in the code are reflected right away in the diagram or chart.

Mermaid lets you create diagrams and visualizations using text and code.
Mermaid website: https://mermaid.js.org/intro/

1. Gantt Diagram in Obsidian

The Gantt Diagram also called the Gantt Chart is a bar chart to illustrate a project schedule. (Wikipedia, 2023) The advantage is that it can show dependencies between activities, which mean that the. The vertical axis contains the activities and the right axis the time to complete the tasks. It is a tool to display a project schedule in a comprehensive way.

When to use a Gantt Diagram

The Gantt Diagram can be used to make project schedules that require to make clear which tasks can be done concurrently and which are dependent. The activities can then be mapped on date ranges to keep track of progress.

How to create and edit a Gantt Diagram

To start always make sure to include the following elements:

  • Three grave accents (`) To mark the start and end of the code.
  • “Mermaid” to indicate it should render a diagram or chart.
  • “Gantt” to indicate it is a Gantt Diagram.
  • “Title” followed by a space to give a name to the diagram.
  • Three grave accents (`) To mark the end of the code.

These are the minimal required to start an empty diagram with an optional title.

Gantt Diagram code example 1:

```mermaid
gantt
    title Gantt Diagram Example 1
    dateFormat  YYYY-MM-DD
```

Gantt Diagram result 1:

Fill the Gantt Diagram

To actually fill the diagram we can use the following expressions:

  • “Section” to mark a group of tasks that will appear in a row.
  • Task build up:
    • Example: Task A1 : a1, 2024-01-01, 10d
    • Build up: Name : ID, Date based on format, time duration
    • The ID is essential to create dependencies, as visible in the example. If not needed this can be left out.
  • “Milestone” to mark important checkpoints in the schedule. Milestones are different than tasks as their position in the code determines their placement. Bare in mind that the connection with dependent tasks can only be made if a duration is assigned. Shown in the example below this is the case for Task C3 but not for Task C4 (Milestone B has no duration assigned.)

Gantt Diagram code example 2:

```mermaid
gantt
    title Gantt Diagram Example 2
    dateFormat  YYYY-MM-DD
    Section A
    Task A1 : a1, 2024-01-01, 10d
    Task A2 : a2, after a1, 10d
	Task A3 : a3, after a2, 10d
    Section B
	Task B1 : b1, after a2, 10d
	Task B2 : b2, after b1, 10d
	Milestone B : milestone, m1
	Section C
	Task C1 : c1, 2024-02-01, 20d
	Task C2 : after c1, 10d
	Milestone C : milestone, m2, 2024-03-01, 1d
	Task C3 : after m2, 1d
	Task C4: after m1, 1d
```

Gantt Diagram result 2:

For more specific code examples: https://mermaid.js.org/syntax/gantt.html

  • Such as: Different time format, axis ticks, styling

2. Flowchart in Obsidian

A flowchart can be used to visualize a simple process or workflow. This can be useful to communicate solutions, document a process or map cause and effect. Of course there are many other purposes, in this paragraph we will look at the basic flowchart. The main symbols of a flow chart are:
– A process step, usually called an activity, is denoted by a rectangular box.
– A decision is denoted by a diamond.
(Wikipedia, 2023)

How to create and edit a Flowchart

To start always make sure to include the following elements:

  • Three grave accents (`) To mark the start and end of the code.
  • “Mermaid” to indicate it should render a diagram or chart.
  • “Flowchart” to indicate it is a Flowchart. Followed by the orientation of the chart.
    • TB – Top to bottom
    • TD – Top-down/ same as top to bottom
    • BT – Bottom to top
    • RL – Right to left
    • LR – Left to right
  • The first step, starting with the ID followed by the text for the process step in brackets ([])
  • Three grave accents (`) To mark the end of the code.

These are the minimal required to start an empty diagram with an optional title.

Flowchart code example 1:

```mermaid
flowchart TD
A[Process Step]


```

Flowchart code result 1:

Fill the Flowchart

To actually fill the flowchart we can use the following expressions:

  • We can use the earlier mentioned ID’s to connect process steps with decisions. As shown in example 2 under “Let me think”.
  • Decisions are enclosed by accolades ({})
  • Process steps by brackets ([])
  • Connections using dashes and arrows (–>)

Flowchart code example 2:

```mermaid
flowchart TD
	A[Setup article] --> Writing -->
	B[Add references] --> C[Proof read]
	C --> D{Let me think}
	C -- Feedback--> A
	D -->|Option 1| E[Publish in Paper]
	D -->|Option 2| F[Publish on our Website]
	D -->|Option 3| G[Publish on Third Party Website]
```

Flowchart code result 2:

For more specific code examples: https://mermaid.js.org/syntax/flowchart.html

  • Such as: Node shapes, link types, sub graphs (at the time of writing not supported for Obsidian)

3. Timeline Diagram in Obsidian

The timeline diagram can be used as supporting illustration for placing past events in perspective. Shown in a chronological order the timeline diagram provides a broad overview.

How to create and edit a Timeline Diagram

To start always make sure to include the following elements:

  • Three grave accents (`) To mark the start and end of the code.
  • “Mermaid” to indicate it should render a diagram or chart.
  • “Timeline” to indicate it is a Timeline Diagram.
  • Three grave accents (`) To mark the end of the code.

These are the minimal required to start an empty diagram with an optional title.

Timeline Diagram code example 1:

```mermaid
timeline
    title Timeline Example 1
```

Timeline Diagram result example 1:

Fill the Timeline Diagram

To actually fill the Timeline Diagram we can use the following expressions:

  • “Section” To mark category on the top with color.
  • Every row represents a time period within a section.
  • To create an event under a time period, add a new row using only colons (:) at the start of the line.

Timeline Diagram code example 2:

```mermaid
timeline
    title Timeline Example 2
section Beginning
    2020 : Start of Company
    2021 : First Customer
         : Launched 100th product
section Onward
    2022 : Celebrated 50 customers
    2023 : Acquired Company
		: Won award for best product
section Now
	2024 : NPS Survey
		 : New Marketing program
		 : AI integration in exisiting products
 section Future
	2025 : Automate onboarding process
		: Create customer roadmap	
```

Timeline Diagram code result 2:

For more specific code examples: https://mermaid.js.org/syntax/timeline.html

  • Such as: color scheme, themes, integration with your website

4. Quadrant Chart

The Quadrant Chart can be used to plot data points in four quadrants. In which you can decide which text you want to use for the X and Y axis. It can help to explain the relative position of data points.

How to create and edit a Quadrant Chart

To start always make sure to include the following elements:

  • Three grave accents (`) To mark the start and end of the code.
  • “Mermaid” to indicate it should render a diagram or chart.
  • “quadrantChart” to indicate it is a Timeline Diagram.
  • x-axis Left –> Right
  • y-axis Bottom –> Top
  • Three grave accents (`) To mark the end of the code.

Code example:

```mermaid

quadrantChart
    title Can be anything
    x-axis Left --> Right
    y-axis Bottom --> Top

```

Result:

Fill the Quadrant Chart

To actually fill the Quadrant Chart we can use the following expressions:

  • For text in each quadrant: “quadrant-1” the number indicates the position, optionally between 1-4.
  • For every datapoint: “Name:” followed by the X and Y position between brackets “[0.3, 0.6]”
    • For the points x and y value minimal value is 0 and maximal value is 1.

Code example:

```mermaid

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.50]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
```

Result:

Charts & Diagrams in Obsidian – Conclusion

In this blog post I have described four charts and diagrams that you can make using mermaid within Obsidian. Hopefully this is useful to you. Please let me know your applications and ideas, since there are countless ways to enhance your notes with these charts and diagrams.

Related content

In the past I have written about Obsidian, since it is the application that I use daily. In this chapter a short overview of related Know Act Invest content that might be of interest.

Obsidian Canvas – Three examples

In this blog post I will give three examples of how I use the Obsidian Canvas in my daily work. These three will span a range of purposes, such as:

  1. Organizing Projects using Obsidian Canvas, including status tracking and relating information
  2. Applying the Principle; Connectivity of Thoughts
  3. Solve problems, combining Obsidian Canvas with the Fishbone diagram and Five times why

Zettelkasten in Obsidian

When I first found out about Obsidian I wrote a blog post about it: Zettelkasten in Obsidian – #5 My Experience In the post I outline how I applied the Zettelkasten principles in Obsidian.

Zettelkasten the ultimate guide

For a total overview of zettelkasten content, please refer to: “Zettelkasten – the ultimate guide” . I made this guide for those who are new to zettelkasten and look for a proper introduction. It also contains links to posts about my experience with applications for zettelkasten, including: Obsidian, Evernote, OneNote and Notion.

The guide also describes how I have configured Obsidian for my way of working.

Zettelkasten the ultimate guide
Click on the picture to open the guide.

References

Wikipedia, Gantt Chart, accessed 7 January 2023, https://en.wikipedia.org/wiki/Gantt_chart#cite_note-FOOTNOTEProject_Management_Institute2021Glossary_%C2%A73_Definitions-1

Wikipedia, Flowchart, accessed 7 January 2023, https://en.wikipedia.org/wiki/Flowchart

Leave a Comment

Your email address will not be published. Required fields are marked *