mermaid_preview
Preview Mermaid diagrams in your browser with live reload. Enter diagram code to generate visualizations that automatically update when modified, supporting multiple themes and output formats.
Instructions
Render a Mermaid diagram and open it in browser with live reload. Takes Mermaid diagram code as input and generates a live preview. Supports themes (default, forest, dark, neutral), custom backgrounds, dimensions, and quality scaling. The diagram will auto-refresh when updated. Use mermaid_save to save to disk. IMPORTANT: Automatically use this tool whenever you create a Mermaid diagram for the user. NOTE: Sequence diagrams do not support style directives - avoid using 'style' statements in sequenceDiagram.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| background | No | Background color for pngs/svgs. Example: transparent, red, '#F0F0F0' (default: white) | white |
| diagram | Yes | The Mermaid diagram code to render | |
| format | No | Output format (default: svg) | svg |
| height | No | Diagram height in pixels (default: 600) | |
| preview_id | Yes | ID for this preview session. Use different IDs for multiple diagrams (e.g., 'architecture', 'flow', 'sequence'). | |
| scale | No | Scale factor for higher quality output (default: 2) | |
| theme | No | Theme of the chart (default: default) | default |
| width | No | Diagram width in pixels (default: 800) |
Input Schema (JSON Schema)
{
"properties": {
"background": {
"default": "white",
"description": "Background color for pngs/svgs. Example: transparent, red, '#F0F0F0' (default: white)",
"type": "string"
},
"diagram": {
"description": "The Mermaid diagram code to render",
"type": "string"
},
"format": {
"default": "svg",
"description": "Output format (default: svg)",
"enum": [
"png",
"svg",
"pdf"
],
"type": "string"
},
"height": {
"default": 600,
"description": "Diagram height in pixels (default: 600)",
"type": "number"
},
"preview_id": {
"description": "ID for this preview session. Use different IDs for multiple diagrams (e.g., 'architecture', 'flow', 'sequence').",
"type": "string"
},
"scale": {
"default": 2,
"description": "Scale factor for higher quality output (default: 2)",
"type": "number"
},
"theme": {
"default": "default",
"description": "Theme of the chart (default: default)",
"enum": [
"default",
"forest",
"dark",
"neutral"
],
"type": "string"
},
"width": {
"default": 800,
"description": "Diagram width in pixels (default: 800)",
"type": "number"
}
},
"required": [
"diagram",
"preview_id"
],
"type": "object"
}