CommunityImagegithub.com

coleam00/excalidraw-diagram

Crée des fichiers JSON de diagrammes Excalidraw pour des arguments visuels. Utilisez quand l'utilisateur souhaite visualiser des workflows, architectures ou concepts.

Qu'est-ce que excalidraw-diagram ?

Cette compétence permet de générer des fichiers JSON de diagrammes Excalidraw à partir de descriptions textuelles, facilitant la création d'arguments visuels pour des workflows, architectures ou concepts complexes. Elle est utile pour les développeurs, architectes et toute personne souhaitant représenter graphiquement des idées techniques sans effort manuel. Supportée par des plateformes d'agents IA comme Claude Code, Cursor ou Codex, elle convertit une spécification textuelle en un diagramme structuré exploitable dans Excalidraw. En analysant la demande de l'utilisateur, le modèle génère un fichier JSON respectant le format Excalidraw, incluant des éléments comme des formes, du texte, des connecteurs et des flèches, le tout organisé de manière logique pour illustrer le concept visé. Cette approche automatisée accélère la communication visuelle et la documentation technique.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/coleam00/excalidraw-diagram-skill/tree/main/skills/excalidraw-diagram

Installed? Explore more Image skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Que fait excalidraw-diagram ?

Crée des fichiers JSON de diagrammes Excalidraw qui font des arguments visuels. Utilisez quand l'utilisateur souhaite visualiser des workflows, architectures ou concepts.

Description

Cette compétence génère automatiquement des diagrammes Excalidraw à partir de descriptions textuelles. Plutôt que de passer du temps à dessiner manuellement des diagrammes dans Excalidraw, vous pouvez décrire ce que vous voulez visualiser et la compétence produira un fichier JSON prêt à être importé.

Utilisation

  1. Décrivez le workflow, l'architecture ou le concept que vous souhaitez visualiser.
  2. La compétence générera un fichier JSON au format Excalidraw.
  3. Importez le fichier dans Excalidraw (excalidraw.com ou application de bureau).

Exemple

Demande : "Crée un diagramme montrant un utilisateur interagissant avec une application web qui communique avec une API et une base de données."

Résultat : Un fichier JSON Excalidraw contenant des formes pour l'utilisateur, l'application web, l'API et la base de données, avec des flèches indiquant les flux de données.

Structure du fichier généré

Le fichier JSON suit exactement la structure d'un fichier de scène Excalidraw standard :

  • type : Type d'élément (rectangle, diamant, texte, flèche, etc.)
  • x, y : Coordonnées de position
  • width, height : Dimensions de l'élément
  • strokeColor : Couleur du trait
  • backgroundColor : Couleur de fond
  • fillStyle : Style de remplissage (solide, hachuré, etc.)
  • strokeWidth : Largeur du trait
  • roughness : Niveau de rugosité du dessin à main levée
  • opacity : Opacité
  • points : Points de connexion pour les flèches et les lignes
  • text : Contenu textuel pour les éléments texte
  • fontSize : Taille de police
  • fontFamily : Famille de police

Avantages

  • Gain de temps : Créez des diagrammes complexes en secondes
  • Cohérence : Format standardisé pour tous les diagrammes
  • Modifiable : Les fichiers générés peuvent être édités manuellement dans Excalidraw
  • Argument visuel : Aide à communiquer des idées techniques de manière claire et persuasive

Plateformes supportées

  • Claude Code
  • Cursor
  • Codex
  • Tout agent IA capable d'écrire des fichiers JSON

Licence

MIT

Skills associés

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More Image skills