nuartz renders Mermaid diagrams directly from code blocks. Create flowcharts, sequence diagrams, class diagrams, and more using simple text syntax.
Flowchart
graph TD
A[Write Markdown] --> B{Has wikilinks?}
B -->|Yes| C[Resolve links]
B -->|No| D[Parse as standard MD]
C --> E[Render HTML]
D --> E
E --> F[Publish]Sequence Diagram
sequenceDiagram
participant U as User
participant N as nuartz
participant MD as Markdown Parser
participant R as React
U->>N: Add .md file to content/
N->>MD: Parse frontmatter + body
MD->>MD: Resolve wikilinks
MD->>R: Generate React components
R->>U: Rendered pageClass Diagram
classDiagram
class Config {
+string contentDir
+SiteConfig site
+Features features
+NavConfig nav
}
class SiteConfig {
+string title
+string description
+string baseUrl
}
class Features {
+bool wikilinks
+bool callouts
+bool tags
+bool backlinks
+bool toc
+bool search
}
Config --> SiteConfig
Config --> FeaturesSyntax
Use a fenced code block with the mermaid language:
```mermaid
graph LR
A --> B --> C
```Mermaid Live Editor
Use the Mermaid Live Editor to prototype your diagrams before adding them to your notes.
Theme Matching
Mermaid diagrams automatically adapt to nuartz's light/dark theme.
Related
- Syntax Highlighting — code block rendering
- Authoring Content — full content writing guide
- Configuration — enable/disable features