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", "> $10K")

Extract Detailed Information

For each identified element, extract two levels of information:

1. •High-level label (2-5 words) - Concise summary for the diagram box
2. •Detailed steps - Full explanation, criteria, or instructions for the flyout panel

Diagram Standards

Standard Flowchart Shapes

Apply the following shape conventions consistently:

Connector Line Standards

Ensure all connector lines and arrows are fully visible and clean:

• •Visibility: All connector lines and arrows must be completely visible
• •No Overlaps: Connector lines must not overlap with boxes or shapes
• •No Clipping: Arrows must not be cut off or hidden behind elements
• •Clean Routing: Route lines to avoid crossing text or obscuring content
• •Clear Direction: Arrowheads must be clearly visible at all times
• •Proper Spacing: Maintain adequate spacing between connectors and boxes
• •Branch Merging: When decision branches merge back to the main flow, ensure proper spacing to prevent arrows from overlapping boxes
• •Error-Free: No visual glitches, overlaps, or rendering errors on connectors

Label Guidelines

Create labels that are concise yet descriptive:

• •Length: 2-5 words ideally, maximum 8 words
• •Style: Active voice for processes (e.g., "Review Application")
• •Style: Question form for decisions (e.g., "Budget > $10K?")
• •Clarity: Summarize purpose without implementation details
• •Sizing: Ensure text never overflows box boundaries
• •Wrapping: Use text wrapping if needed, but prefer shorter labels
• •Alignment: All text must be center-aligned within its containing shape
• •Padding: Ensure equal padding around all sides of text relative to box borders
  • •Text should be vertically and horizontally centered
  • •Maintain consistent spacing between text and shape boundaries
  • •Apply appropriate padding to prevent text from appearing cramped

Label Transformation Examples

Color and Accessibility Standards

Apply colors that maintain excellent readability:

Recommended Color Palette:

• •Processes: Light blue (#E3F2FD) with dark text (#1976D2 or #000000)
• •Decisions: Light yellow (#FFF9C4) with dark text (#F57F17 or #000000)
• •Data: Light green (#E8F5E9) with dark text (#388E3C or #000000)
• •Start/End: Light gray (#F5F5F5) with dark text (#424242 or #000000)

Accessibility Requirements:

• •Maintain WCAG AA contrast ratio (4.5:1 minimum for normal text)
• •Use dark text (#000000 or dark variants) on light fill colors
• •Use light text (#FFFFFF) only on sufficiently dark backgrounds
• •Test contrast if using custom color schemes
• •Ensure color is not the only differentiator (shape also conveys meaning)

Interactivity Requirements

Clickable Elements

Make every workflow element (box/shape) clickable and interactive:

1. •Click handler: Attach event listener to each SVG/HTML element
2. •Visual feedback: Add hover state (subtle border or shadow)
3. •Cursor change: Use cursor: pointer on clickable elements
4. •Active state: Indicate which element is currently selected (optional)

Flyout Panel Behavior

When a user clicks any workflow element, display a flyout panel with:

Content:

• •Header: High-level step name (same as box label)
• •Body: Full detailed steps, decision criteria, or instructions
• •For decisions: List all possible outcomes with their conditions
• •For processes: Include any relevant substeps or notes
• •Close button: Clear visual affordance to dismiss panel

Interaction:

• •Animation: Slide in from right side (300ms transition recommended)
• •Position: Fixed or absolute positioning overlaying the diagram
• •Backdrop: Optional semi-transparent overlay (#000000 with 20-40% opacity)
• •Dismissal methods:
  • •Click close button (X icon)
  • •Click backdrop outside panel
  • •Press Escape key
• •Responsive: Adjust panel width on smaller screens (100% width on mobile)

Styling:

• •Sufficient padding (16-24px) for readability
• •Clear visual hierarchy (larger header, readable body text)
• •Contrasting background from main diagram (typically white or light gray)
• •Box shadow for depth and separation

Technical Implementation

Output Format

Generate a complete, self-contained HTML file with this structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Workflow Name] - Process Flow</title>
  <style>
    /* All CSS here - no external stylesheets */
    /* Include: diagram layout, shapes, colors, flyout panel, responsive styles */
  </style>
</head>
<body>
  <!-- Main diagram container -->
  <div id="diagram-container">
    <!-- SVG or HTML-based diagram -->
  </div>

  <!-- Flyout panel (hidden by default) -->
  <div id="flyout-panel" class="hidden">
    <button id="close-panel">×</button>
    <h2 id="flyout-title"></h2>
    <div id="flyout-content"></div>
  </div>

  <!-- Optional: Semi-transparent backdrop -->
  <div id="backdrop" class="hidden"></div>

  <script>
    /* All JavaScript here - no external scripts (except CDN if using library) */
    /* Include: click handlers, panel show/hide, keyboard navigation */
  </script>
</body>
</html>

Implementation Approaches

Default: HTML/CSS with Inline SVG (Recommended)

Use this hybrid approach as the default implementation unless the user explicitly requests a different format:

• •HTML - Document structure, containers, and the flyout panel
• •CSS - Styling for the page layout, colors, hover effects, and responsive design
• •SVG - The actual flowchart diagram with all shapes (rectangles, diamonds, ellipses), connector lines, arrows, and text labels embedded directly in the HTML
• •JavaScript - Interactivity for clicking elements and showing/hiding the flyout panel with detailed information

The SVG is embedded directly in the HTML file (not as an external image), which makes it:

• •Fully interactive (can attach click handlers to individual shapes)
• •Scalable without quality loss
• •Self-contained in a single file
• •Easy to style with CSS
• •Ensures consistent text alignment and padding

Alternative Formats (Upon User Request):

Mermaid.js with Custom Handlers:

• •Use Mermaid for diagram generation via CDN
• •Add custom JavaScript for click interactivity
• •Good for complex layouts that benefit from auto-layout
• •Include CDN link: https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js

Pure HTML/CSS without SVG (For simple linear workflows):

• •Use flexbox or grid for layout
• •Styled div elements instead of SVG shapes
• •Easier for developers less familiar with SVG

Key Implementation Details

Text Alignment and Padding:

• •All text within shapes must be center-aligned both horizontally and vertically
• •Implement equal padding around all sides of text relative to box borders
• •For SVG: Use text-anchor="middle" and dominant-baseline="middle" attributes
• •For HTML/CSS: Use text-align: center and flexbox/grid for vertical centering
• •Ensure consistent spacing prevents text from appearing cramped or off-center

Responsive Design:

• •Center diagram in viewport
• •Use max-width and scaling for larger diagrams
• •Adjust flyout panel to full width on mobile breakpoints
• •Ensure touch-friendly click targets (minimum 44x44px)

Data Structure:

• •Store detailed content in JavaScript data structure
• •Map each visual element to its detailed information
• •Example structure:

const workflowData = {
  'step-1': {
    label: 'Review Application',
    details: 'Full detailed steps go here...'
  },
  // ... more steps
};

Keyboard Accessibility:

• •Escape key dismisses flyout panel
• •Consider Tab navigation between clickable elements
• •Focus management when panel opens/closes

Implementation Process

Follow these steps to generate the workflow diagram:

Step 0: Gather User Preferences

Before generating the diagram, use the AskUserQuestion tool to ask the user for their preferences:

1. •Branding: "Do you want this diagram branded? If so, provide the URL to use."
2. •Orientation: "Do you want this diagram vertically or horizontally oriented?"
3. •Badges: "Do you want numeric or alphanumeric badges for each step?"
4. •Format Confirmation: "This diagram will be built using HTML/CSS with inline SVG. Do you want to continue or opt for a different format?"
   • •Options: "Continue with HTML/CSS with inline SVG" or "Opt for a different format"
   • •If the user selects "Opt for a different format", follow up with: "Which format do you prefer?"
     • •Options: "Mermaid" or "Pure HTML/CSS without SVG"

These preferences will inform the visual design and layout of the final diagram.

Step 1: Parse and Categorize

Read through the provided workflow steps and create a structured representation:

1. •Identify each distinct step or action
2. •Categorize as process, decision, data, or start/end
3. •Extract high-level label and detailed description for each
4. •Note the sequence and relationships between steps
5. •Identify decision branch conditions and outcomes

Step 2: Design the Layout

Plan the visual structure:

1. •Determine vertical or horizontal primary flow direction
2. •Plan branch positions for decisions
3. •Ensure adequate spacing between elements
4. •When decision branches merge back to the main flow, ensure proper spacing to prevent arrows from overlapping boxes
5. •Consider the overall diagram dimensions
6. •Plan for responsive scaling if needed

Step 3: Create Concise Labels

Transform detailed descriptions into diagram labels:

1. •Extract the core action or decision
2. •Reduce to 2-5 words
3. •Ensure clarity despite brevity
4. •Use question form for decisions
5. •Verify no text overflow with chosen font size

Step 4: Generate the HTML Structure

Build the HTML file:

1. •Create the document structure with proper HTML5 doctype
2. •Add viewport meta tag for responsive behavior
3. •Embed all CSS in <style> tags
4. •Build the diagram using chosen approach (SVG/HTML/Mermaid)
5. •Create flyout panel HTML structure
6. •Embed JavaScript with data structure and event handlers

Step 5: Implement Interactivity

Add the interactive behavior:

1. •Create JavaScript object with detailed content for each element
2. •Attach click event listeners to all diagram elements
3. •Implement flyout panel show/hide functions
4. •Add keyboard handler for Escape key
5. •Implement backdrop click dismissal
6. •Test all interactive elements

Step 6: Test and Validate

Ensure quality before delivering:

1. •Verify all elements are clickable
2. •Check that detailed information displays correctly in flyout
3. •Test flyout dismissal with all methods (button, backdrop, Escape)
4. •Validate color contrast ratios
5. •Test responsive behavior at different viewport sizes
6. •Ensure no text overflow in any element

Output Delivery

After generating the HTML file:

1. •Provide the complete HTML code in a code block
2. •Suggest a filename based on the workflow name (e.g., order-fulfillment-workflow.html)
3. •Include opening instructions: "Save this as [filename].html and open in any web browser"
4. •Note any special features implemented (e.g., "Click any box to see detailed steps")

Best Practices

Do:

• •Keep labels concise (2-5 words)
• •Maintain high color contrast for accessibility
• •Make every element clickable with clear hover states
• •Store all detailed information for the flyout panels
• •Use standard flowchart shapes and conventions
• •Test the HTML file works standalone (no external dependencies except CDN)
• •Ensure responsive design for mobile viewing

Don't:

• •Don't use vague labels like "Process 1" or "Step A"
• •Don't rely on color alone to convey meaning
• •Don't make the diagram too large (causes scrolling fatigue)
• •Don't omit detailed information from any workflow element
• •Don't use technical jargon in labels without explanation in details
• •Don't forget keyboard accessibility (Escape key dismissal)
• •Don't create external file dependencies (keep everything embedded)

Example Transformation

Input (User Provides):

1. Customer submits order through website
2. System validates payment information
3. If payment is approved, proceed to fulfillment
4. If payment is declined, send error notification
5. Warehouse picks and packs items
6. Shipping carrier delivers order
7. Customer receives order confirmation

Output Structure:

• •Start: "Customer Order"
• •Data: "Order Form"
• •Process: "Validate Payment"
• •Decision: "Payment Approved?"
• •Process (Yes branch): "Fulfill Order"
• •Process (No branch): "Send Error Notice"
• •Process: "Pack Items"
• •Process: "Ship Order"
• •End: "Order Complete"

Each element includes detailed steps in the flyout panel, such as:

• •"Validate Payment" → Detailed: "System checks credit card number, expiration, CVV, billing address match, and available credit limit. Connects to payment gateway API and receives approval or decline response."

Summary

This skill transforms written workflow steps into polished, interactive visual diagrams. Focus on clear categorization, concise labeling, accessible design, and robust interactivity. The result should be a professional, self-contained HTML file that users can immediately open and interact with in any modern web browser.