---
name: a5c-ai-user-flow-diagram
description: "Generate user flow diagrams and flowcharts using Mermaid and other formats"
license: "MIT"
metadata:
  decimalai-skill-id: "4f8df1fc-eed3-403c-8460-221f756a5645"
  decimalai-version-id: "66f3de20-e096-4fdb-9c57-f1b4eccf1af6"
  decimalai-version: "1"
  decimalai-body-sha256: "5b54f5c84a23196dd7fc6d36a33e52abd252fdcb8d519a4725c6542b8bdba424"
  decimalai-name: "a5c-ai/user-flow-diagram"
  decimalai-format: "1"
  decimalai-invocation: "model"
  decimalai-category: "design-media"
  decimalai-source: "https://app.decimal.ai/s/a5c-ai-user-flow-diagram@1/SKILL.md"
---
# 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

```json
{
  "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

```json
{
  "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

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