ux-flow-diagram

Convert UX flows and screen transitions into ASCII diagrams.

3|Updated Dec 22, 2025
One-click install
npx skills add https://github.com/CANTAGESTUDIO/CosmicAtlasPacker --skill ux-flow-diagram
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-flow-diagram
Source: https://github.com/CANTAGESTUDIO/CosmicAtlasPacker/tree/main/.claude/skills/ux-flow-diagram
Command: npx skills add https://github.com/CANTAGESTUDIO/CosmicAtlasPacker --skill ux-flow-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visualizes user flows and screen transitions as ASCII diagrams to document navigation and conditional branches.

Core Features & Use Cases

  • Flow Patterns: Linear flow, branching flow with condition labels.
  • Output: ASCII diagrams illustrating navigation and API/event sequences.

Quick Start

Describe a user journey and generate an ASCII flow diagram.

Frequently Asked Questions about ux-flow-diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create ASCII diagrams for user flows and screen transitions?▼

ASCII diagrams visualize user flows by mapping screen transitions and decision points as connected nodes. This Skill converts your flow description into ASCII-formatted diagrams that document navigation paths, conditional branches, and user journeys in plain-text format readable in any editor.

What are the best ways to document UX navigation flows?▼

Documenting navigation flows requires representing linear sequences, branching decisions, and screen transitions clearly. ASCII diagrams enforce left-to-right and top-to-bottom flow, label conditions explicitly, and accommodate both simple linear patterns and complex branching to make navigation logic transparent and maintainable.

Can I use ASCII diagrams to show conditional branching in user journeys?▼

Yes, ASCII diagrams support conditional branching with explicit condition labels on decision nodes. This allows you to represent exception handling, alternative user paths, and decision logic within a single flow diagram, making complex navigation scenarios visible and documented.

How do I handle exception flows and decision points in flow documentation?▼

ASCII diagrams include primitives for nodes and connectors that represent decision points with labeled conditions. You can document what happens when a user takes different paths, including error states and exception handling, all within a single readable diagram.

What's the difference between ASCII flow diagrams and other UX documentation formats?▼

ASCII diagrams are plain-text, version-control friendly, and render consistently across platforms without external tools. Unlike visual diagramming software, ASCII output integrates directly into documentation, repositories, and code without dependencies, making flows portable and maintainable.