create-workflow-diagram について
テキストで記述したワークフローを、ノード、方向付き矢印、ラベルを含む図に変換し、PNGとして出力するスキルです。ドキュメントやプレゼンテーション、SNS向けに、複数のレイアウト、サイズ、スタイルを選べます。
主な機能
- 01テキストからステップ、ノード、接続を抽出
- 02左右、上下、蛇行型のレイアウト
- 035種類のビジュアルスタイル
- 04HTMLを生成してPNGをキャプチャ
- 05条件分岐と矢印ラベルに対応
活用シーン
- 01営業リード処理のワークフローを図示する
- 02登録から有料化までの手順を可視化する
- 03コードレビューとデプロイの流れを示す
- 04ドキュメントやSNS向けのフロー図を作る
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/create-workflow-diagramを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
package.jsonREADME.mdscreenshot-diagram.jsskill.meta.jsonSTYLE_PRESETS.md詳細
ワークフロー図の作成
FigJam／Miro風のワークフロー図をPNG画像として作成します。このスキルは、プレーンテキストのワークフローの説明を受け取り、ノード、方向を示す矢印、ラベルがつながったスタイル付きのHTML図を生成し、ドキュメント、Slack、LinkedIn、プレゼンテーションで共有できるよう自動でスクリーンショットを撮影します。
基本理念
- 視覚的な明瞭さ — 各ステップを明確な接続のある独立したノードとして表示します
- FigJam／Miro風のデザイン — カラフルで、角が丸く、親しみやすい図のスタイルです
- エクスポートの自動化 — HTMLを生成 → スクリーンショットを撮影 → 共有できるPNGを作成します
- スマートレイアウト — 論理的なフローパターンに沿ってノードを自動配置します
- ワンコマンド — ワークフローをプレーンテキストで説明するだけで、洗練された図が完成します
出力仕様
形式： PNG画像
- デフォルトサイズ： 1920×1080px（横長、プレゼンテーション向け）
- 代替サイズ： 1080×1080px（正方形、LinkedIn向け）、1200×630px（ブログ／ソーシャル向け）
- ファイル形式： PNG
- ファイルサイズ： 5MB未満
このスキルを使う場面
次のようなワークフロー／プロセス図に使います。
- 「Apolloでリードを探す → Clayで情報を充実させる → Claudeで適格性を判定する → Smartleadに送信する」
- 「ユーザーが登録する → オンボーディングメール → トライアル → アップグレードの案内 → 有料プラン」
- 「PRを作成する → CIを実行する → レビュー → 承認 → マージ → デプロイ」
- 「データをスクレイピングする → クリーンアップする → 情報を充実させる → スコアを付ける → CRMに振り分ける」
次の用途には使いません：
- 組織図や階層図（ツリーレイアウトツールを使ってください）
- 分岐が多い複雑なフローチャート（draw.ioを使ってください）
- データアーキテクチャ図（Mermaidなどを使ってください）
- 単純なテキストのリスト（箇条書きを使ってください）
ワークフローの概要
1. Content Input → User describes the workflow in plain text
2. Parse Steps → Extract nodes, connections, and labels
3. Style Selection → Choose visual style
4. HTML Generation → Create positioned diagram with SVG arrows
5. Screenshot → Auto-capture as PNG
6. Delivery → PNG file ready to share
フェーズ1：コンテンツの確認
ステップ1.1：ワークフローの説明を取得する
ユーザーに質問します。
質問1：ワークフローの内容は何ですか？
- ヘッダー：「ワークフロー」
- 質問：「ワークフローの各ステップを説明してください。矢印（→）または数字を使って流れを示してください。」
- （自由入力）
- 例：
- 「1. Apolloでリードを探す → 2. Clayで情報を充実させる → 3. Claudeで適格性を判定する → 4. Smartleadに送信する」
- 「Redditをスクレイピングする → 関連する投稿を絞り込む → コメントの下書きを作成する → Slackに送ってレビューする → 投稿する」
質問2：レイアウトの方向
- ヘッダー：「レイアウト」
- 質問：「図の流れをどのような方向にしますか？」
- 選択肢：
- 「左から右」 — 横方向の流れ（デフォルト、4～8ステップに最適）
- 「上から下」 — 縦方向の流れ（3～5ステップに最適）
- 「蛇行／ジグザグ」 — 次の行に折り返します（6ステップ以上に最適）
質問3：図のサイズ
- ヘッダー：「サイズ」
- 質問：「用途に合うサイズはどれですか？」
- 選択肢：
- 「横長（1920×1080）」 — プレゼンテーション、ドキュメント、Slack向け（デフォルト）
- 「正方形（1080×1080）」 — LinkedIn、ソーシャルメディア向け
- 「ワイド（1200×630）」 — ブログのヘッダー、ソーシャルカード向け
ステップ1.2：ワークフローを解析する
ユーザーの説明から構造化データを抽出します。
Input: "1. Find leads on Apollo → 2. Enrich with Clay → 3. Qualify with Claude → 4. Send to Smartlead via API"
Parsed:
nodes:
- id: 1, label: "Find leads", detail: "Apollo", icon: "🔍"
- id: 2, label: "Enrich leads", detail: "Clay", icon: "✨"
- id: 3, label: "Qualify leads", detail: "Claude", icon: "🤖"
- id: 4, label: "Send to Smartlead", detail: "via API", icon: "📤"
connections:
- from: 1, to: 2
- from: 2, to: 3
- from: 3, to: 4
解析ルール：
→、->、>、番号付きリスト、または改行で分割します- 主要なアクション（ラベル）とツール／プラットフォーム（詳細）を抽出します
- アクションに応じて関連する絵文字アイコンを自動で割り当てます
- 「if」「or」「else」などの語がある場合は分岐を検出します
アイコン割り当ての目安：
| アクションのキーワード | アイコン |
|---|---|
| 探す、検索する、見つける | 🔍 |
| 情報を充実させる、強化する、拡張する | ✨ |
| 適格性を判定する、スコアを付ける、絞り込む | 🎯 |
| 送信する、メール、アウトリーチ | 📤 |
| スクレイピングする、クロールする、抽出する | 🕷️ |
| 分析する、調査する | 📊 |
| レビューする、承認する | ✅ |
| デプロイする、リリースする、公開する | 🚀 |
| 保存する、保管する、データベース | 💾 |
| AI、Claude、GPT | 🤖 |
| アラート、通知する、Slack | 🔔 |
| クリーンアップする、変換する | 🧹 |
| マージする、結合する | 🔗 |
| スケジュールする、自動化する | ⏰ |
フェーズ2：スタイルの選択
スタイルの選択肢
質問：スタイルを選んでください
- ヘッダー：「スタイル」
- 質問：「どのビジュアルスタイルにしますか？」
- 選択肢：
- 「FigJamクラシック」 — 点線のキャンバスにカラフルな付箋風ノードを配置（デフォルト）
- 「設計図」 — グリッド線を使った技術的なダークテーマ
- 「ミニマルホワイト」 — 細い枠線と控えめな影を使ったすっきりした白のデザイン
- 「ネオンフロー」 — 光るネオンの接続線を使った暗い背景
- 「パステルボード」 — 明るい背景に柔らかなパステルカラーのノードを配置
各スタイルの詳細については、STYLE_PRESETS.mdを参照してください。
フェーズ 3：HTML 図の生成
ファイル構成
skills/create-workflow-diagram/[diagram-name]/
├── diagram.html # Full diagram page
└── exports/
└── diagram.png # Screenshot (generated in Phase 4)
HTML アーキテクチャ
この図は、ノードに絶対位置指定を使い、矢印には SVG を使った純粋な HTML/CSS で構築されています。
重要：ノードを正確に配置するには、絶対位置指定を使用してください。矢印や接続には SVG オーバーレイを使用してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Workflow Diagram</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* ===========================================
WORKFLOW DIAGRAM
=========================================== */
:root {
--diagram-width: 1920px;
--diagram-height: 1080px;
/* Colors (from chosen preset) */
--bg-primary: #f5f5f0;
--bg-dot-color: #d4d4d0;
--node-shadow: 0 4px 12px rgba(0,0,0,0.08);
--arrow-color: #666;
--text-primary: #1a1a1a;
--text-secondary: #666;
/* Node colors (cycle through for each node) */
--node-1: #FFE066; /* Yellow */
--node-2: #A8D8EA; /* Blue */
--node-3: #C3F0CA; /* Green */
--node-4: #F0B4D4; /* Pink */
--node-5: #D4BAFF; /* Purple */
--node-6: #FFB366; /* Orange */
/* Typography */
--font-family: 'Inter', -apple-system, sans-serif;
--node-title-size: 22px;
--node-detail-size: 15px;
--node-icon-size: 36px;
/* Node dimensions */
--node-width: 220px;
--node-min-height: 120px;
--node-padding: 24px;
--node-radius: 16px;
--node-gap: 80px; /* gap between nodes for arrows */
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: var(--diagram-width);
height: var(--diagram-height);
overflow: hidden;
}
body {
font-family: var(--font-family);
background: var(--bg-primary);
position: relative;
}
/* Dotted grid background (FigJam-style) */
.canvas-bg {
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(circle, var(--bg-dot-color) 1.2px, transparent 1.2px);
background-size: 24px 24px;
z-index: 0;
}
/* Diagram container */
.diagram {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
/* SVG arrow layer */
.arrows-layer {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
/* Workflow node */
.node {
position: absolute;
width: var(--node-width);
min-height: var(--node-min-height);
padding: var(--node-padding);
border-radius: var(--node-radius);
box-shadow: var(--node-shadow);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
z-index: 2;
border: 2px solid rgba(0,0,0,0.06);
}
.node-icon {
font-size: var(--node-icon-size);
line-height: 1;
}
.node-label {
font-size: var(--node-title-size);
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
}
.node-detail {
font-size: var(--node-detail-size);
font-weight: 500;
color: var(--text-secondary);
opacity: 0.8;
}
.node-step {
position: absolute;
top: -12px;
left: -12px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--text-primary);
color: white;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* Title overlay */
.diagram-title {
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
font-size: 32px;
font-weight: 700;
color: var(--text-primary);
z-index: 3;
text-align: center;
}
.diagram-subtitle {
position: absolute;
top: 82px;
left: 50%;
transform: translateX(-50%);
font-size: 18px;
font-weight: 400;
color: var(--text-secondary);
z-index: 3;
}
</style>
</head>
<body>
<div class="canvas-bg"></div>
<div class="diagram-title">Lead Generation Pipeline</div>
<div class="diagram-subtitle">Apollo → Clay → Claude → Smartlead</div>
<div class="diagram">
<svg class="arrows-layer" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrowhead" markerWidth="12" markerHeight="8" refX="10" refY="4" orient="auto">
<path d="M 0 0 L 12 4 L 0 8 Z" fill="var(--arrow-color)" />
</marker>
</defs>
<line x1="380" y1="490" x2="520" y2="490"
stroke="var(--arrow-color)" stroke-width="3"
stroke-dasharray="8,6" marker-end="url(#arrowhead)" />
</svg>
<div class="node" style="left: 160px; top: 420px; background: var(--node-1);">
<span class="node-step">1</span>
<span class="node-icon">🔍</span>
<span class="node-label">Find Leads</span>
<span class="node-detail">Apollo</span>
</div>
<div class="node" style="left: 560px; top: 420px; background: var(--node-2);">
<span class="node-step">2</span>
<span class="node-icon">✨</span>
<span class="node-label">Enrich Leads</span>
<span class="node-detail">Clay</span>
</div>
</div>
</body>
</html>
レイアウトアルゴリズム
左から右（4～8 ステップのデフォルト）：
Position each node evenly across the width:
- totalWidth = diagramWidth - (2 * margin)
- nodeSpacing = totalWidth / (nodeCount - 1)
- node[i].x = margin + (i * nodeSpacing) - (nodeWidth / 2)
- node[i].y = (diagramHeight / 2) - (nodeHeight / 2)
For the default 1920×1080 with 4 nodes:
- margin = 200px
- spacing = ~507px
- y = ~460px (vertically centered)
上から下（3～5 ステップ）：
- totalHeight = diagramHeight - (2 * margin)
- nodeSpacing = totalHeight / (nodeCount - 1)
- node[i].y = margin + (i * nodeSpacing) - (nodeHeight / 2)
- node[i].x = (diagramWidth / 2) - (nodeWidth / 2)
蛇行／ジグザグ（6 ステップ以上）：
- maxPerRow = 4
- rowHeight = 250px
- For each row, alternate left-to-right and right-to-left
- Row 0: nodes flow →
- Row 1: nodes flow ←
- Row 2: nodes flow →
- Connect last node of row to first node of next row with vertical arrow
矢印の描画
矢印は、ノードの端点間を結ぶ SVG の線として描画されます。
// Calculate arrow coordinates between two nodes
function getArrowCoords(fromNode, toNode, direction) {
if (direction === 'horizontal') {
// Arrow from right edge of fromNode to left edge of toNode
const x1 = fromNode.x + fromNode.width;
const y1 = fromNode.y + fromNode.height / 2;
const x2 = toNode.x;
const y2 = toNode.y + toNode.height / 2;
return { x1, y1, x2, y2 };
}
if (direction === 'vertical') {
// Arrow from bottom of fromNode to top of toNode
const x1 = fromNode.x + fromNode.width / 2;
const y1 = fromNode.y + fromNode.height;
const x2 = toNode.x + toNode.width / 2;
const y2 = toNode.y;
return { x1, y1, x2, y2 };
}
}
曲線の矢印（より FigJam らしい表現）には、SVG の <path> と三次ベジェ曲線を使用します。
<path d="M 380,490 C 430,490 470,490 520,490"
stroke="var(--arrow-color)" stroke-width="3"
fill="none" stroke-dasharray="8,6"
marker-end="url(#arrowhead)" />
蛇行レイアウトで行間をつなぐ垂直コネクター：
<path d="M 1500,550 C 1500,620 200,620 200,690"
stroke="var(--arrow-color)" stroke-width="3"
fill="none" stroke-dasharray="8,6"
marker-end="url(#arrowhead)" />
分岐（任意）
ワークフローに条件分岐がある場合：
Step 3: Qualify leads
├── Yes → Step 4a: Send to Smartlead
└── No → Step 4b: Add to nurture sequence
次のように描画します：
- ステップ 3 のメインノード
- ステップ 3 から分岐する 2 本の矢印
- 各矢印にラベル（「適格」／「不適格」）
- 2 つの遷移先ノード
<text x="650" y="400" font-size="14" fill="var(--text-secondary)"
font-family="Inter" font-weight="600">Qualified</text>
フェーズ 4：スクリーンショットの生成
HTML の生成後、スクリーンショットを自動でキャプチャします。
Playwright の使用
cd /path/to/skills/create-workflow-diagram
node screenshot-diagram.js <diagram-name>
これにより、次の処理が行われます：
- ヘッドレスブラウザーで図の HTML を開く
- ビューポートを図のサイズ（例：1920×1080）に設定する
- フォントの読み込みを待つ
- 2 倍の解像度で PNG スクリーンショットをキャプチャする
- 図の
exports/ディレクトリに保存する
インストール
初回セットアップ：
cd /path/to/skills/create-workflow-diagram
npm install
フェーズ 5：納品
スクリーンショットの生成後、ユーザーに次のものを提示します。
Your workflow diagram is ready!
HTML source: skills/create-workflow-diagram/[name]/diagram.html
PNG export: skills/create-workflow-diagram/[name]/exports/diagram.png
Preview: Open diagram.html in a browser to see the full diagram.
Diagram details:
- 4 workflow steps connected with arrows
- Style: FigJam Classic
- Size: 1920×1080px (landscape)
- File size: ~350 KB
Want to make any changes?
ノードのサイズ規則
ノードの一貫性と読みやすさを保ちます。
| 要素 | サイズ |
|---|---|
| ノードの幅 | 200-240px |
| ノードの最小高さ | 110-140px |
| ノードのパディング | 20-28px |
| アイコン | 32-40px |
| ラベルのフォント | 20-24px、ウェイト 700 |
| 詳細のフォント | 14-16px、ウェイト 500 |
| ステップバッジ | 28-34px の円 |
| 矢印の線幅 | 2-3px |
| 矢印の間隔 | ノード間 60-100px |
コンテンツ規則
各ノードには次の要素を含めます。
- ステップ番号 — 左上隅のバッジ
- アイコン — 関連する絵文字（キーワードから自動割り当て）
- ラベル — 2～4 語のアクション（例：「リードを探す」）
- 詳細 — ツール／プラットフォーム名（例：「Apollo」）— 任意
ラベルが長すぎる場合は、短縮するか、複数行に分けます。ラベルは最大 2 行にしてください。
トラブルシューティング
ノードが重なる
解決策： --node-gap を大きくするか、多数のノードには蛇行レイアウトに切り替えます。
矢印の位置がずれる
解決策： 実際のノード位置に基づいて、矢印の開始点と終了点を再計算します。対象に最も近いノードの辺の中央を使います。
フォントが読み込まれない
解決策： スクリーンショットの前に await page.waitForLoadState('networkidle') を追加します。タイムアウトを 1000ms に増やします。
図が込み入っている
解決策： ステップを統合してノード数を減らすか、キャンバスを大きくするか、蛇行レイアウトを使います。
スタイル早見表
| プリセット | 最適な用途 | 雰囲気 |
|---|---|---|
| FigJam Classic | 一般的なワークフロー | 親しみやすく、カラフル |
| Blueprint | 技術的なプロセス | プロフェッショナルで、ダーク |
| Minimal White | ドキュメント | すっきりとした、企業向け |
| Neon Flow | テクノロジー／AI ワークフロー | 未来的で、大胆 |
| Pastel Board | プレゼンテーション | やわらかく、親しみやすい |
スタイルの詳細は STYLE_PRESETS.md を参照してください。
関連スキル
- create-html-carousel — 複数スライドの LinkedIn カルーセル向け
- frontend-slides — HTML プレゼンテーション全般向け
セッションの流れの例
- ユーザー：「Apollo でリードを探す → Clay で情報を補完する → Claude で適格性を判定する → Smartlead に送信する」図を作成して
- スキルがレイアウトの方向、サイズ、スタイルを確認する
- ユーザーがデフォルト（左から右、横長、FigJam Classic）を選ぶ
- スキルが自動アイコン付きの 4 つのノードを解析する
- スキルが配置済みノードと SVG 矢印を含む HTML 図を生成する
- スキルがスクリーンショットスクリプトを実行する
- スキルが PNG ファイルを納品する
- ユーザーが Slack／ドキュメント／LinkedIn で共有する
所要時間：説明から図のエクスポートまで 2～5 分。
コメント
Markdown 対応