CA

cocoon-ai/process-flow-diagram-generator

Developer tools

이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기

107 stars 품질 56 트렌드 19MIT

아름다운 어두운 테마의 프로세스 흐름 다이어그램을 독립 HTML / SVG 파일로 생성하십시오. Claude AI 기술로 작동합니다.

개요

Claude.ai를 사용하여 전문 프로세스 흐름 다이어그램을 초 단위로 생성합니다. 작업 흐름 설명 — 수동 단계, 자동화된 단계, 결정, 통합 — 그리고 Claude는 모든 브라우저에서 열 수 있는 독립 HTML 파일로 아름다운, 어두운 테마 다이어그램을 만듭니다. - - 일반 영어에서 프로세스를 설명 - - 단계, 변경 경로, 또는 재작업 결정을 추가하기 위해 클레ude - - 출력은 단일 HTML 파일이며, 특수 소프트웨어가 필요하지 않습니다 - - 복사 / PNG / PDF 버튼은 모든 다이어그램에 구워 - - 더 긴 프로세스에 대한 두 줄 랩, 항상 모니터링을위한 순환 루프 백, 실패 사례 예외 경로 ⚠️ 무료, Pro, Max, Team 및 Enterprise 계획에서 사용 가능 (코드 실행은 먼저 활성화되어야 함) 1. Process-flow-diagram.zip 다운로드 2. claude.ai로 이동 → 3. 버튼을 클릭 → → , 다음 zip 파일을 업로드 4. 기술에 대해 ? 아래 전체 설치 가이드를 참조하십시오. 작업 흐름의 텍스트 설명을 필요로 합니다.

개요(AI 번역)

공정 흐름 다이어그램이 필요합니까? AI를 사용하여 하나를 구축하십시오.

Claude.ai를 사용하여 전문 프로세스 흐름 다이어그램을 초 단위로 생성합니다. 작업 흐름 설명 — 수동 단계, 자동화된 단계, 결정, 통합 — 그리고 Claude는 모든 브라우저에서 열 수 있는 독립 HTML 파일로 아름다운, 어두운 테마 다이어그램을 만듭니다.

  • **필요한 디자인 기술이 필요 없음 ** — 그냥 일반 영어로 프로세스를 설명
  • ** 빠른 ** - 단계 추가, 경로 변경, 또는 재작업 결정에 Claude 요청
  • ** 쉽게 공유 ** - 출력은 단일 HTML 파일, 특별한 소프트웨어가 필요하지 않습니다.
  • ****에 내장 된 수출 - 복사 / PNG / PDF 버튼은 모든 다이어그램에 구워
  • Handles Complex flows - 더 긴 프로세스를 위한 두 줄 랩, 항상 모니터링을 위한 순환 루프백, 실패 사례를 위한 예외 경로

빠른 시작 (3 단계)

단계 1: 기술 설치

⚠️ 무료, Pro, Max, Team 및 Enterprise 계획에서 사용 가능 (Code Execution은 ** 설정 → Capabilities** first)

  1. 다운로드 process-flow-diagram.zip
  2. claude.ai로 이동 → ** 사용자 정의 ** → ** 스킬 **
  3. ** + ** 버튼을 클릭 → ** + 기술 생성 ** → ** 기술을 업로드 **, 다음 zip 파일을 업로드
  4. 명세.

이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요.

README

원문 README의 일부입니다. 원문 보기.

Process Flow Diagram Generator

Need a process flow diagram? Get AI to build you one.

Use Claude.ai with this special skill to generate professional process flow diagrams in seconds. Describe your workflow — manual steps, automated steps, decisions, integrations — and Claude creates a beautiful, dark-themed diagram as a standalone HTML file you can open in any browser.

  • No design skills needed — just describe your process in plain English
  • Iterate quickly — ask Claude to add steps, change paths, or rework decisions
  • Share easily — output is a single HTML file, no special software required
  • Export built in — Copy / PNG / PDF buttons baked into every diagram
  • Handles complex flows — two-row wrap for longer processes, cyclical loop-back for always-on monitoring, exception paths for failure cases

🚀 Quick Start (3 Steps)

Step 1: Install the Skill

⚠️ Available on Free, Pro, Max, Team, and Enterprise plans (Code Execution must be enabled in Settings → Capabilities first)

  1. Download process-flow-diagram.zip
  2. Go to claude.ai → Customize → Skills
  3. Click the + button → + Create skill → Upload a skill, then upload the zip file
  4. Toggle the skill on

📚 Need help? See the full installation guide below.

Step 2: Get Text that Describes Your Process

You just need a text description of your workflow. Pick whichever works for you:

Option A: Have AI analyze your existing docs

Open your runbook, SOP, or onboarding doc in Cursor, Claude Code, Windsurf, or ChatGPT and ask:

Summarize this process as a numbered sequence of steps. For each step,
note who does it (human or system), what triggers it, what the output is,
and any decision points or branches.

Option B: Write it yourself

Just list your steps in order:

1. User submits expense report
2. System auto-categorizes line items
3. Manager reviews — if total > $500, escalate to finance
4. Finance approves or rejects
5. Approved → Workday creates payment

Option C: Ask for a typical process

Don’t have a specific workflow? Ask Claude for a starting point:

What's a typical approval workflow for procurement requests?

Step 3: Generate Your Diagram by Asking Claude to Use the Skill

Take the output from Step 2 and paste it into Claude (with the Process Flow Diagram Generator skill installed):

Use your process flow diagram skill to create a flow diagram from this description:

[PASTE YOUR PROCESS DESCRIPTION HERE]

That’s it! Claude will generate a beautiful HTML file you can open in any browser.

GitHub에서 전체 README 보기

추천 도구

다른 키워드를 입력하거나 필터를 제거해 보세요.

설치

npx skillfish add cocoon-ai/process-flow-diagram-generator
MCP 초보자라면? mcpskill.org 가이드부터 시작하세요 →