user-flow-diagram

Solid

Generate user flow diagrams and flowcharts using Mermaid and other formats

AI & Automation 1,160 stars 71 forks Updated today MIT

Install

Quality Score: 96/100

Stars 20%

100

Recency 20%

100

Frontmatter 20%

70

Documentation 15%

100

Issue Health 10%

50

License 10%

100

Description 5%

100

Skill Content

# 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": "flo...

Details

Author: a5c-ai
Repository: a5c-ai/babysitter
Created: 4 months ago
Last Updated: today
Language: JavaScript
License: MIT

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Solid

diagram-generation

Multi-format diagram generation from text descriptions. Create Mermaid, PlantUML, D2, and Graphviz diagrams including flowcharts, sequence diagrams, architecture diagrams (C4), and data models.

1,160 Updated today

AI & Automation Listed

mermaid-diagram

Generate beautiful Mermaid diagrams — flowcharts, sequence, ER, class, state, pie, gantt, mindmap, timeline, gitgraph, C4, kanban, block, quadrant, sankey, XY charts. Renders to PNG locally and Markdown for GitHub. Use when the user asks for diagrams, visualizations, schemas, flowcharts, architecture overviews, database schemas, API flows, project timelines, git branching strategies, org charts, or any visual representation of systems, workflows, or data.

24 Updated 2 days ago

georgekhananaev

AI & Automation Listed

mermaid-diagrams

Create diagrams and visualizations using Mermaid syntax. Use when generating flowcharts, sequence diagrams, class diagrams, entity-relationship diagrams, Gantt charts, or any visual documentation. Triggers on Mermaid, flowchart, sequence diagram, class diagram, ER diagram, Gantt chart, diagram, visualization.

2 Updated today

AI & Automation Solid

mermaid-diagram

Use this skill when you need to draw diagrams including: Flowchart, Sequence Diagram, Class Diagram, State Diagram, ER Diagram, User Journey, Gantt Chart, Pie Chart, Quadrant Chart, Requirement Diagram, Gitgraph, Mindmap, Timeline, Sankey, XY Chart (Bar/Line), Block Diagram, Packet Diagram, Kanban, Architecture Diagram, C4 Diagram, Radar Chart, Treemap, and ZenUML. You MUST use this skill BEFORE outputting any mermaid code block.

572 Updated today

AI & Automation Solid

mermaid-diagrams

Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts, gantt charts, or any other diagram type. Triggers include requests to "diagram", "visualize", "model", "map out", "show the flow", or when explaining system architecture, database design, code structure, or user/application flows.

27,705 Updated today