visual-workflow-diagram-generator

# Visual Workflow Diagram Generator

## Purpose

Transform written workflow steps into interactive, visual process flow diagrams rendered in a web browser. Generate a single, self-contained HTML file that displays a standards-compliant flowchart with clickable elements that reveal detailed information about each step.

## When to Use This Skill

Invoke this skill when users provide workflow steps, business processes, or procedural descriptions that would benefit from visual representation. Common scenarios include:

- Converting written Standard Operating Procedures (SOPs) into visual diagrams
- Documenting business processes for training or compliance
- Creating interactive process maps from meeting notes or requirements documents
- Visualizing decision trees and approval workflows
- Transforming step-by-step instructions into flowcharts

## Workflow Analysis Process

### Identify Workflow Elements

Parse the provided workflow steps to categorize each element into one of the following types:

**Processes (Actions/Tasks)**
- Active steps that perform work or operations
- Represent with rectangles in the diagram
- Examples: "Review Application", "Send Email", "Update Database"

**Decisions (Branching Points)**
- Points where the workflow branches based on conditions
- Represent with diamond shapes in the diagram
- Always have multiple outcomes (yes/no or multiple paths)
- Examples: "Budget > $10K?", "Approved?", "Error Occurred?"

**Data (Inputs/Outputs/Documents)**
- Information, documents, or data used or generated by the process
- Represent with parallelograms in the diagram
- Examples: "Application Form", "Report Output", "Customer Data"

**Start/End Points**
- Beginning and termination points of the workflow
- Represent with rounded rectangles or ovals
- Label as "Start" and "End" or with specific trigger/outcome names

**Connectors (Flow Direction)**
- Arrows showing the sequence and direction of flow
- Label decision branches with conditions (e.g., "Yes", "No"