canvas-a2ui

Name: canvas-a2ui
Availability: InStock
Author: winsorllc

Create and capture HTML5 Canvas diagrams and charts via Puppeteer.

1|Updated Feb 25, 2026

Search Tags:#drawing #visualization #canvas #screenshot #diagram #visual #a2ui

Ready to run

npx skills add https://github.com/winsorllc/upgraded-carnival --skill canvas-a2ui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: canvas-a2ui
Source: https://github.com/winsorllc/upgraded-carnival/tree/main/.pi/skills/canvas-a2ui
Command: npx skills add https://github.com/winsorllc/upgraded-carnival --skill canvas-a2ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides agents with a visual workspace to programmatically create, manipulate, and capture visual content, enabling the generation of diagrams, charts, and visualizations.

Core Features & Use Cases

Diagram Generation: Create flowcharts, architecture diagrams, and mind maps.
Data Visualization: Generate charts and graphs from data.
Visual Content Creation: Draw mockups, annotate images, and create interactive visuals.
Use Case: An agent needs to create a system architecture diagram to explain a new feature. It uses canvas_diagram to define components and connections, then canvas_screenshot to save the output as a PNG.

Quick Start

Use canvas_create to start a new canvas, then canvas_draw to add elements, and finally canvas_screenshot to save the result.

Frequently Asked Questions about canvas-a2ui

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

FAQPage Schema

How do I generate diagrams and visualizations programmatically using an AI agent?▼

To generate diagrams and visualizations programmatically, an agent can use an HTML5 Canvas workspace with a headless browser backend to draw components, define connections, and capture the output as a PNG screenshot.

Can I use Puppeteer to automate screenshot capture of agent-generated canvas drawings?▼

Yes, Puppeteer provides the headless browser automation required to render the HTML5 Canvas drawings and capture screenshots, allowing agents to save visual content like architecture diagrams as image files.

What is the best way to create a system architecture diagram from code?▼

The best way to create a system architecture diagram from code is to use an A2UI-style communication protocol to define components and connections on a canvas, then save the rendered visual as a PNG.

Do I need Node.js to run a headless browser canvas workspace for agents?▼

Yes, you need Node.js installed to run the Puppeteer dependency, which provides the headless browser environment required to execute the HTML5 Canvas operations and capture screenshots.

What types of visual content can an agent create with a headless browser canvas?▼

With a headless browser canvas, an agent can create flowcharts, mind maps, data charts, mockups, annotated images, and interactive visualizations by programmatically drawing elements and capturing them as image files.