mermaid-diagram

# Diagram Visualization with Mermaid When you need to visualize concepts, workflows, architectures, or relationships, use Mermaid diagram syntax. ## IMPORTANT: Two-Step Workflow To create mermaid diagrams, follow this two-step workflow: 1. **Step 1: Validate with `render_mermaid` tool** - Use the tool to validate your mermaid syntax 2. **Step 2: Output mermaid code block** - After successful validation, output the mermaid code block in your response This ensures: - Syntax is validated before displaying to the user - The diagram is automatically saved in the conversation history - The diagram can be referenced later in the conversation ### Step 1: Use render_mermaid Tool Call the `render_mermaid` tool with the following parameters: | Parameter | Type | Required | Description | | -------------- | ------ | -------- | --------------------------------------------------------- | | `code` | string | Yes | The mermaid diagram code (without the ```mermaid wrapper) | | `diagram_type` | string | No | Diagram type hint (flowchart, sequence, etc.) | | `title` | string | No | Optional title for the diagram | ### Example Tool Call ```json { "name": "render_mermaid", "arguments": { "code": "flowchart TD\n A[Start] --> B{Decision}\n B -->|Yes| C[Action 1]\n B -->|No| D[Action 2]\n C --> E[End]\n D --> E", "title": "Decision Flow" }...