
cocoon-ai/process-flow-diagram-generator
Developer tools이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기
아름다운 어두운 테마의 프로세스 흐름 다이어그램을 독립 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)
- 다운로드
process-flow-diagram.zip - claude.ai로 이동 → ** 사용자 정의 ** → ** 스킬 **
- ** + ** 버튼을 클릭 → ** + 기술 생성 ** → ** 기술을 업로드 **, 다음 zip 파일을 업로드
- 명세.
이 페이지는 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)
- Download
process-flow-diagram.zip - Go to claude.ai → Customize → Skills
- Click the + button → + Create skill → Upload a skill, then upload the zip file
- 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.
추천 도구
다른 키워드를 입력하거나 필터를 제거해 보세요.
설치
npx skillfish add cocoon-ai/process-flow-diagram-generator