Layout and sizing

The package ships with a conservative built-in minimum height. That default keeps generic consumers light, but docs sites usually need more breathing room

Precedence

Height resolution follows this order

1. Inline fence option
2. CSS variable override
3. Plugin config fallback
4. Built-in default

Recommended approach

The practical pattern is stable and simple

md.use(markdownItMermaidEnhanced, {
  minHeight: '160px',
})

.VPDoc {
  --mermaid-it-min-height: 220px;
}

The plugin fallback travels with the package config. The CSS variable stays local to the site or page

Per-page override

pageClass is enough when one page needs a different rhythm

---
pageClass: mermaid-roomy
---

.mermaid-roomy {
  --mermaid-it-min-height: 280px;
}

A compact class also works well for galleries with many small diagrams

Per-diagram inline override

One-off diagrams still have the last word

```mermaid min-height="320px"
flowchart LR
  A --> B
```

Example

flowchart LR
  Input["Small source diagram"] --> Layout["Docs layout"]
  Layout --> Height["inline > CSS var > plugin > default"]
  Height --> Result["more readable preview area"]

Loading diagram…

Why the layered model holds up

• The package keeps a safe default for existing consumers
• Docs sites get a stronger default where wide diagrams are common
• Site, page, and wrapper scope can each override the value without forking styles.css