create-workflow-diagram

Installation
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)
Related skills
Installs
13
GitHub Stars
673
First Seen
Mar 14, 2026