skillfed

create-workflow-diagram

Transform workflow steps into professional PNG diagrams with connected nodes and directional arrows. Describe your process in plain text, choose a layout direction and visual style, and get a ready-to-share diagram in landscape, square, or social card formats.

Create Workflow Diagram converts plain-text workflow descriptions into styled PNG diagrams with connected nodes and arrows.

AI-generated summary based on this skill's SKILL.md

1,062 194 MIT updated by gooseworks-ai

Install

gooseworks-ai/goose-skills/create-workflow-diagram · repository language: Python

CLI (skillfed)coming soon
git clone https://github.com/gooseworks-ai/goose-skills
cp -r goose-skills/skills/design/capabilities/create-workflow-diagram ~/.claude/skills/create-workflow-diagram

Frequently asked questions

AI-generated answers based on this skill's SKILL.md and metadata

How do I create a workflow diagram from text with create-workflow-diagram?

create-workflow-diagram transforms your plain-text workflow descriptions into professional PNG diagrams. Simply describe your process steps in natural language, specify your preferred layout direction and visual style, and the tool generates a polished diagram with connected nodes and directional arrows ready to share.

Can create-workflow-diagram convert my workflow to a PNG image?

Yes. create-workflow-diagram converts workflow descriptions directly to high-quality PNG images. You can export in multiple formats including landscape, square, or social card dimensions, making your diagrams instantly shareable across presentations, documentation, and social media.

Does create-workflow-diagram make FigJam or Miro-style diagrams?

create-workflow-diagram generates FigJam/Miro-style process diagrams with connected nodes and arrows. The tool automatically lays out your workflow steps with professional styling, giving you collaborative whiteboard aesthetics without requiring those platforms.

What formats and dimensions does create-workflow-diagram support?

create-workflow-diagram exports workflow diagrams in landscape, square, and social card formats as PNG files. You can customize visual styles and dimensions to match your presentation needs, documentation standards, or social media requirements.

Can I visualize multi-step processes with customizable styles?

Yes. create-workflow-diagram visualizes multi-step processes with fully customizable styles and dimensions. Describe your workflow steps, choose your layout preferences, and the tool automatically arranges and exports everything as a professional, ready-to-share diagram.

Is create-workflow-diagram an automated flowchart creation tool?

create-workflow-diagram is an automated workflow diagram generator that creates flowcharts from plain-text descriptions. It handles layout, node connection, arrow placement, and PNG export automatically, eliminating manual diagram design work.

SKILL.md

rendered from the published skill — quoted content, verbatim

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:

(truncated - see the full file via the links below)

Read as markdown · JSON record · Browse the source repository

File tree — 6 files
skills/design/capabilities/create-workflow-diagram/README.md
skills/design/capabilities/create-workflow-diagram/SKILL.md
skills/design/capabilities/create-workflow-diagram/STYLE_PRESETS.md
skills/design/capabilities/create-workflow-diagram/package.json
skills/design/capabilities/create-workflow-diagram/screenshot-diagram.js
skills/design/capabilities/create-workflow-diagram/skill.meta.json

Related skills

Tags

text-to-visual process-mapping diagram-export node-based-flow automated-rendering presentation-ready workflow-visualization html-to-png step-sequencing