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.
SkillScore68Maintained
Automatic
◆Design & UX Review pack
Last verified 8/16/2026
What it changes
Passed 15 of 22 test cases with the skill, and 13 of 22 without it.
Without skill59%
With skill68%
Checks it passed that the model alone missed
Requires a step badge on the node container.
Declines generating a multi-branch flowchart.
Recommends using draw.io for multi-branch flowcharts.
and 2 more in the full report
4 fixed11 passed either way5 still failing2 broke
Pass-rate lift
+9 pp
Tokens
+203%
Agent turns
0%
Response time
-24%
Model gemini-3.6-flashMeasured 8/16/2026v115 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 4
Prompt
When generating an individual workflow node element in HTML, what four structural content components must be included inside the node container?
What was checked, without and with the skill
Checked
Without skill
With skill
Requires a step badge on the node container.
Missed
Passed
Requires an action label on the node container.
Passed
Passed
case-20 · gemini-3.6-flash · 8/16/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md613 linessingle file
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