VYASA
PostsVyasa ManualMermaid DiagramsFrontmatter Controls

Mermaid Diagrams

Frontmatter controlsURL copied

You can add a frontmatter block at the top of a Mermaid diagram:

```mermaid
width: 85vw
height: 60vh
min-height: 400px
graph LR
    ...
```

Supported keys:

  • width (default: 65vw)
  • height (default: auto)
  • min-height (default: 400px)
  • aspect_ratio (Gantt charts)
2✦
3✦ > Basic usage
4✦ > Frontmatter controls
5✦ > Interactions
6✦ > Interactions > Scripted Interaction & Resilience
7✦ > Interactions > Scripted Interaction & Resilience > Mermaid Zoom & Pan
8✦ > Interactions > Scripted Interaction & Resilience > Theme-Aware Re-rendering
9✦ > Interactions > Scripted Interaction & Resilience > HTMX Integration
10✦ > Interactions > Scripted Interaction & Resilience > Mobile Menu Handling
11✦ > Interactions > Scripted Interaction & Resilience > Additional Features
12✦ > flowchart TD
13✦ > classDiagram
14✦ > sequenceDiagram
15✦ > erDiagram
16✦ > stateDiagram-v2
17✦ > mindmap
18✦ > sankey beta
19✦ > radar-beta
20✦ > treemap-beta
21✦ > timeline
22✦ > C4Context
23✦ > gantt
24✦ > architecture-beta