본문으로 건너뛰기
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).

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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-marketplace6872026년 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-marketplace6872026년 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-marketplace6872026년 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-marketplace6872026년 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-marketplace6872026년 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-marketplace6872026년 7월 25일 업데이트

mhattingpete의 스킬 모두 보기

이 스킬의 문제 신고