[Mermaid](https://mermaid-js.github.io/mermaid) is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

[[Obsidian MOC|Obsidian]] supports Mermaid rendering out of the box using fenced code blocks marked `mermaid`. So convenient and useful, both for personal (eg. weekly routine flow) and technical notes.

**Update Feb 2022:** GitHub Markdown [now supports Mermaid](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) out of the box!!! W00t!


## Examples

From the docs: https://mermaid-js.github.io/mermaid/#/flowchart

```mermaid
graph TD;
Start --> Stop;
```

```mermaid
graph LR;
Start --> Stop;
```

```mermaid
graph TD;
  A --> B;
  A --> C;
  B --> D[This is the text in the box];
  C --> D;
```

```mermaid
graph TD
    A[Start] --> B{Is it?};
    B -->|Yes| C[OK];
    C --> D[Rethink];
    D --> B;
    B ---->|No| E[End];
```

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

```mermaid
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d
```

```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```

## Syntax notes

### Links variations

- Text on links
	- https://mermaid-js.github.io/mermaid/#/flowchart?id=text-on-links
- Text on links with arrow
	- https://mermaid-js.github.io/mermaid/#/flowchart?id=a-link-with-arrow-head-and-text

These render the same chart.

```
flowchart LR
  A-- This is the text! ---B
```

```
flowchart LR
  A---|This is the text|B
```

So do these.

```
flowchart LR
  A-->|text|B
```

```
flowchart LR
  A-- text -->B
```

### Spaces

Spaces don't seem to matter. 

```
flowchart LR
  A-- This is the text! ---B
```

```
flowchart LR
  A--This is the text!---B
```

The codes above render identical results, so do other commands.

Hello Mermaid 🧜‍♀️

A practice I've been doing virtually all my life, but I have only been deliberate about it the last 2 years or so.

**Apps**

My first ever note-taking app was (pirated) Microsoft OneNote, which came with my then-laptop. It was followed by Evernote, Bear, and now Obsidian, which I'm happy with.

[[Obsidian MOC]]

Note-taking

The [Obsidian Calendar plugin](https://github.com/liamcain/obsidian-calendar-plugin) has a _daily_ and _weekly templates_ feature. While Obsidian itself has a Templates core plugin, Calendar's templates have a more powerful dates functionality.

In the **weekly template**, we can use eg. `{{monday:YYYY-MM-DD}}` to render the date of current week's Monday in the note, eg. `2021-10-04`. 

If we have daily notes with that structure, we can create a link to this week's Monday's note: `[[{{monday:YYYY-MM-DD}}]]`.

Similarly, we can use it with the transclusion/embed syntax, eg. if we want to view the whole week's daily notes from the week note: `![[{{monday:YYYY-MM-DD}}]]`

Weekly template example:

```md
Week {{date:W}}, {{date:YYYY}}

Quarter:
[[{{date:YYYY-[Q]Q}}]]

Days:
[[{{monday:YYYY-MM-DD}}]], [[{{tuesday:YYYY-MM-DD}}]], [[{{wednesday:YYYY-MM-DD}}]], [[{{thursday:YYYY-MM-DD}}]], [[{{friday:YYYY-MM-DD}}]], [[{{saturday:YYYY-MM-DD}}]], [[{{sunday:YYYY-MM-DD}}]]
```

It renders the following:

```md
# Week 40, 2021

Quarter: 
[[2021-Q4]]

Days: 
[[2021-10-04]], [[2021-10-05]] (etc)
```

Neat!

> [!note]
> This only works for notes generated through the Calendar plugin (either by clicking the week number in the sidebar UI or the *"Open Weekly"* command), not via the Templates plugin’s *"Insert template"* command.

---

In: [[Obsidian MOC]]

Render week dates with the Obsidian Calendar plugin template

Dataview comes in two syntactic flavours, **Dataview Query Language** (DQL) and **DataviewJS**. Both can be used in code blocks and as inline expressions; both have same functionalities. I prefer the latter since I'm familiar with writing JS.

More info in the docs: https://blacksmithgu.github.io/obsidian-dataview/#querying


## Write DV code in code block

By default, we run the DataviewJS code in a code block marked `dataviewjs`.

```
dv.taskList(dv.pages('#daily').file.tasks.where(t => !t.completed));
```

## Load DV code from JS file

Alternatively, we can create a JS file in our vault...

```js
// _assets_/dv/unfinished-tasks.js
dv.taskList(dv.pages('#daily').file.tasks.where(t => !t.completed));
```

...and call it from the `dataviewjs` code block in our note.

```
dv.view("_assets_/dv/unfinished-tasks");
```

The path is relative to our vault root directory without a leading slash.

### Customizing with `input` argument

`dv.view` accepts an optional 2nd argument that is passed as `input`.

```js
// _assets_/dv/unfinished-tasks.js
dv.taskList(dv.pages(input ?? undefined).file.tasks.where(t => !t.completed));
```

Show all notes with unfinished tasks.

```
dv.view("_assets_/dv/unfinished-tasks");
```

Show notes tagged `#daily` with unfinished tasks.

```
dv.view("_assets_/dv/unfinished-tasks", "#daily");
```

Show notes from the `Work` folder with unfinished tasks.

```
dv.view("_assets_/dv/unfinished-tasks", "'Work'");
```

This is regular JS, so the `input` argument can be any accepted JS type.


## Advantages

- Reusable across notes
- Separation of concern between note content and utility/helper code; keep note content succint (in case of long DV code)
- Better editing experience (syntax highlighting, Intellisense/autocomplete in your favourite code editor, formatting, etc)
- Easier to back up and share the DV code

To me, this was the clincher that converted me to a happy Dataview user.

---

In: [[Obsidian MOC]]

Load separate JS files to use in DataviewJS

One of the coolest features in Obsidian is its built-in graph view, which uses some sort of D3 force-directed graph to display the notes and tags' relations. It is fascinating to view dots representing our notes branching out to each other and growing as we add more notes.

We may want to exclude specific folders from the graph, eg. because they cause clutter or are simply irrelevant.

To exlclude folders/directories:

- Click the settings icon on the top left
- Open *"Filters"* and input `-path:ExcludedFolderName` (replace `ExcludedFolderName` with your folder name)
- For multiple folders: `-path:FolderOne -path:FolderTwo -path:FolderThree`

---

In: [[Obsidian MOC]]

How to exclude path(s) from graph in Obsidian

[[Obsidian MOC|Obsidian]] comes with built-in footnote [^1] support! We can also do this ^[Inline footnote format #2] or this ^[Another inline footnote format with auto-numbering].

```md
Obsidian comes with built-in footnote [^1] support! We can also do 
this ^[Inline footnote format #2] or this ^[Another inline footnote 
format with auto-numbering].

[^1]: A footnote is "a note printed at the bottom of a page ..."
```

---

In: [[Obsidian MOC]]


[^1]: A footnote is "a note printed at the bottom of a page that gives extra information about something that has been written on that page." [Cambridge Dictionary](https://dictionary.cambridge.org/dictionary/english/footnote)

Plugins