skills.rest
mhattingpete
mhattingpeteCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

flowchart-creator

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
One-click install
npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill flowchart-creator
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Content & Communication Skills→
WcofWcof
1

pm-flow

Generate traceable Mermaid business flowcharts from PMContext with decision branches and exception paths.

Community
Advanced
anchor-jevonsanchor-jevons

tech-report-deck

Generate HTML presentation decks with PDF and PPTX exports from source documents.

Community
Intermediate
jykimjykim
1

md2html

Convert markdown documents to website-ready HTML pages with frontmatter and wiki links.

Community
Intermediate
DanhvbDanhvb

Process Mapping

Create BPMN 2.0, flowchart, and swimlane diagrams for business processes.

Community
Intermediate