flowchart-creator

Name: flowchart-creator
Availability: InStock
Author: mhattingpete

Generate interactive HTML flowcharts with Start/End, Process, and Decision shapes.

657|94|Updated Oct 17, 2025

Search Tags:#documentation #HTML #decision tree #flowchart #process diagram #workflow visualization #SVG

Ready to run

npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill flowchart-creator

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: flowchart-creator
Source: https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/flowchart-creator
Command: npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill flowchart-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

Manually creating clear, professional flowcharts and process diagrams can be time-consuming and require specialized software. This Skill automates the generation of stunning, interactive HTML flowcharts, allowing you to visualize complex processes effortlessly.

Core Features & Use Cases

Dynamic HTML Flowcharts: Generates modern SVG-based diagrams with responsive design.
Rich Components: Includes process boxes, decision diamonds, connectors, and swimlanes.
Color-coded Status: Uses a semantic color system for clear status indicators (success, warning, error).
Use Case: Describe your user registration process, and this Skill will generate a beautiful, interactive flowchart showing each step, decision point, and responsible team.

Quick Start

Example: Request a flowchart for a process

User: "Create a flowchart for our user registration process:

Start -> Fill Form -> Validate Input -> (Valid? Yes -> Create Account -> Email Confirmation -> End)

(Valid? No -> Show Errors -> Fill Form)"

Output will be a complete HTML/SVG flowchart.

Frequently Asked Questions about flowchart-creator

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

FAQPage Schema

How do I create an interactive HTML flowchart from a process description?▼

This Skill generates interactive HTML flowcharts directly from your process description. Provide a workflow outline with steps and decision points, and it produces a ready-to-display SVG-based flowchart file with process boxes, decision diamonds, and labeled connectors, all styled with semantic color coding.

Can I use flowcharts to document decision trees and workflows?▼

Yes. This Skill specializes in visualizing decision trees and workflows using standard flowchart shapes—Start/End nodes, Process boxes, and Decision diamonds—with color-coded status indicators and optional swimlanes to clarify responsibility across teams or departments.

What output format does the flowchart generator produce?▼

The Skill outputs a standalone HTML file containing SVG graphics, named after your process (e.g., user-registration-flowchart.html). The file is interactive, responsive, and ready to open in any browser without requiring additional software or dependencies.

Do I need specialized software to create professional process diagrams?▼

No. This Skill automates diagram generation, eliminating the need for external design tools. Describe your process in plain language, and it generates a professional, color-coded HTML flowchart with swimlanes and decision logic automatically applied.

Can flowcharts include swimlanes and team responsibility assignments?▼

Yes. The Skill supports optional swimlanes to organize process steps by responsible team or department, making it clear who owns each step in workflows like user registration, approval chains, or multi-stage operations.

What types of shapes and connectors does the flowchart support?▼

The Skill includes Start/End terminals, Process rectangles, Decision diamonds, and labeled directional arrows. Each element uses semantic color coding for status clarity, and the layout is responsive, scaling to different screen sizes.