用户流程图生成器Skill user-flow-diagram

---

name: user-flow-diagram description: 使用Mermaid和其他格式生成用户流程图和流程图 allowed-tools:

• Read
• Write
• Edit
• Bash
• Glob
• Grep

---

用户流程图技能

目的

生成用户流程图、流程图和导航地图，以可视化用户旅程和应用程序流程。

能力

• 创建Mermaid.js流程图
• 根据用户旅程生成流程图
• 导出为SVG、PNG和其他格式
• 验证流程完整性
• 识别死胡同和循环
• 生成站点地图可视化

目标流程

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

集成点

• Mermaid.js用于图表生成
• diagrams.net API用于导出
• PlantUML用于替代语法

输入模式

{
  "type": "object",
  "properties": {
    "flowData": {
      "type": "object",
      "description": "用户流程数据结构",
      "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"]
}

输出模式

{
  "type": "object",
  "properties": {
    "diagramCode": {
      "type": "string",
      "description": "Mermaid或PlantUML代码"
    },
    "outputPath": {
      "type": "string",
      "description": "导出图表的路径"
    },
    "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" }
      }
    }
  }
}

使用示例

const result = await skill.execute({
  flowData: {
    nodes: [
      { id: 'start', label: '首页', type: 'page' },
      { id: 'login', label: '登录', type: 'page' },
      { id: 'dashboard', label: '仪表板', type: 'page' }
    ],
    edges: [
      { from: 'start', to: 'login', label: '登录' },
      { from: 'login', to: 'dashboard', label: '成功' }
    ]
  },
  diagramType: 'flowchart',
  outputFormat: 'svg'
});