flowchart-creator
Build interactive HTML flowcharts and process diagrams with color-coded nodes, decision points, and connectors. The skill breaks down workflows into visual steps, identifies decision branches, and renders clean layouts with consistent spacing for easy comprehension.
Flowchart Creator generates interactive HTML flowcharts with color-coded nodes, decision diamonds, and swimlanes for visualizing workflows.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-25
Flowchart Creator generates interactive HTML flowcharts with color-coded nodes, decision diamonds, and swimlanes for visualizing workflows. Build interactive HTML flowcharts and process diagrams with color-coded nodes, decision points, and connectors. The skill breaks down workflows into visual steps, identifies decision branches, and renders clean layouts with consistent spacing for easy comprehension.
Use it when
- Yes, flowchart-creator generates process flow diagrams that visualize your business workflows.
- flowchart-creator generates decision trees with branching logic and conditional paths.
Verify before relying
Read SKILL.md below before installing (5 files). Open directory: indexed for reading, not audited.
Install
mhattingpete/claude-skills-marketplace/flowchart-creator · repository language: HTML
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create an interactive flowchart with flowchart-creator?
flowchart-creator builds interactive HTML flowcharts by breaking down your workflows into visual steps with color-coded nodes and decision points. You provide the process steps and branching logic, and the skill renders a clean layout with connectors and consistent spacing that makes workflows easy to understand and share with your team.
Can flowchart-creator generate process flow diagrams?
Yes, flowchart-creator generates process flow diagrams that visualize your business workflows. It creates connected arrows and labeled transitions between steps, helping you document and communicate how work moves through your organization from start to finish.
What does flowchart-creator do with decision trees?
flowchart-creator generates decision trees with branching logic and conditional paths. It visualizes approval workflows, approval gates, and other decision points by showing how different conditions lead to different outcomes, making complex approval processes and conditional logic clear and actionable.
Does flowchart-creator support swimlanes and color coding?
flowchart-creator builds interactive HTML diagrams with color-coded nodes and swimlanes for organizing workflow steps by department or role. This visual separation helps teams understand who owns each step and how responsibilities flow through your process.
What format does flowchart-creator output?
flowchart-creator outputs interactive HTML diagrams that you can view in a browser, share with stakeholders, and embed in documentation. The HTML format ensures your flowcharts render consistently across devices without requiring special software.
How does flowchart-creator help with business process documentation?
flowchart-creator designs process maps for documentation and team communication by converting your workflow descriptions into visual diagrams. This makes it easier for new team members to learn processes, identify bottlenecks, and ensure everyone follows the same steps.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Flowchart Creator
Create interactive HTML flowcharts and process diagrams.
When to Use
- "Create flowchart for [process]"
- "Generate process flow diagram"
- "Make decision tree for [workflow]"
- "Show workflow visualization"
Components
- Start/End nodes: rounded rectangles (#48bb78 green, #e53e3e red)
- Process boxes: rectangles (#4299e1 blue)
- Decision diamonds: diamonds (#f59e0b orange)
- Arrows: connecting paths with labels
- Swimlanes: grouped sections (optional)
HTML Structure
```html <!DOCTYPE html> <html> <head> <title>[Process] Flowchart</title> <style> body { font-family: system-ui; } svg { max-width: 100%; } .start-end { fill: #48bb78; } .process { fill: #4299e1; } .decision { fill: #f59e0b; } </style> </head> <body> <h1>[Process Name] Flowchart</h1> <svg viewBox="0 0 800 600"> <!-- flowchart nodes and connectors -->
(truncated - see the full file via the links below)
File tree — 5 files
visual-documentation-plugin/skills/flowchart-creator/SKILL.md
visual-documentation-plugin/skills/flowchart-creator/assets/templates/base_template.html
visual-documentation-plugin/skills/flowchart-creator/assets/templates/flowchart_components.html
visual-documentation-plugin/skills/flowchart-creator/references/design_patterns.md
visual-documentation-plugin/skills/flowchart-creator/references/svg_library.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create visual flowchart or process diagram for workflows and business processes”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill produces comprehensive HTML architecture diagrams that map business objectives, data flows, processing pipelines, and system components in a single visual document. It structures technical architecture across layers—data, processing, services, and outputs—with SVG visualizations and semantic color coding for clarity.
Dashboard Creator generates self-contained HTML dashboards featuring KPI metric cards with trend indicators, SVG-based bar/pie/line charts, and progress bars. Perfect for building performance monitoring interfaces and analytics displays from your data.
This skill spawns three independent subagents to tackle problems from different angles—prioritizing simplicity, performance, or extensibility for code; top-down, bottom-up, or lateral thinking for design; or expert, pragmatic, or innovative perspectives for creative work. Each solution is scored against correctness, completeness, quality, clarity, and elegance, then the winner is returned with trade-off analysis and guidance on when alternatives might suit better.
Timeline Creator builds interactive HTML visualizations for project planning, rendering Gantt charts with task durations, phase groupings, and milestone markers. It extracts project dates and schedules, calculates progress percentages, and applies semantic color coding to show task status at a glance.
Technical Doc Creator builds polished HTML documentation for APIs and systems, complete with endpoint references, code samples, and architecture diagrams. It structures content with getting started guides, request/response examples, and syntax-highlighted code blocks. Perfect for creating developer-facing documentation that's ready to share.
Baoyu Diagram generates standalone SVG diagrams with a dark design system and semantic color palette. It supports architecture diagrams, flowcharts, sequence diagrams, mind maps, timelines, and other technical visualizations, each with purpose-built layout rules and component patterns.
More skills codebase-documenter (Apache-2.0) · Hackmd (unlicensed) · code-refactor (Apache-2.0) · excalidraw (MIT) · code-transfer (Apache-2.0) · mermaid-graph-writer (MIT) · concept-diagrams (MIT)