render_mermaid
Convert Mermaid diagrams into SVG format for visualization. Ensure node IDs are alphanumeric, use quotes for labels with spaces or special characters, and follow syntax rules for error-free rendering.
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) |