mermaid_skill

Overview

This skill generates Mermaid diagrams from Markdown code fences to create flowcharts, sequence diagrams, state machines, class diagrams, Gantt charts, mindmaps, and more. It converts plain diagram syntax into clean, publishable visuals for technical documentation and architecture notes. Use it for process flows, API interactions, and system design diagrams—not for data-driven charts or KPI visuals.

How this skill works

Provide a fenced code block tagged with mermaid and write diagram code using Mermaid syntax (use flowchart instead of graph for richer features). The visualizer parses nodes, subgraphs, arrows, and layout directives (TD, LR, etc.), applies rendering rules for special characters and naming, and outputs a ready-to-render diagram. It enforces critical syntax rules to avoid common parsing errors like list conflicts, subgraph naming issues, and unmatched delimiters.

When to use it

• Document API call sequences or message flows between services
• Map system architecture, components, and dependencies
• Show business or engineering process flows and decision paths
• Design state machines and lifecycle diagrams
• Create Gantt timelines or simple project roadmaps

Best practices

• Prefer flowchart TD/LR for subgraph direction and better layout control
• Use subgraph IDs (agent) and quoted display names (agent["AI Agent Core"]) to avoid reference errors
• Wrap node text with quotes or use alternative punctuation to handle spaces and special characters
• Avoid Markdown list syntax inside diagrams; use [1.Item] or circled numbers instead of [1. Item]
• Split very dense diagrams into multiple focused diagrams to improve readability
• Use invisible edges or change layout direction to reduce crossing connections

Example use cases

• API sequence diagram showing request, auth, and response flows
• System architecture diagram with service subgraphs and inter-service arrows
• Process flow for onboarding, approvals, and exception handling
• State machine for component lifecycle or user session states
• Gantt chart for sprint planning and timeline visualization