CA

cocoon-ai/process-flow-diagram-generator

Developer tools

Эта страница переведена автоматически. Технические детали смотрите в оригинале. Открыть оригинал

107 stars Качество 56 Тренд 19MIT

Создавайте красивые темные тематические блок-схемы процессов в виде отдельных файлов HTML / SVG. Работает как навык Клода.

Обзор

Используйте Claude.ai с этим специальным навыком для создания профессиональных блок-схем процессов за считанные секунды. Опишите свой рабочий процесс — ручные шаги, автоматизированные шаги, решения, интеграции — и Клод создает красивую темную диаграмму в виде отдельного HTML-файла, который вы можете открыть в любом браузере. — — просто опишите свой процесс на простом английском языке — — попросите Клода добавить шаги, изменить пути или переработать решения — — выход представляет собой один HTML-файл, не требуется специального программного обеспечения — — Кнопки копирования / PNG / PDF, запеченные в каждую диаграмму — — двухрядная обертка для более длительных процессов, циклическая обратная связь для всегда включенного мониторинга, пути исключения для случаев отказа Доступен на бесплатных, Pro, Max, Team и Enterprise планов (код исполнения должен быть включен в первую очередь) 1. Download process-flow-diagram.zip 2.Перейти на claude.ai → → 3. Нажмите кнопку → →, затем загрузите zip-файл 4. Перетаскивайте мастерство на Нужна помощь? Смотрите полное руководство по установке ниже. Вам просто нужно текстовое описание вашего рабочего процесса.

Обзор (машинный перевод)

** Нужна схема технологического потока? Используйте ИИ, чтобы создать его.**

Используйте Claude.ai с этим специальным навыком для создания профессиональных блок-схем процессов за считанные секунды. Опишите свой рабочий процесс — ручные шаги, автоматизированные шаги, решения, интеграции — и Клод создает красивую темную диаграмму в виде отдельного HTML-файла, который вы можете открыть в любом браузере.

** Никаких дизайнерских навыков не требуется ** - просто опишите свой процесс на простом английском языке ** Идеально быстро ** — попросите Клода добавить шаги, изменить пути или переработать решения Share easy — выход представляет собой один HTML-файл, не требующий специального программного обеспечения **Экспорт, встроенный в ** - Копировать / PNG / PDF кнопки в каждой диаграмме Сложные потоки рук — двухрядная обертка для более длительных процессов, циклическая обратная связь для постоянного мониторинга, пути исключения для случаев отказа

Быстрый старт (3 шага)

Шаг 1: Установите навык

Доступен на бесплатных, Pro, Max, Team и Enterprise планах (исполнение кода должно быть включено в ** Настройки → Возможности ** сначала)

  1. Скачать process-flow-diagram.zip 2.Перейти на claude.ai → Customize
  2. Нажмите кнопку + → **+ Создайте навык ** → **Загрузите навык **, затем загрузите zip-файл

Эта страница переведена автоматически. Технические детали смотрите в оригинале.

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.

Открыть полный README на GitHub

Рекомендуемые инструменты

Попробуйте другой запрос или уберите фильтр.

Установка

npx skillfish add cocoon-ai/process-flow-diagram-generator
Новичок в MCP? Начните с руководства на mcpskill.org →