mermaid-designer

What problem does it solve?

This Skill removes the friction of producing accurate, accessible Mermaid diagrams by translating textual descriptions and documentation requirements into well-structured Mermaid syntax while avoiding common parser errors and rendering issues.

Core Features & Use Cases

• Diagram selection & guidance: Recommends the optimal Mermaid diagram type (flowchart, sequenceDiagram, erDiagram, classDiagram, gantt, etc.) based on the user's intent.
• Valid syntax generation: Produces Mermaid source that follows node ID rules, reserved-word avoidance, label length guidance, and diagram-specific gotchas.
• Accessibility & compatibility: Inserts accTitle/accDescr where supported, includes required text descriptions for screen readers, and advises on GitHub rendering limitations.
• Validation & quality checks: Enforces complexity thresholds, layout recommendations, naming conventions, and a final checklist to ensure the diagram will render and remain readable.
• Use Case Example: Create architecture context diagrams, ER schemas for data models, sequence diagrams for API interactions, or Gantt timelines for roadmaps with accompanying descriptive text.

Quick Start

Create a left-to-right flowchart of the user signup to payment process, include accTitle and accDescr after the diagram keyword, and add a short descriptive paragraph explaining each step.