skills.rest
I-Onlabs
I-OnlabsCOMMUNITY
Explore all skills by this author →
GitHub

flowchart-creator

Create interactive HTML flowcharts from user-described processes.

3|1|Updated Dec 21, 2025
Search Tags:#workflow#flowchart#visualization#svg#diagram#swimlanes
One-click install
npx skills add https://github.com/I-Onlabs/claude-code-skills --skill flowchart-creator-i-onlabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flowchart-creator
Source: https://github.com/I-Onlabs/claude-code-skills/tree/main/flowchart-creator
Command: npx skills add https://github.com/I-Onlabs/claude-code-skills --skill flowchart-creator-i-onlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Flowchart creation and diagram visualization for processes, enabling quick, shareable process visuals without heavy tooling.

Core Features & Use Cases

  • Interactive HTML flowcharts with Start/End, Process, and Decision nodes
  • Arrows with labels and optional swimlanes for multi-team workflows
  • Color-coded node types and scalable SVG structure for web delivery
  • Use Case: visualize a hiring workflow with decision points and approvals

Quick Start

Create an HTML flowchart from a described workflow and customize node labels and layout.

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 HTML flowchart from a described workflow?▼

To create an HTML flowchart, describe your process or workflow, and the tool generates interactive HTML and SVG structures with color-coded start, end, process, and decision nodes connected by labeled arrows.

Can I generate swimlanes for multi-team process diagrams?▼

Yes, you can generate swimlanes for multi-team process diagrams. The tool structures workflows into distinct lanes with labeled arrows, enabling clear stakeholder communication across different teams.

What is the best way to visualize a decision tree in SVG?▼

The best way to visualize a decision tree in SVG is using the fixed set of node shapes provided, which specifically includes decision nodes alongside start, end, and process nodes for scalable web delivery.

Does this flowchart creator require heavy diagramming tools to share visuals?▼

No, it does not require heavy diagramming tools. It produces ready-to-edit HTML and SVG structures, enabling quick, shareable process visuals directly for web delivery without additional software dependencies.

What node shapes are supported for workflow visualization?▼

Supported node shapes for workflow visualization include start and end nodes, process nodes, and decision nodes. These are color-coded and connected with arrows with markers to map stages.

Related Skills

Explore More Design & Creative Skills→
rm2thaddeusrm2thaddeus
4

flowchart-creator

Generate interactive HTML flowcharts with customizable nodes and decision trees.

Community
Intermediate
zaiyemeiyou404zaiyemeiyou404

architecture-diagram

Generate standalone HTML architecture diagrams from SVG data using Python.

Community
Advanced
POWERFULMOVESPOWERFULMOVES
1

flowchart-creator

Generate interactive HTML flowcharts with customizable nodes and connecting arrows.

Community
Intermediate
nigo81nigo81
113

flowchart-generator

Generate flowcharts from natural language process descriptions.

Community
Advanced