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
Install
mhattingpete/claude-skills-marketplace/flowchart-creator · repository language: HTML
git clone https://github.com/mhattingpete/claude-skills-marketplace
cp -r claude-skills-marketplace/visual-documentation-plugin/skills/flowchart-creator ~/.claude/skills/flowchart-creatorFrequently 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)
Read as markdown · JSON record · Browse the source repository
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