用途
User Flow Diagram 技能用于生成用户流程图、流程图和导航地图，以可视化用户旅程和应用流程。它面向 wireframing.js、user-journey-mapping.js、information-architecture.js 等目标流程。
主要能力
- 创建 Mermaid.js 流程图
- 根据用户旅程生成流程图
- 导出为 SVG、PNG 及其他格式
- 校验流程完整性
- 识别死胡同和循环
- 生成站点地图可视化
集成点
- Mermaid.js 用于图表生成
- diagrams.net API 用于导出
- PlantUML 用于替代语法
使用方式
调用时需提供 flowData（必填），其中包含 nodes（每个节点有 id、label、type）和 edges（每条边有 from、to、label）。可选参数包括：diagramType（枚举 flowchart、sequence、state、journey，默认 flowchart）、direction（枚举 TB、BT、LR、RL，默认 TB）、outputFormat（枚举 mermaid、svg、png、pdf，默认 mermaid）、validate（布尔值，默认 true）。
输出包含 diagramCode（Mermaid 或 PlantUML 代码）、outputPath（导出图表的路径）、validation（isComplete、deadEnds、loops、unreachable）以及 statistics（nodeCount、edgeCount、maxDepth）。
示例：
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'
});
适用场景
适用于需要将用户旅程、应用流程或信息架构转化为可视化图表的场景，例如线框图设计、用户旅程映射和信息架构梳理。
限制
资料未提供关于收费、价格、平台支持范围或具体效果保证的信息。