Flowchart Creator

mhattingpete/claude-skills-marketplace/visual-documentation-plugin/skills/flowchart-creator

作者 mhattingpeteb5b34bcf4c920bb72cee1c391b54a33cb5353c12无许可证收录于 2026年10月9日更新于 2026年10月9日

Create HTML flowcharts and process diagrams with decision trees, color-coded stages, arrows, and swimlanes. Use when users request flowcharts, process diagrams, workflow visualizations, or decision trees.

仅含说明Design & Creative
AI 生成的概览

创建交互式 HTML 流程图和过程图，包含决策菱形、颜色编码节点、箭头以及可选的泳道。

功能
该技能提供生成包含 SVG 流程图的独立 HTML 文件的说明。它定义了节点类型（开始/结束圆角矩形、处理框、决策菱形）、配色方案、箭头连接线、可选泳道，以及分步布局流程。输出写入 [process]-flowchart.html 文件。
适用场景
当用户要求流程图、过程图、工作流可视化或决策树时使用。它适合将一系列步骤或分支逻辑可视化为图表的请求。
运行要求
不附带脚本，仅为说明文档。依赖代理编写 HTML 和 SVG 的能力，以及随附的模板和参考文件。无需凭据或网络访问。

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

  1. Start/End nodes: rounded rectangles (#48bb78 green, #e53e3e red)
  2. Process boxes: rectangles (#4299e1 blue)
  3. Decision diamonds: diamonds (#f59e0b orange)
  4. Arrows: connecting paths with labels
  5. 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 -->  </svg></body></html>

Node Patterns

html
<!-- Start/End (rounded rect) --><rect x="350" y="50" width="100" height="50" rx="25" class="start-end"/><text x="400" y="80" text-anchor="middle">Start</text>
<!-- Process box --><rect x="350" y="150" width="100" height="60" class="process"/><text x="400" y="185" text-anchor="middle">Process</text>
<!-- Decision diamond --><path d="M400,250 L450,280 L400,310 L350,280 Z" class="decision"/><text x="400" y="285" text-anchor="middle">Decision?</text>
<!-- Arrow --><path d="M400,100 L400,150" stroke="#666" stroke-width="2" marker-end="url(#arrow)"/>

Workflow

  1. Break down process into steps
  2. Identify decision points
  3. Layout nodes vertically or horizontally
  4. Connect with arrows
  5. Add labels to decision branches
  6. Write to [process]-flowchart.html

Keep layout clean, use consistent spacing (100px between nodes).

来源与署名

来源：mhattingpete/claude-skills-marketplace位于visual-documentation-plugin/skills/flowchart-creator提交b5b34bc

许可证： 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 mhattingpete/claude-skills-marketplace 的技能

Codebase Documenter

mhattingpete

生成 Markdown 文档，说明代码库的架构、组件、数据流与开发规范。

Software Development2026年10月9日

更多Design & Creative技能

Theme Factory

anthropics

精选

提供 10 套预设配色与字体主题，并可即时生成新主题，用于为幻灯片、文档、报告和 HTML 页面统一风格。

Design & Creative180K今天更新

Slack Gif Creator

anthropics

精选

为 Slack 创建尺寸与体积经过优化的动画 GIF，提供 PIL 绘图辅助、缓动函数与校验工具。

包含脚本
Design & Creative180K今天更新

Frontend Design

anthropics

精选

在构建或改造用户界面时，提供打造独特、有意图的视觉设计的指导。

Design & Creative180K今天更新

Canvas Design

anthropics

精选

依据写好的设计理念创作原创视觉艺术，输出 PNG 或 PDF，适用于海报、艺术作品等静态成品。

Design & Creative180K今天更新

Brand Guidelines

anthropics

精选

将 Anthropic 官方品牌配色与字体应用到需要体现 Anthropic 外观风格的各类产物上。

Design & Creative180K今天更新

Frontend Design

anthropics

精选

指导智能体为新界面或改版界面进行独特、有意图的视觉设计。

Design & Creative149K今天更新