mirror of
https://gitlab.com/MisterBiggs/brain-quartz.git
synced 2025-07-22 14:21:24 +00:00
.github
content
docs
advanced
features
Citations.md
Docker Support.md
Latex.md
Mermaid diagrams.md
Obsidian compatibility.md
OxHugo compatibility.md
RSS Feed.md
Roam Research compatibility.md
SPA Routing.md
backlinks.md
breadcrumbs.md
callouts.md
comments.md
darkmode.md
explorer.md
folder and tag listings.md
full-text search.md
graph view.md
i18n.md
index.md
popover previews.md
private pages.md
reader mode.md
recent notes.md
social images.md
syntax highlighting.md
table of contents.md
upcoming features.md
wikilinks.md
images
plugins
tags
authoring content.md
build.md
configuration.md
hosting.md
index.md
layout-components.md
layout.md
migrating from Quartz 3.md
philosophy.md
setting up your GitHub repository.md
showcase.md
upgrading.md
quartz
.gitattributes
.gitignore
.gitlab-ci.yml
.gitmodules
.node-version
.npmrc
.prettierignore
.prettierrc
CODE_OF_CONDUCT.md
Dockerfile
LICENSE.txt
README.md
bun.lock
globals.d.ts
index.d.ts
package-lock.json
package.json
quartz.config.ts
quartz.layout.ts
tsconfig.json
1929241a62
* docs: first few plugins documented * docs: move plugin info * docs: move plugin docs to tag based system * docs: update latex example code snippet * docs: fix spelling of latex in title * docs: add missing linebreak * docs: remove plugin tag from feature pages * docs: shorten titles * docs: refine wording * docs: move plugin details for frontmatter * docs: add features/* tags * docs: update latex example * docs: make references more explicit * docs: add stubs for the remaining plugins * docs: more descriptions * docs: fix feature tags * docs: descriptions * docs: new plugin pages * docs: update configuration page * docs: more plugin work * docs: run prettier * docs: remove comments in config file and add link to docs * docs: minor fixes * docs: run prettier * docs: spelling * docs: update docs/plugins/AliasRedirects.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs/plugins/Assets.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs/plugins/CNAME.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs/plugins/Static.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs * docs: update docs/features/Mermaid diagrams.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs/plugins/RemoveDrafts.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: update docs/plugins/Assets.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: update docs/configuration.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: update docs/configuration.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: update docs/configuration.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: some updates * docs: work in review comments --------- Signed-off-by: Eiko Wagenknecht <git@eiko-wagenknecht.de> Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
35 lines
1.2 KiB
Markdown
35 lines
1.2 KiB
Markdown
---
|
||
title: "Mermaid Diagrams"
|
||
tags:
|
||
- feature/transformer
|
||
---
|
||
|
||
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 [[ObsidianFlavoredMarkdown]] is _after_ [[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
|
||
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!
|
||
```
|