# 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?