本文へ移動
cccskills
無料GitHub で公開

flowchart-creator

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.

mhattingpete/claude-skills-marketplace
インストール方法を見る

含まれるファイル（5）

  • SKILL.md2.0 KB
  • assets/templates/base_template.html7.8 KB
  • assets/templates/flowchart_components.html10.4 KB
  • references/design_patterns.md10.8 KB
  • references/svg_library.md17.0 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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

<!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

<!-- 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).

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

architecture-diagram-creator

無料

Create comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications.

日本語の概要は準備中です。原文の説明を表示しています。

mhattingpete/claude-skills-marketplace6822026年7月25日 更新

code-auditor

無料

Performs comprehensive codebase analysis covering architecture, code quality, security, performance, testing, and maintainability. Use when user wants to audit code quality, identify technical debt, find security issues, assess test coverage, or get a codebase health check.

日本語の概要は準備中です。原文の説明を表示しています。

mhattingpete/claude-skills-marketplace6822026年7月25日 更新

code-execution

無料

Execute Python code locally with marketplace API access for 90%+ token savings on bulk operations. Activates when user requests bulk operations (10+ files), complex multi-step workflows, iterative processing, or mentions efficiency/performance.

日本語の概要は準備中です。原文の説明を表示しています。

mhattingpete/claude-skills-marketplace6822026年7月25日 更新

code-refactor

無料

Perform bulk code refactoring operations like renaming variables/functions across files, replacing patterns, and updating API calls. Use when users request renaming identifiers, replacing deprecated code patterns, updating method calls, or making consistent changes across multiple locations.

日本語の概要は準備中です。原文の説明を表示しています。

mhattingpete/claude-skills-marketplace6822026年7月25日 更新

code-transfer

無料

Transfer code between files with line-based precision. Use when users request copying code from one location to another, moving functions or classes between files, extracting code blocks, or inserting code at specific line numbers.

日本語の概要は準備中です。原文の説明を表示しています。

mhattingpete/claude-skills-marketplace6822026年7月25日 更新

codebase-documenter

無料

Generates comprehensive documentation explaining how a codebase works, including architecture, key components, data flow, and development guidelines. Use when user wants to understand unfamiliar code, create onboarding docs, document architecture, or explain how the system works.

日本語の概要は準備中です。原文の説明を表示しています。

mhattingpete/claude-skills-marketplace6822026年7月25日 更新

mhattingpete のスキルをすべて見る

このスキルの問題を報告する