69cd81621f
Self-documenting docs site built with sukr itself (dogfooding): Core changes: - Rename package from nrd-sh to sukr - Move personal site to sites/nrd.sh/ - Update AGENTS.md and README.md Documentation site (docs/): - Add site.toml with sukr.io base URL - Create docs-specific templates with sidebar navigation - Add dark theme CSS with syntax highlighting colors - Document all features: templates, sections, syntax highlighting, mermaid diagrams, and LaTeX math rendering Bug fixes: - Render individual pages for all sections (not just blog type) - Add #[source] error chaining for Tera template errors - Print full error chain in main() for better debugging
71 lines
1.8 KiB
Markdown
71 lines
1.8 KiB
Markdown
---
|
|
title: Mermaid Diagrams
|
|
description: Build-time diagram rendering with Mermaid
|
|
weight: 4
|
|
---
|
|
|
|
# Mermaid Diagrams
|
|
|
|
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.
|