Notre avis

Cette compétence génère des diagrammes, organigrammes, mind maps et dessins en utilisant HTML5 Canvas, produisant un fichier HTML autonome.

Points forts

Fichier HTML auto-contenu sans dépendances externes
Rendu immédiat dans n'importe quel navigateur
Supporte plusieurs types de diagrammes (organigrammes, mind maps, organigrammes hiérarchiques, etc.)
Code clair avec fonctions d'aide et palette de couleurs prédéfinie

Limites

Nécessite des connaissances en JavaScript pour personnaliser
Graphismes limités au Canvas 2D (pas de 3D ou d'interactivité avancée)
Peut devenir lourd pour des diagrammes très complexes

Quand l'utiliser

Utilisez cette compétence lorsque vous avez besoin de créer rapidement un diagramme visuel simple à partager sans outil externe.

Quand l'éviter

Évitez-la si vous nécessitez des graphiques vectoriels éditables, des diagrammes interactifs ou une intégration avec des outils de collaboration.

Exemples

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

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

Save Location

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

Créateur de diagrammes Canvas

Recommandé pour