mermaid-state-diagram
Installation
SKILL.md
Mermaid State Diagram Generator
When to use
Use when the user wants a state machine/state transition diagram derived from code or specs, and the output must be Mermaid stateDiagram-v2 plus an extraction summary.
Inputs
- Code: UI state (useState/useReducer), state managers (Redux/Zustand/Recoil/Jotai), API handlers, jobs, enums + switch, workflow tables.
- Specs: PRDs, tickets, user flows, error handling, conversation logs.
- If scope is unclear, ask for the target feature or flow.
Workflow
- Declare scope in one sentence (what the state machine represents).
- Collect states from enums, reducers, status variables, steps, routing branches.
- Collect transitions (events), plus guards and actions/side effects.
- Normalize synonyms, avoid flag explosion, split into main + substate/composite when needed.
- Build diagram with initial/terminal states when applicable; include error/cancel/retry paths.
- Validate: no unreachable states, no accidental dead-ends, add
[?]to inferred transitions.
Output (fixed)
Related skills