Skills Guide

Canvas Diagram Creator

VerifiedSafe

Generate HTML5 Canvas diagrams: flowcharts, mind maps, org charts, network diagrams, timelines, and simple drawings. Self-contained HTML output.

Download and use
Sby Skills Guide Bot
DevelopmentIntermediate
7/27/2026
Claude CodeCursorWindsurf
#canvas#diagrams#visualization#html5#flowcharts

Recommended for

Backend developerClaude CodeCode reviewFrontend developerCursorFullstack developer

Automated summary

This skill generates visual diagrams, flowcharts, mind maps, and drawings using HTML5 Canvas, producing a self-contained HTML file.

Strengths

  • Self-contained HTML file with no external dependencies
  • Renders immediately in any browser
  • Supports multiple diagram types (flowcharts, mind maps, org charts, etc.)
  • Clear code with helper functions and predefined color palette

Limitations

  • Requires JavaScript knowledge for customization
  • Limited to 2D Canvas graphics (no 3D or advanced interactivity)
  • Can become cluttered for very complex diagrams
When to use it

Use this skill when you need to quickly create a simple visual diagram to share without external tools.

When not to use it

Avoid it if you need editable vector graphics, interactive diagrams, or integration with collaboration tools.

Security analysis

Safe
Quality score85/100

The skill generates standalone HTML/JS for canvas diagrams. It does not execute any system commands, access external resources, or manipulate files beyond saving the generated HTML to a specified workspace path. The JavaScript is client-side and benign. There is no risk of data exfiltration, system damage, or safety bypass.

No concerns found

How this analysis is made

Examples

Flowchart for user login process
Create a flowchart for a user login process: start, enter username/password, validate credentials, if valid show dashboard else show error. Use the canvas skill.
Mind map for project ideas
Draw a mind map for brainstorming project ideas. Central node 'Project X', branches: Features, Marketing, Timeline, Budget. Use colors and labels.
Network topology diagram
Visualize a simple network topology with a central server, two workstations, and a printer connected via a switch. Use the canvas skill to draw it.

Canvas Skill

Create visual diagrams, flowcharts, mind maps, and drawings using HTML5 Canvas.

Triggers

  • "draw", "diagram", "flowchart", "mindmap", "sketch", "visualize", "chart", "canvas"

Capabilities

Diagram Types

  • Flowcharts: Process flows, decision trees, workflows
  • Mind Maps: Idea mapping, brainstorming, concept visualization
  • Org Charts: Team structures, hierarchies
  • Network Diagrams: System architecture, connections
  • Timelines: Project schedules, event sequences
  • Simple Drawings: Shapes, arrows, annotations

Output

Generate standalone HTML files with embedded Canvas JavaScript that:

  • Render immediately in any browser
  • Are self-contained (no external dependencies)
  • Support responsive sizing
  • Include clear labels and colors

Template

<!DOCTYPE html>
<html>
<head>
  <title>Canvas Diagram</title>
  <style>
    body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f5f5f5; }
    canvas { background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
  </style>
</head>
<body>
  <canvas id="canvas" width="800" height="600"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Helper functions
    function drawBox(x, y, w, h, text, color = '#4A90D9') {
      ctx.fillStyle = color;
      ctx.roundRect(x, y, w, h, 8);
      ctx.fill();
      ctx.fillStyle = 'white';
      ctx.font = 'bold 14px Arial';
      ctx.textAlign = 'center';
      ctx.fillText(text, x + w/2, y + h/2 + 5);
    }

    function drawArrow(fromX, fromY, toX, toY, color = '#333') {
      ctx.strokeStyle = color;
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(fromX, fromY);
      ctx.lineTo(toX, toY);
      ctx.stroke();
      // Arrowhead
      const angle = Math.atan2(toY - fromY, toX - fromX);
      ctx.beginPath();
      ctx.moveTo(toX, toY);
      ctx.lineTo(toX - 10 * Math.cos(angle - Math.PI/6), toY - 10 * Math.sin(angle - Math.PI/6));
      ctx.lineTo(toX - 10 * Math.cos(angle + Math.PI/6), toY - 10 * Math.sin(angle + Math.PI/6));
      ctx.closePath();
      ctx.fillStyle = color;
      ctx.fill();
    }

    function drawCircle(x, y, r, text, color = '#27AE60') {
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.arc(x, y, r, 0, Math.PI * 2);
      ctx.fill();
      ctx.fillStyle = 'white';
      ctx.font = 'bold 12px Arial';
      ctx.textAlign = 'center';
      ctx.fillText(text, x, y + 4);
    }

    function drawDiamond(x, y, size, text, color = '#E67E22') {
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.moveTo(x, y - size);
      ctx.lineTo(x + size, y);
      ctx.lineTo(x, y + size);
      ctx.lineTo(x - size, y);
      ctx.closePath();
      ctx.fill();
      ctx.fillStyle = 'white';
      ctx.font = 'bold 11px Arial';
      ctx.textAlign = 'center';
      ctx.fillText(text, x, y + 4);
    }

    // DRAW YOUR DIAGRAM HERE
    // Example:
    // drawBox(100, 100, 120, 50, 'Start');
    // drawArrow(220, 125, 280, 125);
    // drawDiamond(340, 125, 40, 'Check');

  </script>
</body>
</html>

Colors

| Use | Color | |-----|-------| | Primary/Process | #4A90D9 (blue) | | Success/Start | #27AE60 (green) | | Warning/Decision | #E67E22 (orange) | | Error/Stop | #E74C3C (red) | | Neutral | #95A5A6 (gray) | | Accent | #9B59B6 (purple) |

Instructions

  1. Understand what the user wants to visualize
  2. Choose appropriate diagram type
  3. Plan layout (spacing, alignment)
  4. Generate complete HTML file
  5. Save to workspace and provide path
  6. Optionally open in browser for preview

Save Location

Save diagrams to: C:\Users\okenw\OneDrive\Documents\claudeclaw\workspace\canvas\

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/canvas-diagram-creator-ms2s7c78/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/canvas-diagram-creator-ms2s7c78' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/canvas-diagram-creator-ms2s7c78/download' --output '.skill-downloads/canvas-diagram-creator-ms2s7c78/SKILL.md.part' && mv '.skill-downloads/canvas-diagram-creator-ms2s7c78/SKILL.md.part' '.skill-downloads/canvas-diagram-creator-ms2s7c78/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

This file does not provide a usable name/description header for this native procedure. It remains available to download and inspect; use the manual method below.

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/canvas-diagram-creator-ms2s7c78/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills

React Hook Form Best Practices

Development

Master React Hook Form: avoid anti-patterns, manage subscriptions, and handle reset, dirty state, and controlled inputs correctly.

Claude CodeCursorWindsurf+2intermediateSafe 108,623
Skills Guide Bot

Emotion to Mantine Migration

Development

Migrate Emotion styled-components to Mantine components with style props and CSS modules. Use when converting .styled.tsx files or removing @emotion imports.

Claude CodeCursorWindsurf+1intermediateSafe 48,981
Skills Guide Bot

Scope Creep Detector

Development

Analyzes git diffs against a stated intent to detect scope creep, unrelated files, broad PRs, and oversized changes, then suggests keep, split, or justify actions.

Claude CodeCursorCodexintermediateSafe 135,015
Skills Guide Bot