User flow diagram

Skill a5c-ai/babysitter/library/specializations/ux-ui-design/skills/user-flow-diagram

Babysitter enforces obedience on agentic workforces and enables them to manage extremely complex tasks and workflows through deterministic, hallucination-free self-orchestration

Install

npx -y skills add a5c-ai/babysitter --skill user-flow-diagram

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Generate user flow diagrams and flowcharts using Mermaid and other formats

SKILL.md

3.5 KB, as published. Nobody here has run it

User Flow Diagram Skill

Purpose

Generate user flow diagrams, flowcharts, and navigation maps to visualize user journeys and application flows.

Capabilities

Create Mermaid.js flow diagrams
Generate flowcharts from user journeys
Export to SVG, PNG, and other formats
Validate flow completeness
Identify dead ends and loops
Generate sitemap visualizations

Target Processes

wireframing.js
user-journey-mapping.js
information-architecture.js

Integration Points

Mermaid.js for diagram generation
diagrams.net API for export
PlantUML for alternative syntax

Input Schema

{
  "type": "object",
  "properties": {
    "flowData": {
      "type": "object",
      "description": "User flow data structure",
      "properties": {
        "nodes": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "id": { "type": "string" },
              "label": { "type": "string" },
              "type": { "type": "string" }
            }
          }
        },
        "edges": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "from": { "type": "string" },
              "to": { "type": "string" },
              "label": { "type": "string" }
            }
          }
        }
      }
    },
    "diagramType": {
      "type": "string",
      "enum": ["flowchart", "sequence", "state", "journey"],
      "default": "flowchart"
    },
    "direction": {
      "type": "string",
      "enum": ["TB", "BT", "LR", "RL"],
      "default": "TB"
    },
    "outputFormat": {
      "type": "string",
      "enum": ["mermaid", "svg", "png", "pdf"],
      "default": "mermaid"
    },
    "validate": {
      "type": "boolean",
      "default": true
    }
  },
  "required": ["flowData"]
}

Output Schema

{
  "type": "object",
  "properties": {
    "diagramCode": {
      "type": "string",
      "description": "Mermaid or PlantUML code"
    },
    "outputPath": {
      "type": "string",
      "description": "Path to exported diagram"
    },
    "validation": {
      "type": "object",
      "properties": {
        "isComplete": { "type": "boolean" },
        "deadEnds": { "type": "array" },
        "loops": { "type": "array" },
        "unreachable": { "type": "array" }
      }
    },
    "statistics": {
      "type": "object",
      "properties": {
        "nodeCount": { "type": "number" },
        "edgeCount": { "type": "number" },
        "maxDepth": { "type": "number" }
      }
    }
  }
}

Usage Example

const result = await skill.execute({
  flowData: {
    nodes: [
      { id: 'start', label: 'Home', type: 'page' },
      { id: 'login', label: 'Login', type: 'page' },
      { id: 'dashboard', label: 'Dashboard', type: 'page' }
    ],
    edges: [
      { from: 'start', to: 'login', label: 'Sign In' },
      { from: 'login', to: 'dashboard', label: 'Success' }
    ]
  },
  diagramType: 'flowchart',
  outputFormat: 'svg'
});