visual-mockup

Generate interactive and static visual mockups for diagrams and charts.

19|5|Updated Jan 4, 2026

Search Tags:#layout #visualization #prototype #matplotlib #diagram #mockup #fletcher

Ready to run

npx skills add https://github.com/edwinhu/workflows --skill visual-mockup

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-mockup
Source: https://github.com/edwinhu/workflows/tree/main/skills/visual-mockup
Command: npx skills add https://github.com/edwinhu/workflows --skill visual-mockup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill dramatically speeds up diagram creation by allowing users to visually mock up layouts before writing complex code, preventing wasted time on incorrect spatial arrangements.

Core Features & Use Cases

Interactive Mockups: Drag-and-drop interface for positioning nodes, edges, and regions.
Matplotlib Previews: Generate static visual sketches for charts and complex layouts.
Use Case: Before coding a complex 7-phase development diagram with multiple regions, use the interactive mode to arrange all the boxes and arrows, confirm the flow with your team, and then export the coordinates directly into your diagram code.

Quick Start

Use the visual-mockup skill to create an interactive diagram layout.

Frequently Asked Questions about visual-mockup

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

FAQPage Schema

How do I create a visual mockup for a diagram before coding the layout?▼

You can create a visual mockup using an interactive drag-and-drop interface to position nodes, edges, and regions, generating HTML/SVG layouts to confirm spatial arrangements before writing diagram code.

Can I generate static chart previews using Matplotlib for complex layouts?▼

Yes, you can generate static Matplotlib previews to sketch data-driven charts and complex layouts, providing rapid visual feedback for data representation without writing full scripts.

What is the best way to arrange a multi-phase development diagram visually?▼

The best way to arrange a multi-phase development diagram is using the interactive mockup mode to position boxes and arrows, allowing your team to confirm the flow before exporting coordinates.

Does this visual mockup tool support exporting node-edge diagrams to JSON?▼

Yes, the tool supports node-edge diagrams and allows you to export the confirmed visual layout coordinates directly into Fletcher JSON format for downstream coding.

Why should I use a visual layout tool instead of coding diagrams directly?▼

You should use a visual layout tool to prevent wasted time on incorrect spatial arrangements, as it provides a rapid visual feedback loop that dramatically speeds up iteration cycles for diagram coding.