Agent skill

Create Workflow Diagram

by gooseworks-ai in gooseworks-ai/goose-skills

Create FigJam/Miro-style workflow diagrams as high-quality PNG images from plain-text workflow descriptions.

MITAuto-check passedDevelopment

Install Create Workflow Diagram

skills CLI

$ npx skills add gooseworks-ai/goose-skills --skill create-workflow-diagram -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install gooseworks-ai/goose-skills create-workflow-diagram --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/gooseworks-ai/goose-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/design/capabilities/create-workflow-diagram .claude/skills/create-workflow-diagram && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "create-workflow-diagram" agent skill from https://github.com/gooseworks-ai/goose-skills/tree/main/skills/design/capabilities/create-workflow-diagram into .claude/skills/create-workflow-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-workflow-diagram", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/gooseworks-ai/goose-skills/tree/main/skills/design/capabilities/create-workflow-diagram

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add gooseworks-ai/goose-skills --skill create-workflow-diagram -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install gooseworks-ai/goose-skills create-workflow-diagram --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/gooseworks-ai/goose-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/design/capabilities/create-workflow-diagram .agents/skills/create-workflow-diagram && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "create-workflow-diagram" agent skill from https://github.com/gooseworks-ai/goose-skills/tree/main/skills/design/capabilities/create-workflow-diagram into .agents/skills/create-workflow-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-workflow-diagram", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add gooseworks-ai/goose-skills --skill create-workflow-diagram -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install gooseworks-ai/goose-skills create-workflow-diagram --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/gooseworks-ai/goose-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/design/capabilities/create-workflow-diagram .cursor/skills/create-workflow-diagram && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "create-workflow-diagram" agent skill from https://github.com/gooseworks-ai/goose-skills/tree/main/skills/design/capabilities/create-workflow-diagram into .cursor/skills/create-workflow-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-workflow-diagram", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/gooseworks-ai/goose-skills.git --path skills/design/capabilities/create-workflow-diagram

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add gooseworks-ai/goose-skills --skill create-workflow-diagram -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install gooseworks-ai/goose-skills create-workflow-diagram --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/gooseworks-ai/goose-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/design/capabilities/create-workflow-diagram .gemini/skills/create-workflow-diagram && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "create-workflow-diagram" agent skill from https://github.com/gooseworks-ai/goose-skills/tree/main/skills/design/capabilities/create-workflow-diagram into .gemini/skills/create-workflow-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-workflow-diagram", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install gooseworks-ai/goose-skills create-workflow-diagram

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add gooseworks-ai/goose-skills --skill create-workflow-diagram -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/gooseworks-ai/goose-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/design/capabilities/create-workflow-diagram .github/skills/create-workflow-diagram && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "create-workflow-diagram" agent skill from https://github.com/gooseworks-ai/goose-skills/tree/main/skills/design/capabilities/create-workflow-diagram into .github/skills/create-workflow-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-workflow-diagram", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add gooseworks-ai/goose-skills --skill create-workflow-diagram -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install gooseworks-ai/goose-skills create-workflow-diagram --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/gooseworks-ai/goose-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/design/capabilities/create-workflow-diagram .opencode/skills/create-workflow-diagram && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "create-workflow-diagram" agent skill from https://github.com/gooseworks-ai/goose-skills/tree/main/skills/design/capabilities/create-workflow-diagram into .opencode/skills/create-workflow-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-workflow-diagram", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: create-workflow-diagram
GitHub stars: 1.2k
Used in: 1 other repo
Token cost: ~4.6k tokens
SKILL.md length: 974 words
Files: 6
Skills in repo: 273
Repo updated: Oct 8, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Create FigJam/Miro-style workflow diagrams as high-quality PNG images from plain-text workflow descriptions.

Works in 5 steps: Content Discovery → Style Selection → Generate HTML Diagram → …
Tasks that involve Diagrams
SKILL.md covers Core Philosophy, Output Specs, When to Use This Skill and Workflow Overview, plus 10 more sections
Runs JavaScript scripts from its folder; calls node and npm; reaches fonts.googleapis.com and fonts.gstatic.com

What it does

Create Workflow Diagram is an agent skill from gooseworks-ai/goose-skills. Create FigJam/Miro-style workflow diagrams as high-quality PNG images from plain-text workflow descriptions. Renders beautiful HTML diagrams with connected nodes, arrows, and labels, then screenshots them for sharing.

Its SKILL.md is about 4.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files (for example `README.md`, `STYLE_PRESETS.md` and `package.json`).

It sits in Development, covering Diagrams. It works with Figma. The repository describes itself as: Library of Growth & GTM skills + data APIs for Claude Code, Codex, Cursor to run ads, social, content, lead gen, seo and data scraping. The licence is MIT.

When your agent uses it

Tasks that involve Diagrams

Example prompts

“/create-workflow-diagram”

Requirements

Node.js

Workflow steps

5 steps, taken from the step headings in SKILL.md.

Content Discovery
Style Selection
Generate HTML Diagram
Screenshot Generation
Delivery

What it can do on your machine

Read from SKILL.md and the folder at commit c650c6d. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships script files (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
- node
- npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- fonts.googleapis.com
- fonts.gstatic.com
- w3.org
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Create Workflow Diagram loads about 4.6k tokens when it runs. Until then it costs about 60 tokens; SKILL.md has 974 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~60
When it runs · the whole SKILL.md, loaded when a task matches: ~4.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from gooseworks-ai/goose-skills at commit c650c6d, republished under its MIT licence (© gooseworks-ai). 974 words, ~4,584 tokens.

Download SKILL.mdSave it as .claude/skills/create-workflow-diagram/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.

name: create-workflow-diagram
description: Create FigJam/Miro-style workflow diagrams as high-quality PNG images from plain-text workflow descriptions. Renders beautiful HTML diagrams with connected nodes, arrows, and labels, then screenshots them for sharing.

Workflow Diagram Creator

Create FigJam/Miro-style workflow diagrams as PNG images. This skill takes a plain-text workflow description and generates a styled HTML diagram with connected nodes, directional arrows, and labels — then automatically screenshots it for sharing in docs, Slack, LinkedIn, or presentations.

Core Philosophy

Visual Clarity — Each step is a distinct node with clear connections
FigJam/Miro Aesthetic — Colorful, rounded, friendly diagram style
Automated Export — Generate HTML → Screenshot → PNG ready to share
Smart Layout — Automatically arranges nodes in logical flow patterns
One-Command — Describe workflow in plain text, get a polished diagram

Output Specs

Format: PNG image

Default size: 1920×1080px (landscape, presentation-friendly)
Alternative sizes: 1080×1080px (square, LinkedIn), 1200×630px (blog/social)
File format: PNG
File size: Under 5MB

When to Use This Skill

Use for workflow/process diagrams like:

"Find leads on Apollo → Enrich with Clay → Qualify with Claude → Send to Smartlead"
"User signs up → Onboarding email → Trial → Upgrade prompt → Paid"
"PR opened → CI runs → Review → Approve → Merge → Deploy"
"Scrape data → Clean → Enrich → Score → Route to CRM"

NOT for:

Org charts or hierarchy diagrams (use a tree layout tool)
Complex flowcharts with many branches (use draw.io)
Data architecture diagrams (use Mermaid or similar)
Simple text lists (just use bullet points)

Workflow Overview

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

Phase 1: Content Discovery

Step 1.1: Get Workflow Description

Ask the user:

Question 1: What's the workflow?

Header: "Workflow"
Question: "Describe the workflow steps. Use arrows (→) or numbers to show the flow."
(Free text input)
Examples:
- "1. Find leads on Apollo → 2. Enrich with Clay → 3. Qualify with Claude → 4. Send to Smartlead"
- "Scrape Reddit → Filter relevant posts → Draft comments → Send to Slack for review → Post"

Question 2: Layout Direction

Header: "Layout"
Question: "How should the diagram flow?"
Options:
- "Left to Right" — Horizontal flow (default, best for 4-8 steps)
- "Top to Bottom" — Vertical flow (best for 3-5 steps)
- "Snake/Zigzag" — Wraps to next row (best for 6+ steps)

Question 3: Diagram Size

Header: "Size"
Question: "What size works best for your use case?"
Options:
- "Landscape (1920×1080)" — Presentations, docs, Slack (default)
- "Square (1080×1080)" — LinkedIn, social media
- "Wide (1200×630)" — Blog headers, social cards

Step 1.2: Parse the Workflow

Extract structured data from the user's description:

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

Parsing rules:

Split on →, ->, >, numbered lists, or line breaks
Extract the primary action (label) and the tool/platform (detail)
Auto-assign relevant emoji icons based on the action
Detect branching if words like "if", "or", "else" appear

Icon assignment heuristics:

Action keyword	Icon
find, search, discover	🔍
enrich, enhance, augment	✨
qualify, score, filter	🎯
send, email, outreach	📤
scrape, crawl, extract	🕷️
analyze, research	📊
review, approve	✅
deploy, ship, launch	🚀
store, save, database	💾
AI, Claude, GPT	🤖
alert, notify, Slack	🔔
clean, transform	🧹
merge, combine	🔗
schedule, automate	⏰

Phase 2: Style Selection

Style Options

Question: Pick a Style

Header: "Style"
Question: "Which visual style?"
Options:
- "FigJam Classic" — Colorful sticky-note nodes on dotted canvas (default)
- "Blueprint" — Technical dark theme with grid lines
- "Minimal White" — Clean white with thin borders and subtle shadows
- "Neon Flow" — Dark background with glowing neon connections
- "Pastel Board" — Soft pastel nodes on light background

See STYLE_PRESETS.md for full details on each style.

Phase 3: Generate HTML Diagram

File Structure

skills/create-workflow-diagram/[diagram-name]/
├── diagram.html               # Full diagram page
└── exports/
    └── diagram.png            # Screenshot (generated in Phase 4)

HTML Architecture

The diagram is built with pure HTML/CSS using absolute positioning for nodes and SVG for arrows.

CRITICAL: Use absolute positioning for precise node placement. Use SVG overlay for arrows/connections.

html

<!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>

    <!-- Fonts -->
    <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>

    <!-- Optional title -->
    <div class="diagram-title">Lead Generation Pipeline</div>
    <div class="diagram-subtitle">Apollo → Clay → Claude → Smartlead</div>

    <div class="diagram">
        <!-- SVG arrows connecting nodes -->
        <svg class="arrows-layer" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
            <!-- Arrow from node 1 to node 2 -->
            <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>
            <!-- Connection lines drawn between node centers -->
            <line x1="380" y1="490" x2="520" y2="490"
                  stroke="var(--arrow-color)" stroke-width="3"
                  stroke-dasharray="8,6" marker-end="url(#arrowhead)" />
            <!-- Repeat for each connection -->
        </svg>

        <!-- Nodes -->
        <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>

        <!-- ... more nodes ... -->
    </div>
</body>
</html>

Layout Algorithms

Left-to-Right (default for 4-8 steps):

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)

Top-to-Bottom (3-5 steps):

- totalHeight = diagramHeight - (2 * margin)
- nodeSpacing = totalHeight / (nodeCount - 1)
- node[i].y = margin + (i * nodeSpacing) - (nodeHeight / 2)
- node[i].x = (diagramWidth / 2) - (nodeWidth / 2)

Snake/Zigzag (6+ steps):

- 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

Arrow Drawing

Arrows are drawn as SVG lines between node edges:

javascript

// 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 };
    }
}

For curved arrows (more FigJam-like), use SVG <path> with cubic bezier:

html

<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)" />

For snake layout vertical connectors between rows:

html

<!-- Vertical connector from end of row 1 to start of row 2 -->
<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)" />

Show full SKILL.md (395 more words)Show less

Branching (Optional)

If the workflow has conditional branches:

Step 3: Qualify leads
  ├── Yes → Step 4a: Send to Smartlead
  └── No → Step 4b: Add to nurture sequence

Render as:

Main node for step 3
Two arrows diverging from step 3
Label on each arrow ("Qualified" / "Not Qualified")
Two destination nodes

html

<!-- Branch label on arrow -->
<text x="650" y="400" font-size="14" fill="var(--text-secondary)"
      font-family="Inter" font-weight="600">Qualified</text>

Phase 4: Screenshot Generation

After generating HTML, automatically capture a screenshot.

Using Playwright

bash

cd /path/to/skills/create-workflow-diagram
node screenshot-diagram.js <diagram-name>

This will:

Open the diagram HTML in a headless browser
Set viewport to the diagram dimensions (e.g., 1920×1080)
Wait for fonts to load
Capture PNG screenshot at 2x resolution
Save to the diagram's exports/ directory

Installation

First time setup:

bash

cd /path/to/skills/create-workflow-diagram
npm install

Phase 5: Delivery

After the screenshot is generated, present to user:

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?

Node Sizing Rules

Keep nodes consistent and readable:

Element	Size
Node width	200-240px
Node min-height	110-140px
Node padding	20-28px
Icon	32-40px
Label font	20-24px, weight 700
Detail font	14-16px, weight 500
Step badge	28-34px circle
Arrow stroke	2-3px
Arrow gap	60-100px between nodes

Content Rules

Each node should have:

Step number — Badge in top-left corner
Icon — Relevant emoji (auto-assigned from keyword)
Label — Action in 2-4 words (e.g., "Find Leads")
Detail — Tool/platform name (e.g., "Apollo") — optional

If a label is too long, truncate or split across lines. Max 2 lines for label.

Troubleshooting

Nodes Overlap

Solution: Increase --node-gap or switch to snake layout for many nodes.

Arrows Misaligned

Solution: Recalculate arrow start/end points based on actual node positions. Use the center of the node edge closest to the target.

Fonts Not Loading

Solution: Add await page.waitForLoadState('networkidle') before screenshot. Increase timeout to 1000ms.

Diagram Too Crowded

Solution: Reduce node count by combining steps, switch to a larger canvas size, or use snake layout.

Style Quick Reference

Preset	Best For	Vibe
FigJam Classic	General workflows	Friendly, colorful
Blueprint	Technical processes	Professional, dark
Minimal White	Documentation	Clean, corporate
Neon Flow	Tech/AI workflows	Futuristic, bold
Pastel Board	Presentations	Soft, approachable

See STYLE_PRESETS.md for complete styling details.

create-html-carousel — For multi-slide LinkedIn carousels
frontend-slides — For full HTML presentations

Example Session Flow

User: "Create a diagram for: Find leads on Apollo → Enrich with Clay → Qualify with Claude → Send to Smartlead"
Skill asks: layout direction, size, style
User picks defaults (left-to-right, landscape, FigJam Classic)
Skill parses 4 nodes with auto-icons
Skill generates HTML diagram with positioned nodes and SVG arrows
Skill runs screenshot script
Skill delivers PNG file
User shares in Slack/docs/LinkedIn

Total time: 2-5 minutes from description to exported diagram.

Files

SKILL.md and 5 other files in skills/design/capabilities/create-workflow-diagram of gooseworks-ai/goose-skills.

SKILL.md
README.md
STYLE_PRESETS.md
package.json
screenshot-diagram.js
skill.meta.json

Open the folder on GitHubat commit c650c6d

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in gooseworks-ai/goose-skills, which our catalogue first saw on October 7, 2026.

criptogus/agent-evolve-network.claude/skills/create-workflow-diagram

Compare with similar skills

Create Workflow Diagram next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Create Workflow Diagram compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Create Workflow Diagram this skillgooseworks-ai/goose-skills	1.2k	1 repos	~4.6k	Automated safety check: Pass	MIT	2 days ago
Architecture DiagramMathews-Tom/armory	329	—	~4.8k	Automated safety check: Pass	MIT	5 days ago
Jira EpicGentleman-Programming/Gentleman-Skills	658	—	~1.9k	Automated safety check: Pass	Apache-2.0	6 mo ago
CLI Hub Matrix Image DesignHKUDS/CLI-Anything	52k	—	~2.4k	Automated safety check: Pass	Apache-2.0	19 days ago
Archify Diagramstt-a1i/archify	82k	—	~2.9k	Automated safety check: Pass	MIT	today
JSON Canvasheyitsnoah/claudesidian	2.6k	18 repos	~3.5k	Automated safety check: Pass	MIT	6 mo ago

Similar skills

Architecture Diagram
Mathews-Tom/armory
Generate architecture diagrams as fully editable SVG with native AWS, Azure, and GCP icons for cloud diagrams, or hand-drawn generic icons for everything else.
329 GitHub stars~4.8k tokensUpdated 5 days ago
DevelopmentAuto-check passed
Jira Epic
Gentleman-Programming/Gentleman-Skills
Creates Jira epics for large features following Prowler's standard format.
658 GitHub stars~1.9k tokensUpdated 6 mo ago
DevelopmentAuto-check passed
CLI Hub Matrix Image Design
HKUDS/CLI-Anything
Capability-based multi-tool matrix for image and graphic design: AI generation, raster/vector editing, UI mockups, diagrams, upscaling, photo library, and publishing.
52k GitHub stars~2.4k tokensUpdated 19 days ago
Frontend & DesignAuto-check passed
Archify Diagrams
tt-a1i/archify
Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.
82k GitHub stars~2.9k tokensUpdated today
DevelopmentAuto-check passed
JSON Canvas
heyitsnoah/claudesidian
Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections.
2.6k GitHub starsUsed in 18 repos~3.5k tokens
DevelopmentAuto-check passed
Diagram Design
cathrynlavery/diagram-design
Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.
49k GitHub starsUsed in 1 repo~7.6k tokens
DevelopmentAuto-check passed

More from gooseworks-ai/goose-skills

All 273 skills in this repo

Reddit Post Finder
gooseworks-ai/goose-skills
Scrape and search Reddit posts using Apify. An agent skill from gooseworks-ai/goose-skills.
1.2k GitHub starsUsed in 1 repo~1.2k tokens
Auto-check passed
Create Image Fal
gooseworks-ai/goose-skills
Generate or edit an image via any FAL image model (nano-banana edit, gpt-image, flux, ...), ROUTED THROUGH THE fal-proxy so it bills the Ads agent.
1.2k GitHub stars~1.3k tokensUpdated today
Auto-check passed
Render Hook Replacement
gooseworks-ai/goose-skills
Replace an existing video's opening with a supplied clip or free kinetic text hook while retaining and verifying every original body frame, audio, captions and ending.
1.2k GitHub stars~2.3k tokensUpdated today
Auto-check passed
Blog Feed Monitor
gooseworks-ai/goose-skills
Scrape blog posts via RSS feeds (free, no API key) with Apify fallback for JS-heavy sites.
1.2k GitHub starsUsed in 1 repo~578 tokens
Auto-check passed
Competitor Post Engagers
gooseworks-ai/goose-skills
Find leads by scraping engagers from a competitor's top LinkedIn posts.
1.2k GitHub starsUsed in 1 repo~1.8k tokens
Auto-check: notes
Render Chatgpt Chat
gooseworks-ai/goose-skills
Assemble a ChatGPT chat-reveal video ad from a thread + timeline JSON — one continuous Playwright recording of a ChatGPT mobile chat (user types with the iOS keyboard up → taps send → keyboard…
1.2k GitHub stars~2.3k tokensUpdated today
Auto-check passed

Works with

Figma

Questions about Create Workflow Diagram

What does Create Workflow Diagram do?

Create FigJam/Miro-style workflow diagrams as high-quality PNG images from plain-text workflow descriptions. Create Workflow Diagram is an agent skill from gooseworks-ai/goose-skills. Create FigJam/Miro-style workflow diagrams as high-quality PNG images from plain-text workflow descriptions.

When should I use Create Workflow Diagram?

Create Workflow Diagram fits situations like: tasks that involve Diagrams.

How do I install Create Workflow Diagram in Claude Code?

Run `npx skills add gooseworks-ai/goose-skills --skill create-workflow-diagram -a claude-code`. Or copy the skill folder (skills/design/capabilities/create-workflow-diagram in gooseworks-ai/goose-skills) into .claude/skills/create-workflow-diagram in your project. Claude Code loads it when a task matches its description.

How do I install Create Workflow Diagram in Codex?

Run `npx skills add gooseworks-ai/goose-skills --skill create-workflow-diagram -a codex`. Or copy the skill folder (skills/design/capabilities/create-workflow-diagram in gooseworks-ai/goose-skills) into .agents/skills/create-workflow-diagram in your project. Codex loads it when a task matches its description.

Can I use Create Workflow Diagram in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add gooseworks-ai/goose-skills --skill create-workflow-diagram -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/create-workflow-diagram, .gemini/skills/create-workflow-diagram, .github/skills/create-workflow-diagram and .opencode/skills/create-workflow-diagram in your project.

What does Create Workflow Diagram need to run?

Going by SKILL.md and its folder, Create Workflow Diagram needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node and npm). Our summary lists: Node.js.

Does Create Workflow Diagram access the network?

SKILL.md names 3 domains. In commands or code: fonts.googleapis.com, fonts.gstatic.com and w3.org; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.

Is Create Workflow Diagram safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Create Workflow Diagram use?

Create Workflow Diagram is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Create Workflow Diagram use?

About 4.6k tokens (SKILL.md is roughly 18k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Create Workflow Diagram?

Skills that share tags, products or a category with Create Workflow Diagram: Architecture Diagram (Mathews-Tom/armory, 329 stars), Jira Epic (Gentleman-Programming/Gentleman-Skills, 658 stars), CLI Hub Matrix Image Design (HKUDS/CLI-Anything, 52k stars) and Archify Diagrams (tt-a1i/archify, 82k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Create Workflow Diagram?

gooseworks-ai (a GitHub organization) maintains it in gooseworks-ai/goose-skills, which has 1,240 GitHub stars. The repository holds 273 skills in this directory. The repository was last updated on October 8, 2026.

Source: gooseworks-ai/goose-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Create Workflow Diagram

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Workflow Diagram Creator

Core Philosophy

Output Specs

When to Use This Skill

Workflow Overview

Phase 1: Content Discovery

Step 1.1: Get Workflow Description

Step 1.2: Parse the Workflow

Phase 2: Style Selection

Style Options

Phase 3: Generate HTML Diagram

File Structure

HTML Architecture

Layout Algorithms

Arrow Drawing

Branching (Optional)

Phase 4: Screenshot Generation

Using Playwright

Installation

Phase 5: Delivery

Node Sizing Rules

Content Rules

Troubleshooting

Nodes Overlap

Arrows Misaligned

Fonts Not Loading

Diagram Too Crowded

Style Quick Reference

Related Skills

Example Session Flow

Files

Used in 1 other repository

Compare with similar skills

Similar skills

More from gooseworks-ai/goose-skills

Related

Questions about Create Workflow Diagram