flowchart

Generate Mermaid flowchart diagrams from tickets, specs, or verbal descriptions.

11|Updated Mar 20, 2026
One-click install
npx skills add https://github.com/qa-aman/next-leap-claude-code --skill flowchart-qa-aman
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flowchart
Source: https://github.com/qa-aman/next-leap-claude-code/tree/main/.claude/skills/flowchart
Command: npx skills add https://github.com/qa-aman/next-leap-claude-code --skill flowchart-qa-aman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning written requirements, tickets, or verbal explanations into clear visual process flows is slow and error-prone when done by hand. This Skill converts any input source into properly formatted Mermaid flowchart diagrams with consistent shapes, colors, and structure. ## Core Features & Use Cases - Multi-source input: Accepts ticket keys, spec documents, file paths, or plain verbal descriptions and converts them into flowcharts. - Mermaid formatting rules: Enforces correct node shapes (stadium for start/end, rectangles for actions, diamonds for decisions), <br> line breaks, and color coding for success, error, warning, and informational states. - Scenario splitting: Produces separate diagrams for distinct scenarios plus a comprehensive main diagram when multiple paths exist. - Use Case: Paste a user story describing a login flow with error handling, and receive a color-coded Mermaid diagram with decision branches for invalid credentials, locked accounts, and successful login. ## Quick Start Ask the assistant to create a flowchart from your ticket or spec, for example: "Create a flowchart from this user authentication spec."

Frequently Asked Questions about flowchart

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Mermaid flowchart from a ticket or spec?▼

Provide the ticket key, document, file path, or a verbal description of the process. The Skill analyzes decision points, user actions, and system actions, then outputs a Mermaid flowchart with proper node shapes and color coding.

What Mermaid node shapes should I use for decisions and actions?▼

Use stadium shapes `([text])` for start and end nodes, rectangles `[text]` for actions and processes, diamonds `{text}` for decisions, and `[[text]]` for subroutines. Conditional paths should use labeled edges like `-- Yes -->`.

Why do line breaks fail in Mermaid node labels?▼

Mermaid does not render `\n` inside node labels. Always use `<br>` for line breaks instead, and avoid special characters like quotes, colons, and pipes inside labels to prevent parsing errors.

Can one flowchart cover multiple scenarios?▼

Complex flows with multiple paths should be split into a main comprehensive diagram plus separate scenario-specific diagrams. Combining everything into one massive diagram reduces readability and is treated as an anti-pattern.

What color coding should Mermaid flowcharts use?▼

Use green (`fill:#4CAF50`) for success or start states, red (`fill:#EF5350`) for errors or blocked states, orange (`fill:#FF9800`) for warnings or modified states, and blue (`fill:#2196F3`) for informational nodes.