プロセスフロー図は? AI を 1 つ作成します。

この特別なスキルでClaude.aiを使用して、プロのプロセスフロー図を秒単位で生成します。 ワークフローを記述 — 手動の手順、自動の手順、決定、統合 — と Claude は、任意のブラウザーで開くことができるスタンドアローンの HTML ファイルとして、美しくダークテーマの図を作成します。

• 設計スキルは必要ありません — 単なる英語でのプロセスを記述する
• 迅速に対応 — 手順の追加、パスの変更、または作業の決定を求める
• 簡単に共有 — 出力は単一のHTMLファイルであり、特別なソフトウェアは必要ありません -*Export内蔵 - コピー/PNG/PDFボタンをすべての図に焼き込む
• ハンドルコンプレックスフロー - 長期プロセスの2列ラップ、常にオンモニタリングのための円環ループバック、障害事例の例外パス

OST クイックスタート(3ステップ)

ステップ1:スキルのインストール

Free、Pro、Max、Team、Enterpriseプラン(コード実行は、Settings → Capabilitiesで有効にする必要があります)

1. ダウンロード process-flow-diagram.zip
2. claude.ai → Customize → Skillsに行く 3.+ボタン→+作成スキル→スキルアップをクリックし、zipファイルをアップロードします。

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.