NEW Browse AI tools across categories — updated daily. See what's new →

Flowchart Creator

Creates HTML flowcharts and process diagrams with SVG-based nodes, decision diamonds, connecting arrows, and optional swimlanes with color-coded types

Version1.0.0
LicenseApache-2.0
Token count~590
UpdatedJun 5, 2026

Install

Quick install

via npx skills · works with 57+ agents
npx skills add https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/flowchart-creator
Or pick agent:
npx skills add mhattingpete/claude-skills-marketplace --skill "Flowchart Creator" --agent claude-code
npx skills add mhattingpete/claude-skills-marketplace --skill "Flowchart Creator" --agent cursor
npx skills add mhattingpete/claude-skills-marketplace --skill "Flowchart Creator" --agent codex
npx skills add mhattingpete/claude-skills-marketplace --skill "Flowchart Creator" --agent opencode
npx skills add mhattingpete/claude-skills-marketplace --skill "Flowchart Creator" --agent github-copilot
npx skills add mhattingpete/claude-skills-marketplace --skill "Flowchart Creator" --agent windsurf
More install options

Shorthand — useful for multi-skill repos:

npx skills add mhattingpete/claude-skills-marketplace --skill "Flowchart Creator"

Manual — clone the repo and drop the folder into your agent's skills directory:

git clone https://github.com/mhattingpete/claude-skills-marketplace.git
cp -r claude-skills-marketplace/visual-documentation-plugin/skills/flowchart-creator ~/.claude/skills/
How to use: Once installed, ask your agent to "use the Flowchart Creator skill" or describe what you want (e.g. "Creates HTML flowcharts and process diagrams with SVG-based nodes, decision diam"). Requires Node.js 18+.

Flowchart Creator

Creates HTML flowcharts and process diagrams with SVG-based nodes, decision diamonds, connecting arrows, and optional swimlanes with color-coded types

What is it?
Creates HTML flowcharts and process diagrams with SVG-based nodes, decision diamonds, connecting arrows, and optional swimlanes with color-coded types Built for use cases involving flowchart, process-diagram, decision-tree, svg, workflow-visualization.

How to use it?

Install this skill in your Claude environment to enhance flowchart creator capabilities. Once installed, Claude will automatically apply the skill's guidelines when relevant tasks are detected. You can also explicitly invoke it by referencing its name in your prompts.

The full source and documentation is available on GitHub.

Key Features

  • Creates HTML flowcharts and process diagrams with SVG-based nodes, decision diamonds, connecting arrows, and optional swimlanes with color-coded types
  • Seamless integration with Claude's development workflow
  • Comprehensive guidelines and best practices for flowchart creatorView on GitHub

GitHub Stats

StarsForksLast UpdateAuthormhattingpeteLicenseApache-2.0Version1.0.0

Categories

Developer ToolsDesign

Tags

flowchartprocess-diagramdecision-treesvgworkflow-visualization

Features

Related Skills

More from Developer Tools

Architecture Diagram Creator

Creates comprehensive HTML architecture diagrams with SVG visualizations showing business context, data flows, processing pipelines, and system architecture

350mhattingpeteDeveloper ToolsDesign00

Web Asset Generator

Generate favicons, app icons (PWA), and social media Open Graph images from logos or text

120alonw0DesignDeveloper Tools00

Frontend Design

The official Claude frontend design skill by Anthropic. Guides Claude Code to create distinctive, production-grade frontend interfaces with high design quality, covering typography, color, motion, spatial composition, and UI design patterns

5.7kanthropicsDesignDeveloper Tools00

---

Source: https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/flowchart-creator
Author: mhattingpete
License: https://opensource.org/licenses/Apache-2.0
GitHub Stars: 350
Tags: flowchart, process-diagram, decision-tree, svg, workflow-visualization

SKILL.md source

---
name: Flowchart Creator
description: Creates HTML flowcharts and process diagrams with SVG-based nodes, decision diamonds, connecting arrows, and optional swimlanes with color-coded types
---

# Flowchart Creator

Creates HTML flowcharts and process diagrams with SVG-based nodes, decision diamonds, connecting arrows, and optional swimlanes with color-coded types

What is it?
Creates HTML flowcharts and process diagrams with SVG-based nodes, decision diamonds, connecting arrows, and optional swimlanes with color-coded types Built for use cases involving flowchart, process-diagram, decision-tree, svg, workflow-visualization.

## How to use it?
Install this skill in your Claude environment to enhance flowchart creator capabilities. Once installed, Claude will automatically apply the skill's guidelines when relevant tasks are detected. You can also explicitly invoke it by referencing its name in your prompts.

The full source and documentation is available on GitHub.

## Key Features

* Creates HTML flowcharts and process diagrams with SVG-based nodes, decision diamonds, connecting arrows, and optional swimlanes with color-coded types
* Seamless integration with Claude's development workflow
* Comprehensive guidelines and best practices for flowchart creatorView on GitHub

### GitHub Stats
StarsForksLast UpdateAuthormhattingpeteLicenseApache-2.0Version1.0.0

### Categories
Developer ToolsDesign

### Tags
flowchartprocess-diagramdecision-treesvgworkflow-visualization

### Features

## Related Skills
More from Developer Tools

### Architecture Diagram Creator
Creates comprehensive HTML architecture diagrams with SVG visualizations showing business context, data flows, processing pipelines, and system architecture

350mhattingpeteDeveloper ToolsDesign00

### Web Asset Generator
Generate favicons, app icons (PWA), and social media Open Graph images from logos or text

120alonw0DesignDeveloper Tools00

### Frontend Design
The official Claude frontend design skill by Anthropic. Guides Claude Code to create distinctive, production-grade frontend interfaces with high design quality, covering typography, color, motion, spatial composition, and UI design patterns

5.7kanthropicsDesignDeveloper Tools00

---

**Source**: https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/flowchart-creator
**Author**: mhattingpete
**License**: https://opensource.org/licenses/Apache-2.0
**GitHub Stars**: 350
**Tags**: flowchart, process-diagram, decision-tree, svg, workflow-visualization

Related skills 6