canvas

Generate flowcharts and diagrams as self-contained HTML files using HTML5 Canvas.

Updated Mar 8, 2026

Search Tags:#html #flowchart #visualization #canvas #mind map #diagram

Ready to run

npx skills add https://github.com/okenwa/claude-skills --skill canvas-okenwa

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/okenwa/claude-skills/tree/main/canvas
Command: npx skills add https://github.com/okenwa/claude-skills --skill canvas-okenwa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps users create visual diagrams, flowcharts, mind maps, and other graphical representations directly from text descriptions or structured data.

Core Features & Use Cases

Diagram Generation: Create various diagram types like flowcharts, mind maps, org charts, and timelines.
HTML Output: Generates self-contained HTML files with embedded JavaScript for immediate browser rendering.
Use Case: Visualize a complex business process with a flowchart or brainstorm ideas using a mind map.

Quick Start

Use the canvas skill to draw a flowchart representing a user login process.

Frequently Asked Questions about canvas

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

FAQPage Schema

How do I generate a flowchart from text and view it in a browser?▼

To generate a flowchart from text, provide a text description or structured data to create an HTML file. This file contains embedded JavaScript and HTML5 Canvas elements, rendering the flowchart immediately in any browser without external dependencies.

Can I create a mind map using HTML5 Canvas and JavaScript?▼

Yes, you can create a mind map using HTML5 Canvas and JavaScript. The process outputs a self-contained HTML file that leverages Canvas to draw interactive mind maps, making it renderable directly in web browsers without needing extra software.

What types of visual diagrams can I output besides flowcharts?▼

Besides flowcharts, you can output visual diagrams such as mind maps, org charts, and timelines. These are generated as self-contained HTML files with embedded JavaScript, allowing immediate browser rendering of various graphical representations.

Do I need to install any dependencies to render HTML5 Canvas diagrams?▼

No dependencies are required to render HTML5 Canvas diagrams. The process generates self-contained HTML files with embedded JavaScript, meaning any standard web browser can render the visualizations directly without installing external libraries.

What is the best way to visualize a business process as an HTML file?▼

The best way to visualize a business process as an HTML file is by providing a text description of the process to generate a flowchart. The output is a self-contained HTML file utilizing HTML5 Canvas and JavaScript for immediate browser rendering.

Can I use structured data to create org charts for web browsers?▼

Yes, you can use structured data to create org charts for web browsers. The generation process converts the data into a self-contained HTML file with embedded JavaScript and HTML5 Canvas, rendering the org chart directly in any browser environment.