Agent skill · Code Review & Quality

create-workflow-diagram

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.

gooseworks-aigithub.com/gooseworks-aiGitHub ↗
claude-codecodexcursorships scriptsMIT
Install
npx skills add gooseworks-ai/goose-skills --skill create-workflow-diagram --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 6
SKILL.md size: 18 KB
Bundled scripts: yes
Path: skills/design/capabilities/create-workflow-diagram/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 1,091
Language: Python

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

From the SKILL.md

# 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 1. **Visual Clarity** — Each step is a distinct node with clear connections 2. **FigJam/Miro Aesthetic** — Colorful, rounded, friendly diagram style 3. **Automated Export** — Generate HTML → Screenshot → PNG ready to share 4. **Smart Layout** — Automatically arranges nodes in logical flow patterns 5. **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

What's inside
Steps it walks through
  1. Core Philosophy
  2. Output Specs
  3. When to Use This Skill
  4. Workflow Overview
  5. Phase 1: Content Discovery
  6. Step 1.1: Get Workflow Description
  7. Step 1.2: Parse the Workflow
  8. Phase 2: Style Selection
  9. Style Options
  10. Phase 3: Generate HTML Diagram
  11. File Structure
  12. HTML Architecture
  13. Layout Algorithms
  14. Arrow Drawing
Ships with 5 files
  • README.md
  • STYLE_PRESETS.md
  • package.json
  • screenshot-diagram.js
  • skill.meta.json
Commands it runs
cd /path/to/skills/create-workflow-diagram
node screenshot-diagram.js <diagram-name>
npm install
More from goose-skills
All skills →
create-vo-elevenlabsGenerate a voiceover (VO) clip via ElevenLabs text-to-speech, ROUTED THROUGH THE elevenlabs-proxy…Content & Marketingcreate-image-falGenerate or edit an image via any FAL image model (nano-banana edit, gpt-image, flux, ...), ROUTED…Content & Marketingcreate-image-gpt-image-falGenerate a single photoreal or designed image with OpenAI gpt-image via fal.ai. Supports…Design & Presentationcreate-music-elevenlabsGenerate an instrumental music bed via ElevenLabs Music, ROUTED THROUGH THE elevenlabs-proxy so it…Content & Marketingcreate-video-falImage-to-video (or text-to-video) via any FAL video model (Kling, Seedance, Veo), ROUTED THROUGH…Content & Marketinggoogle-ad-scraperScrape competitor ads from Google Ads by domain. Returns ad creatives, formats, and campaign…Content & Marketing
About this skill
What does the create-workflow-diagram skill do?

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.

How do I install it?

Run `npx skills add gooseworks-ai/goose-skills --skill create-workflow-diagram --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From gooseworks-ai/goose-skills, a repository with 1,091 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going
All skills →
The full catalog, by category and by tool.
Open Source Radar →
The repositories these skills come from, watched daily.
The people behind them →
Makers and builders across the ecosystem.