From 0c199975f2d469ecdfd7efcf2ddd16ffa1dc492b Mon Sep 17 00:00:00 2001 From: Jacky Zhao <j.zhao2k19@gmail.com> Date: Thu, 17 Aug 2023 07:55:28 +0000 Subject: [PATCH] various path fixes for links to extensions, fix relative paths in links --- content/features/Mermaid diagrams.md | 20 +++++++++++++++++++- 1 files changed, 19 insertions(+), 1 deletions(-) diff --git a/content/features/Mermaid diagrams.md b/content/features/Mermaid diagrams.md index 2d43406..f14a558 100644 --- a/content/features/Mermaid diagrams.md +++ b/content/features/Mermaid diagrams.md @@ -1,5 +1,23 @@ +Quartz supports Mermaid which allows you to add diagrams and charts to your notes. Mermaid supports a range of diagrams, such as [flow charts](https://mermaid.js.org/syntax/flowchart.html), [sequence diagrams](https://mermaid.js.org/syntax/sequenceDiagram.html), and [timelines](https://mermaid.js.org/syntax/timeline.html). This is enabled as a part of [[Obsidian compatibility]] and can be configured and enabled/disabled from that plugin. + +By default, Quartz will render Mermaid diagrams to match the site theme. + > [!warning] -> Wondering why Mermaid diagrams may not be showing up even if you have them enabled? You may need to reorder your plugins so that `Plugin.ObsidianFlavoredMarkdown()` is *after* `Plugin.SyntaxHighlighting()`. +> Wondering why Mermaid diagrams may not be showing up even if you have them enabled? You may need to reorder your plugins so that `Plugin.ObsidianFlavoredMarkdown()` is _after_ `Plugin.SyntaxHighlighting()`. + +## Syntax + +To add a Mermaid diagram, create a mermaid code block. + +```` +```mermaid +sequenceDiagram + Alice->>+John: Hello John, how are you? + Alice->>+John: John, can you hear me? + John-->>-Alice: Hi Alice, I can hear you! + John-->>-Alice: I feel great! +``` +```` ```mermaid sequenceDiagram -- Gitblit v1.10.0