46c00c7729
Migrate all 17 docs/content/ files from --- YAML to +++ TOML frontmatter delimiters and key = value syntax. Update 8 embedded frontmatter examples in 7 documentation pages to match (configuration, content-organization, getting-started, security, sections, sitemap, feeds, templates). Update configuration.md frontmatter reference table: add draft and aliases fields, correct date type from string to date.
69 lines
1.8 KiB
Markdown
69 lines
1.8 KiB
Markdown
+++
|
|
title = "Mermaid Diagrams"
|
|
description = "Build-time diagram rendering with Mermaid"
|
|
weight = 4
|
|
+++
|
|
|
|
sukr renders Mermaid diagrams at build time, producing inline SVG. No client-side JavaScript required.
|
|
|
|
## Usage
|
|
|
|
Use fenced code blocks with `mermaid` language:
|
|
|
|
````markdown
|
|
```mermaid
|
|
graph LR
|
|
A[Input] --> B[Process]
|
|
B --> C[Output]
|
|
```
|
|
````
|
|
|
|
## Supported Diagram Types
|
|
|
|
| Type | Status | Description |
|
|
| --------- | --------------- | ----------------------------------------- |
|
|
| Flowchart | ✅ Full support | Flow diagrams with nodes and edges |
|
|
| Graph | ✅ Full support | Directed/undirected graphs |
|
|
| Sequence | ⚠️ Partial | Sequence diagrams (some layouts may vary) |
|
|
| State | ⚠️ Partial | State machine diagrams |
|
|
| Class | ⚠️ Partial | UML class diagrams |
|
|
|
|
> **Note:** Some complex diagram types may have layout differences compared to the JavaScript renderer. Flowcharts and basic graphs work reliably.
|
|
|
|
## How It Works
|
|
|
|
1. During Markdown parsing, `mermaid` code blocks are intercepted
|
|
2. The Mermaid definition is parsed and rendered to SVG
|
|
3. The SVG is inlined directly in the HTML output
|
|
4. No JavaScript or external resources needed
|
|
|
|
## Example
|
|
|
|
```mermaid
|
|
graph TD
|
|
A[Markdown] --> B{sukr}
|
|
B --> C[HTML]
|
|
B --> D[SVG Diagrams]
|
|
B --> E[Highlighted Code]
|
|
```
|
|
|
|
## Styling
|
|
|
|
Mermaid SVGs inherit your CSS variables. Customize the look by targeting SVG elements:
|
|
|
|
```css
|
|
.mermaid svg {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.mermaid .node rect {
|
|
fill: var(--bg-sidebar);
|
|
stroke: var(--accent);
|
|
}
|
|
```
|
|
|
|
## Fallback
|
|
|
|
If a diagram fails to render (complex diagrams, syntax errors), the original code block is preserved with an error comment.
|