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.