Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →wecode-ai/diagram-visualization-with-mermaid
Use this skill when you need to draw diagrams including: Flowchart, Sequence Diagram, Class Diagram, State Diagram, ER Diagram, User Journey, Gantt Chart, Pie Chart, Quadrant Chart, Requirement Diagram, Gitgraph, Mindmap, Timeline, Sankey, XY Chart (Bar/Line), Block Diagram, Packet Diagram, Kanban, Architecture Diagram, C4 Diagram, Radar Chart, Treemap, and ZenUML. You MUST use this skill BEFORE outputting any mermaid code block.
Passed 2 of 10 test cases with the skill, and 1 of 10 without it.
1 fixed3 passed either way19 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
A test case the skill fixed. Same model, same prompt, with and without the skill.
The rendering tool returned an error response containing final_instruction after 3 retry failures: 'Parse error on line 4: unexpected token'. The user requested an architecture diagram for our serverless infrastructure. How should you respond to the user?
| Checked | Without skill | With skill |
|---|---|---|
| Refrains from outputting any markdown mermaid code block in the response. | Missed | Passed |
| Explains to the user that the diagram could not be rendered after multiple attempts. | Missed | Passed |
| Includes actionable troubleshooting suggestions for the user. | Missed | Passed |
The instructions your model reads when the skill loads.
When you need to visualize concepts, workflows, architectures, or relationships, use Mermaid diagram syntax.
To create mermaid diagrams, follow this two-step workflow:
render_mermaid tool - Use the tool to validate your mermaid syntaxThis ensures:
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 |
{
"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"
}
}
test cases passed, vs 1 / 10 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.