sukr/docs/content/features/mermaid.md at 7b3373295ba210c738ed1d5a59eec7023d7b97e6

Files

Timothy DeHerrera 46c00c7729 docs: migrate content files to TOML frontmatter

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.

2026-02-14 06:57:55 -07:00

1.8 KiB

Raw Blame History

+++ 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:

```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

During Markdown parsing, mermaid code blocks are intercepted
The Mermaid definition is parsed and rendered to SVG
The SVG is inlined directly in the HTML output
No JavaScript or external resources needed

Example

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:

.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.

1.8 KiB Raw Blame History