98.8K+Télécharger
Aller au guide d’utilisation
diagrampar Garry Tan

Diagram Skill.

Un skill Claude Code et Codex pour diagrammes et graphiques : transforme une description ou une source Mermaid en fichier Excalidraw éditable avec rendu SVG et PNG.

  • Diagrammes et visualisation de données
  • Diagram
Télécharger OpenDesignVoir le guide d'utilisation
garrytan/gstack · diagram/SKILL.mdSKILL.md
--- name: diagram description: Turn an English description (or mermaid source) into a diagram triplet: the source, an editable .excalidraw file you can open on excalidraw.com, and rendered SVG + PNG. (gstack) --- ## When to invoke this skill ## Step 1 — Author the diagram ## Step 2 — Stage the render bundle (once per session) ## Step 3 — Render the triplet ## Step 4 — Show and deliver ## Rules
Préambule et titres de section lus depuis le fichier source le 2026-09-14 · 16 276 caractères au total

01 Ce qu'il fait

Ce que fait le Skill de diagramme dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Convertit une description en anglais ou une source Mermaid en un triplet de diagramme : la source Mermaid (.mmd), un fichier Excalidraw éditable (.excalidraw) qui s'ouvre sur excalidraw.com, et des rendus SVG + PNG. Le rendu est entièrement hors ligne via un serveur loopback local — utilise le navigateur Aside lorsqu'il est en cours d'exécution, sinon le propre navigateur headless de gstack.

Les organigrammes (graph LR/TD) et les diagrammes de séquence produisent des scènes Excalidraw entièrement éditables avec de vraies boîtes, flèches et textes. Les autres types de diagrammes Mermaid (state, class, gantt) sont rendus en SVG/PNG et exportés comme un seul élément image dans le fichier Excalidraw — déplaçable et annotable, mais pas éditable au niveau des éléments. La source Mermaid reste la seule source de vérité pour itérer.

Ce qu'il produit

  • Un fichier source Mermaid (.mmd) qui sert de format d'échange adapté aux LLM et de source de vérité unique.
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Rédiger la Source Mermaid

    Écrivez du Mermaid correspondant à la demande de l'utilisateur. Préférez graph LR pour les pipelines/flux et graph TD pour les hiérarchies.

  2. 02
    Mettre en Scène le Bundle de Rendu Une Fois par Session

    Placez diagram-render.html dans le répertoire de mise en scène du rendu de gstack sous ${TMPDIR:-/tmp}/gstack-render, adressé par contenu via le SHA du bundle.

  3. 03
    Rendre le Triplet avec une Seule Commande

    Écrivez le fichier .mmd, puis exécutez gstack-render avec le bundle mis en scène.

  4. 04
    Afficher et Livrer

    Lire le PNG en ligne pour que l'utilisateur voie le diagramme. Lister les trois chemins et noter que le fichier .excalidraw s'ouvre sur excalidraw.com pour édition.

02 Trouvez celui qui vous convient

Quand utiliser le skill diagram

Utilisez le skill diagram dans Claude Code ou Codex lorsque le travail concerne des diagrammes et graphiques de ce type. L'adéquation et les limites ci-dessous sont tirées du fichier propre au skill.

Bon choix

  • L'utilisateur demande de créer un diagramme, dessiner l'architecture, créer un organigramme, diagrammer ceci, ou visualiser un flux.
  • Produire des diagrammes vectoriels nets pour la documentation, accompagnés de sorties raster pour le chat, les issues ou les README.
  • Générer un fichier Excalidraw modifiable que l'utilisateur peut ouvrir sur excalidraw.com, déplacer les boîtes et continuer à travailler.

Connaître les limites

  • Diagrammes avec plus de 15 nœuds dans une seule scène — diviser en plusieurs diagrammes pour la lisibilité.
  • Les types Mermaid state, class, gantt et autres non-organigramme/non-séquence produisent un fichier Excalidraw déplaçable mais non modifiable élément par élément.

Quoi fournir

  • Description en anglais ou source MermaidL'utilisateur fournit une description du diagramme à créer, ou fournit une source Mermaid existante à rendre.

03 Dans le skill

Règles que le skill diagram donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

  1. Ne jamais livrer sans rendu

    Un fichier .mmd seul n'est pas un diagramme. Si le rendu est impossible (bundle manquant ou aucun navigateur disponible), signaler le blocage et arrêter.

  2. Les organigrammes et diagrammes de séquence sont entièrement modifiables

    Les organigrammes (graph LR/TD) et les diagrammes de séquence se convertissent en scènes Excalidraw entièrement modifiables avec de vraies boîtes, flèches et textes. Les autres types Mermaid s'exportent comme un seul élément image.

  3. Encoder la source en base64 pour le transport navigateur

    Transmettre la source Mermaid à la page de rendu via base64 pour éviter d'interpréter les backticks, ${ } et barres obliques inverses dans la source. Ne jamais injecter le contenu du fichier dans un template literal JS.

  4. Le répertoire de sortie suit le contexte Git

    Écrire dans ./diagrams/ lorsque le cwd est un dépôt git (artefacts que l'utilisateur peut commiter), sinon dans /tmp/gstack-diagrams/. Dériver le slug du sujet en kebab-case, 40 caractères max.

  5. La largeur du PNG est fixée à 1950px

    Le PNG rasterisé fait toujours 1950 pixels de large, équivalent à 300dpi pour un placement de 6,5 pouces.

  6. Le rendu est entièrement hors ligne

    Le bundle diagram-render est autonome et servi depuis loopback. Aucun CDN, aucun réseau.

  7. Refaire le rendu d'un Excalidraw édité sans toucher à Mermaid

    Lorsque l'utilisateur édite un fichier .excalidraw et souhaite refaire le rendu, charger le fichier de scène et exporter directement en SVG/PNG — ne pas régénérer depuis la source Mermaid.

  8. Préférer intégrer .mmd pour les cibles PDF

    Pour les diagrammes destinés à un PDF, rappeler à l'utilisateur que make-pdf rend nativement les blocs Mermaid — intégrer le .mmd dans le markdown est préférable à intégrer le PNG.

04 Mettez-le en pratique

Installer diagram dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter diagram à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal
npx skills add https://github.com/garrytan/gstack --skill diagram

Formulaire CLI générique skills pour diagram/SKILL.md ; le dépôt peut documenter son propre chemin.

Confier à la skill une première tâche de diagrammes et graphiques

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt
Create a flowchart showing the build pipeline for [my TypeScript project]. Include lint, test, build, and deploy stages with their dependencies. Use graph LR layout and output to ./diagrams/.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

  • Lisez la sortie PNG en ligne pour vérifier que le diagramme s'est correctement rendu et correspond à la demande de l'utilisateur.
  • Vérifiez la sortie de gstack-render pour des lignes ERROR: indiquant des erreurs de parsing Mermaid — corrigez le .mmd et relancez si présentes.
  • Inspectez la sortie PAGE_ERRORS pour 'Error processing Mermaid diagram' afin de confirmer quand le convertisseur Excalidraw est retombé sur un unique élément image.
  • Vérifiez que les trois lignes OK <path> apparaissent dans la sortie de gstack-render, confirmant que les fichiers SVG, PNG et Excalidraw ont été écrits.
  • Pour les re-rendus Excalidraw modifiés, ignorez le WorkerInTheMainChunkError bénin dans PAGE_ERRORS — le SVG/PNG sont corrects.

Dans OpenDesign importez diagram depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesignLire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author
Garry Tan
Repository
github.com/garrytan/gstack Branche main
Fichier du skill
diagram/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 71f6048
License
MIT Tiré de LICENSE.
Étoiles du dépôt
132 921 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt garrytan/gstack, qui contient 7 skills de ce catalogue. Il ne s'agit pas d'une note ni d'un compteur d'utilisation pour diagram.
Vérifié par OpenDesign
2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. Quand invoquer ce skillÀ utiliser pour les demandes de diagramme, d'architecture, d'organigramme ou de visualisation ; SVG/PNG utilisent le style Mermaid, Excalidraw a une esthétique dessinée à la main.
  2. Étape 1 — Rédiger le diagrammeÉcrivez la source Mermaid ; les organigrammes et diagrammes de séquence deviennent des Excalidraw entièrement modifiables, les autres types s'exportent en image unique.
  3. Étape 2 — Préparer le bundle de rendu (une fois par session)Copiez diagram-render.html vers le répertoire de staging de rendu de gstack, adressé par contenu via SHA, sans jamais écraser les sessions concurrentes.
  4. Étape 3 — Rendre le tripletÉcrivez le .mmd, exécutez gstack-render avec la source encodée en base64, générez SVG/PNG/Excalidraw ; vérifiez les erreurs de parsing et PAGE_ERRORS.
  5. Étape 4 — Afficher et livrerLisez le PNG en ligne, listez les chemins du triplet, notez la modifiabilité d'Excalidraw ; pour des changements, modifiez le .mmd et relancez le rendu.
  6. RèglesNe livrez jamais sans rendu ; pour les cibles PDF, rappelez à l'utilisateur que make-pdf rend nativement les blocs Mermaid.
  7. Statut d'achèvementDONE quand le triplet est livré ; BLOCKED si le bundle est manquant ou aucun navigateur n'est disponible.
Description du skill lui-même
Transforme une description en anglais (ou une source mermaid) en un triplet de diagrammes : la source, un fichier .excalidraw modifiable que vous pouvez ouvrir sur excalidraw.com, et le rendu SVG + PNG. (gstack)

Description de l'en-tête du fichier SKILL.md. Le fichier complet fait environ 16 276 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill diagram

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Que se passe-t-il si le bundle de rendu est manquant ou si aucun navigateur n'est disponible ?

Le skill s'arrête et vous indique de construire le bundle en exécutant bun run build:diagram-render dans le dépôt gstack, ou d'ouvrir Aside (macOS 15+) si le navigateur de gstack n'est pas construit. Le skill n'installe jamais Aside pour vous ni ne le remplace par un CDN ou un autre moteur de rendu.

Diagram

Exécutez diagram sur une tâche réelle de diagrammes et graphiques.

Téléchargez OpenDesign, importez le diagramme depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesignParcourir tous les skills
Terminal
npx skills add https://github.com/garrytan/gstack --skill diagram

OpenDesign Desktop

Un seul design system. Votre marque, cohérente partout

Dans le Vibe Design Workspace complet, appliquez les mêmes règles de marque aux sites, slides, prototypes interactifs, dashboards, images et vidéos HTML. Connectez Codex, Claude Code, Cursor et vos autres agents de code locaux, puis créez gratuitement.

  • Sites, slides, prototypes, dashboards, images et vidéos
  • Plus de 140 design systems et la bibliothèque complète de modèles et skills
  • Codex local et plus de 21 agents de code · Gratuit
Télécharger gratuitement

Disponible sur macOS et Windows