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

  1. Declare scope in one sentence (what the state machine represents).
  2. Collect states from enums, reducers, status variables, steps, routing branches.
  3. Collect transitions (events), plus guards and actions/side effects.
  4. Normalize synonyms, avoid flag explosion, split into main + substate/composite when needed.
  5. Build diagram with initial/terminal states when applicable; include error/cancel/retry paths.
  6. Validate: no unreachable states, no accidental dead-ends, add [?] to inferred transitions.

Output (fixed)

Related skills
Installs
8
First Seen
Feb 3, 2026