render_mermaid
Convert Mermaid diagram syntax into SVG format using specific formatting rules for node IDs, labels, and arrow styles. Ideal for visualizing diagrams in light and dark modes with predefined color schemes.
Instructions
Render a Mermaid diagram to SVG format. CRITICAL RULES: 1) Node IDs must be alphanumeric without spaces (use A1, nodeA, start_node). 2) For node labels with special characters, wrap in quotes: A["Label with spaces"] or A["Process (step 1)"]. 3) For quotes in labels use ", for < use <, for > use >. 4) For square brackets in labels use A["Array[0]"]. 5) Always close all brackets and quotes. 6) Use consistent arrow styles (either --> or ->). Example: graph TD\n A["Complex Label"] --> B{Decision?}\n B -->|Yes| C["Result "OK""]\n\nIMPORTANT: If the diagram fails validation, the error message will explain what needs to be fixed. Please read the error carefully and retry with a corrected diagram.
Input Schema
Name | Required | Description | Default |
---|---|---|---|
background | No | Background color | white |
diagram | Yes | Mermaid diagram syntax. MUST start with diagram type (graph TD, flowchart LR, sequenceDiagram, etc). Node IDs cannot have spaces. Use quotes for labels with spaces/special chars. Avoid forward slashes. Use this colors which work well for both light and dark mode: classDef coral fill:#ff6b6b,stroke:#c92a2a,color:#fff classDef ocean fill:#4c6ef5,stroke:#364fc7,color:#fff classDef forest fill:#51cf66,stroke:#2f9e44,color:#fff classDef sunshine fill:#ffd43b,stroke:#fab005,color:#000 classDef grape fill:#845ef7,stroke:#5f3dc4,color:#fff classDef amber fill:#ff922b,stroke:#e8590c,color:#fff classDef teal fill:#20c997,stroke:#12b886,color:#fff classDef pink fill:#ff8cc8,stroke:#e64980,color:#fff classDef tangerine fill:#fd7e14,stroke:#e8590c,color:#fff classDef sky fill:#74c0fc,stroke:#339af0,color:#000 classDef lavender fill:#d0bfff,stroke:#9775fa,color:#000 classDef mint fill:#8ce99a,stroke:#51cf66,color:#000 classDef rose fill:#ffa8a8,stroke:#ff6b6b,color:#000 classDef lemon fill:#ffe066,stroke:#ffd43b,color:#000 classDef violet fill:#a78bfa,stroke:#8b5cf6,color:#fff classDef peach fill:#ffc9c9,stroke:#ffa8a8,color:#000 | |
title | Yes | Title for the diagram (max 50 characters) |