skills.rest
gooseworks-ai
gooseworks-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

create-workflow-diagram

Convert plain-text workflow descriptions into HTML diagrams with SVG arrows and export PNGs.

1.1k|200|Updated Mar 2, 2026
Search Tags:#automation#workflow#png#visualization#playwright#svg#diagram
One-click install
npx skills add https://github.com/gooseworks-ai/goose-skills --skill create-workflow-diagram-gooseworks-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-workflow-diagram
Source: https://github.com/gooseworks-ai/goose-skills/tree/main/skills/capabilities/create-workflow-diagram
Command: npx skills add https://github.com/gooseworks-ai/goose-skills --skill create-workflow-diagram-gooseworks-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts plain-text workflow descriptions into polished visual diagrams, saving time and reducing miscommunication when sharing processes.

Core Features & Use Cases

  • Parses plain-text workflow descriptions into structured nodes with labels and details.
  • Generates positioned HTML diagrams with SVG arrows and optional icons.
  • Screenshots the diagram as a high-quality PNG for sharing in docs, presentations, and social posts.
  • Supports multiple layouts (horizontal, vertical, snake) and style presets for different aesthetics.

Quick Start

Describe your workflow in plain text, choose a style and size, and the tool will output a PNG diagram.

Frequently Asked Questions about create-workflow-diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert plain text into a PNG workflow diagram?▼

A workflow diagram is generated by parsing plain-text process descriptions into structured nodes, positioning them in an HTML layout with SVG arrows, and exporting a high-quality PNG via Playwright automation.

Can I visualize a software workflow with multiple layout styles?▼

You can visualize a software workflow with multiple layout presets including horizontal, vertical, and snake layouts, providing different aesthetics for your process diagrams.

Does the diagram export process require Playwright?▼

The PNG export process uses Playwright to automate screenshotting the rendered HTML diagram, ensuring high-quality image output for docs and presentations.

What is the best way to generate an SVG diagram from text for a business process?▼

Generating an SVG diagram from text for a business process is best handled by parsing plain-text steps into positioned nodes, rendering SVG arrows, and exporting a shareable PNG.

Do I need to format my team procedures in a specific syntax to create a visual diagram?▼

No specific syntax is required to create a visual diagram; the tool parses plain-text descriptions of team procedures into structured nodes with labels and details automatically.

Related Skills

Explore More Design & Creative Skills→
jjub0217jjub0217

study-roadmap

Analyze job postings and resumes to generate gap analysis and dual study roadmaps.

Community
Intermediate
odylithodylith
34

odylith-atlas-render

Render Atlas diagrams from Yardl or other sources into Minecraft's Yak? No, Yak is not involved. Actually, reprocess the request: convert Mermaid catalog data to Atlas diagrams and export them as SVG or PNG files for use in documentation and presentations.

Official
Intermediate
Estudio-Site-LtdaEstudio-Site-Ltda

Flowchart Creator

Generate interactive standalone HTML flowcharts with a blackboard aesthetic.

Official
Intermediate
Umbral-BotUmbral-Bot

svgwrite

Generate editable SVG files programmatically with the svgwrite Python library.

Official
Intermediate