# Mermaid
> Mermaid lets you create diagrams and visualizations using text and code.
## Reference
- [Mermaid Docs](https://mermaid-js.github.io/mermaid/#/)
- [Live Editor](https://mermaid-js.github.io/mermaid-live-editor)
## Examples
### links
````md
```mermaid
graph LR
A-->B
click B "obsidian://advanced-uri?vault=Notes&uid=3f7198aa-a351-47f8-b4d5-f7678a990c29"
```
````
```mermaid
graph LR
A-->B
click B "obsidian://advanced-uri?vault=Notes&uid=3f7198aa-a351-47f8-b4d5-f7678a990c29"
```
### class diagram
````md
```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
```
````
```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
```
### journey
````md
```mermaid
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
````
```mermaid
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
### sequence diagram
````md
```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
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!
```
### git graph
````md
```mermaid
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
```
````
```mermaid
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
```
## Links in mermaid graphs aren't working in Obsidian
> [!important] This is fixed as of 0.14.3 [[2022-03-28]]
>
> - [forum bug](https://forum.obsidian.md/t/mermaid-external-links-dont-work-on-graph/10195/9?u=pmbauer)
> - [0.14.3 release notes](https://forum.obsidian.md/t/obsidian-release-v0-14-3-insider-build/34806)
`click` links in [[mermaid]] `graph` diagrams do not work in the [[Obsidian]] app or [[Obsidian]] Publish, but `click` links in `flowchart` diagrams work in both.
### Test Fixtures
#### Flowchart
Source
```
flowchart
OpenObsidianHelpFlowchart
click OpenObsidianHelpFlowchart "obsidian://open?vault=Obsidian Help"
```
In Obsidian code block
```mermaid
flowchart
OpenObsidianHelpFlowchart
click OpenObsidianHelpFlowchart "obsidian://open?vault=Obsidian Help"
```
In [mermaid live editor](https://mermaid-js.github.io/mermaid-live-editor/edit#pako:eNp1zT0LwjAQBuC_Em4udA-Ii4pbB9dbzuRqg_ko6UWR0v9uCi24uB33PvfeDCZZBg29T28zUBaMSnUjx-4-OesoXtmPl9_QeGee_4lCSNtet22q7Pii4uWwa7VyBGggcA7kbP0-r8UIMnBgBF1Hy_16hYBxqbSMloTP1knKoHvyEzdARdLtEw1oyYV3dHL0yBQ2tXwB9VBQjg).
Renders as
```html
<a xlink:href="obsidian://open?vault=Obsidian Help" target="_blank" transform="translate(123.78515625, 27.5)">
<g class="node default clickable" id="flowchart-OpenObsidianHelpFlowchart-687">
...
<div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">
<span class="nodeLabel">OpenObsidianHelpFlowchart</span>
</div>
...
</g>
</a>
```
#### Graph
Source
```
graph
OpenObsidianHelpGraph
click OpenObsidianHelpGraph "obsidian://open?vault=Obsidian Help"
```
In Obsidian code block
```mermaid
graph
OpenObsidianHelpGraph
click OpenObsidianHelpGraph "obsidian://open?vault=Obsidian Help"
```
In [mermaid live editor](https://mermaid-js.github.io/mermaid-live-editor/edit#pako:eNptjr0OwjAMhF8l8lypeyTEAoKtA6sXNzE0In8KCRKq-u4kKtnY7LvvfF5BBc0g4ZEoLuiFmCL7aX4Zbchf2cZLN5Q16vnfFgjhp8lxDBU5vqnYfOikaCgCDOA4OTK6Nq7tKEJe2DGCrKPme0shoN8qWqKmzGdtckggcyo8AJUcbh-v-r4zJ0P1f7eL2xcTtUrQ).
Renders as
```html
<g class="node clickable" id="flowchart-OpenObsidianHelpGraph-677" transform="translate(111.88671875,30)" style="opacity: 1;">
<a class="clickable" href="obsidian://open?vault=Obsidian Help" rel="noopener">
...
<div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">OpenObsidianHelpGraph</div>
...
</a>
</g>
```
### Knowns
- link works for `flowchart` and mermaid live editor.
- link works for `graph` and mermaid live editor.
- link works for `flowchart` and [[Obsidian]] app
- link works for `flowchart` and [[Obsidian]] Publish
- link does not work for `graph` and [[Obsidian]] app
- link does not work for `graph` and [[Obsidian]] Publish
- [[Obsidian]] and the mermaid live editor both render `graph` diagrams the same.
- [[Obsidian]] `v0.14.2` uses [[mermaid]] `v8.13.2`
- latest [[mermaid]] version in live editor as of [[2022-03-24]] is `v8.14.0`
- version difference doesn't seem to matter as rendering is unchanged
- `flowchart` and `graph` nodes render differently in the DOM (see [[#Test Fixtures]])
- `flowchart`
- top level element is `<a xlink:href="TARGET"...>` containing a `<g class="node default clickable" id=...>`
- innermost element, node text, is wrapped in a `<span>`
- `graph`
- top level element is `<g class="node clickable" id=...>` containing `<a href="TARGET"...>`
- innermost element, node text, is _not_ wrapped in a `<span>`
- DOM edits to the `<a ...>` link attributes make the `graph` link clickable
- works in [[Obsidian]] app and on [[Obsidian]] publish sites
- *works on Chromium and WebKit browsers (Safari)*
- edits to parent and child nodes do not have same effect
- example edits
- inverting the `<g ...><a ...>` nodes -> `<a ...><g ...>`
- in browser console, make change to `<a ...>` element via `Edit as HTML`
- edit `<a ...>` attributes: change `class`, remove `class`, remove `rel`, etc
- link still works after reverting the edits
- ==editing has side effect of making the link work==
### Unknowns
- Why does Mermaid render graph and flowchart nodes differently?
- Why does the rendering work in the mermaid live editor but not in Obsidian?
### Theories
- Is Obsidian interfering with the click handler?