User Flow Diagram Skill

SkillDev tools

Generate user flow diagrams and flowcharts using Mermaid and other formats

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.

Add ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

Then ask your AI: use the User Flow Diagram Skill skill

What this skill tells your AI

The instructions your AI receives, as published by a5c-ai/babysitter in library/specializations/ux-ui-design/skills/user-flow-diagram/SKILL.md and read by ahel’s review.

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'
});

Signals

GitHub stars: 2k
Forks: 112
Last commit: Sep 2026

Advanced

Item type: skill
Key: user-flow-diagram
Source: github.com/a5c-ai/babysitter

github.com/a5c-ai/babysitter