Flowchart Creator
Creates HTML flowcharts and process diagrams with SVG-based nodes, decision diamonds, connecting arrows, and optional swimlanes with color-coded types
Install
Quick install
npx skills add https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/flowchart-creatornpx skills add mhattingpete/claude-skills-marketplace --skill "Flowchart Creator" --agent claude-codenpx skills add mhattingpete/claude-skills-marketplace --skill "Flowchart Creator" --agent cursornpx skills add mhattingpete/claude-skills-marketplace --skill "Flowchart Creator" --agent codexnpx skills add mhattingpete/claude-skills-marketplace --skill "Flowchart Creator" --agent opencodenpx skills add mhattingpete/claude-skills-marketplace --skill "Flowchart Creator" --agent github-copilotnpx skills add mhattingpete/claude-skills-marketplace --skill "Flowchart Creator" --agent windsurfMore 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.gitcp -r claude-skills-marketplace/visual-documentation-plugin/skills/flowchart-creator ~/.claude/skills/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.0Categories
Developer ToolsDesignTags
flowchartprocess-diagramdecision-treesvgworkflow-visualizationFeatures
Related Skills
More from Developer ToolsArchitecture Diagram Creator
Creates comprehensive HTML architecture diagrams with SVG visualizations showing business context, data flows, processing pipelines, and system architecture350mhattingpeteDeveloper ToolsDesign00
Web Asset Generator
Generate favicons, app icons (PWA), and social media Open Graph images from logos or text120alonw0DesignDeveloper 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 patterns5.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
opensource-guide-coach
Use when a user wants guidance on starting, contributing to, growing, governing, funding, securing, or sustaining an open source project, or asks about contributor onboarding, community health, maintainer burnout, code of conduct, metrics, legal basics, or open source project adoption.
use-my-browser
Use when work depends on the user's live browser session or visible rendered state rather than static fetches, especially for browser debugging contexts or DevTools-selected elements or requests, logged-in dashboards or CMS flows, localhost apps, forms, uploads, downloads, media inspection, DOM or iframe inspection, Shadow DOM, or browser failures that look like soft 404s, auth walls, anti-bot checks, or rate limits.
OpenAI / sentry
Inspect Sentry issues, summarize production errors, and pull health data
Datadog Labs / dd-monitors
Manage Datadog monitors through the pup CLI
ClickHouse / chdb-datastore
Drop-in pandas replacement with ClickHouse performance across 16+ data sources
Hugging Face / hugging-face-datasets
Create and manage datasets with configs and SQL querying