Beautiful Mermaid
Render mermaid diagrams in VS Code Markdown preview using beautiful-mermaid with the ELK layout engine.
Features
- Server-side rendering — diagrams render instantly with no flash
- 5 diagram types — flowchart, state, sequence, class, ER
- 15 built-in themes — automatic light/dark mode detection
- ELK layout engine — clean, well-organized diagram layouts
- Error handling — clear error messages with original source display
Usage
Write mermaid code blocks in your Markdown files:
```mermaid
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]
```
Open Markdown preview (Cmd+Shift+V / Ctrl+Shift+V) to see the rendered diagram.
Supported Diagram Types
flowchart LR
A[flowchart] --> B[state]
B --> C[sequence]
C --> D[class]
D --> E[ER]
Setup
This extension replaces VS Code's built-in mermaid renderer. To use it, disable the built-in extension:
Cmd+Shift+P / Ctrl+Shift+P- Run Extensions: Show Built-in Extensions
- Search for
markdown-mermaid
- Click Disable
Configuration
| Setting |
Default |
Description |
beautifulMermaid.lightTheme |
zinc-light |
Theme for light color scheme |
beautifulMermaid.darkTheme |
tokyo-night |
Theme for dark color scheme |
Available Themes
Light: zinc-light, tokyo-night-light, catppuccin-latte, nord-light, github-light, solarized-light
Dark: zinc-dark, tokyo-night, tokyo-night-storm, catppuccin-mocha, nord, dracula, github-dark, solarized-dark, one-dark
License
MIT
