Communitygithub.com

ahundt/mermaid-diagrams

Génère des diagrammes Mermaid au format SVG en utilisant beautiful-mermaid et bun. Idéal lorsque l'utilisateur demande de « générer un diagramme », « créer un flowchart », « mettre à jour des diagrammes », « rendre du SVG à partir de Mermaid », ou de convertir des diagrammes Mermaid en fichiers SVG stylisés.

Qu'est-ce que mermaid-diagrams ?

Cette compétence permet de transformer des fichiers `.mmd` Mermaid en fichiers SVG stylisés, en s'appuyant sur l'outil en ligne de commande `render-mermaid.ts` exécuté avec bun. Elle est particulièrement utile pour les développeurs qui intègrent des diagrammes dans leur documentation ou leurs projets, car elle prend en charge tous les types de diagrammes Mermaid (flowcharts, diagrammes de séquence, etc.) et offre 15 thèmes prédéfinis, dont le populaire tokyo-night. La compétence fonctionne sur macOS et Linux, nécessite uniquement bun comme dépendance externe, et peut traiter un seul fichier en entrée ou plusieurs fichiers via un répertoire de sortie. Elle gère également l'entrée depuis stdin, ce qui la rend pratique pour les pipelines. Les limitations incluent des bugs de disposition dagre sur les diagrammes très complexes et le retrait automatique des options de configuration `%%{init:...}%%` pour laisser place au thème choisi.

Compatible avec~Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/ahundt/autorun/tree/HEAD/plugins/autorun/skills/mermaid-diagrams
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

Rendu de diagrammes Mermaid avec beautiful-mermaid

Générer des fichiers .mmd Mermaid en SVG stylisé à l'aide de beautiful-mermaid v1.0.2 et bun.

Contenu de la compétence

FichierObjectif
render-mermaid.tsOutil CLI : génère des SVG à partir de fichiers .mmd
gemini-diagram-prompt.mdInvite pour la génération d'images Gemini

Installation

Seul bun est nécessaire. La dépendance beautiful-mermaid est automatiquement installée par bun lors de la première exécution.

# macOS
brew install oven-sh/bun/bun

# Ou installateur universel
curl -fsSL https://bun.sh/install | bash

Référence CLI

render-mermaid — Génère des fichiers .mmd Mermaid en SVG thématisés

Usage :
  bun run render-mermaid.ts [options] <entrée.mmd...>
  echo 'graph TD; A-->B' | bun run render-mermaid.ts -o sortie.svg

Options :
  -o, --output <fichier>   Fichier de sortie (une seule entrée)
  --outdir <répertoire>    Répertoire de sortie pour plusieurs fichiers
  -t, --theme <nom>        Thème (par défaut : tokyo-night)
  --list-themes            Lister les thèmes disponibles
  --help                   Afficher cette aide

Sortie par défaut : Sans -o ou --outdir, écrit <nom>.svg à côté de chaque fichier d'entrée (-d est ignoré par bun run ; utilisez --outdir).

Raccourci : Définissez MERMAID=plugins/autorun/skills/mermaid-diagrams/render-mermaid.ts pour des commandes plus courtes.

Exemples

MERMAID=plugins/autorun/skills/mermaid-diagrams/render-mermaid.ts

# Générer un seul fichier (sortie à côté de l'entrée)
bun run $MERMAID diagramme.mmd

# Générer vers un fichier de sortie spécifique
bun run $MERMAID diagramme.mmd -o joli.svg

# Générer tous les fichiers .mmd vers un répertoire de sortie
bun run $MERMAID docs/diagrammes/*.mmd --outdir docs/diagrammes

# Thème différent
bun run $MERMAID -t dracula diagramme.mmd

# Entrée depuis stdin
echo 'graph TD; A-->B-->C' | bun run $MERMAID -o rapide.svg

# Lister les thèmes
bun run $MERMAID --list-themes

Diagrammes du projet

Les fichiers source Mermaid (.mmd) et les sorties générées (.svg) se trouvent dans docs/diagrammes/, ainsi qu'une source à la racine du dépôt :

SourceDescription
docs/diagrammes/autofile-policy.mmdDiagramme de flux de la politique AutoFile
docs/diagrammes/three-stage-autorun.mmdDiagramme de flux de l'autorun en trois étapes
autorun-architecture.mmdArchitecture complète (trop complexe pour beautiful-mermaid)

Régénération :

bun run $MERMAID docs/diagrammes/*.mmd --outdir docs/diagrammes

Limitations connues

  • Les diagrammes complexes avec des sous-graphes profondément imbriqués peuvent rencontrer des bugs de disposition dagre. Les diagrammes en échec sont signalés mais ne bloquent pas les autres rendus.
  • Les métadonnées %%{init:...}%% sont supprimées automatiquement (beautiful-mermaid applique son propre thème).

<image_generation>

Génération d'images Gemini

gemini-diagram-prompt.md contient une invite pour Gemini afin de générer une image de présentation du projet orientée résultats. Copiez l'invite dans une conversation Gemini.

</image_generation>

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

ahundt/ai-skill-builder

Guides creation, audit, and improvement of portable Agent Skills using the shared SKILL.md format and Anthropic's established methodology, without confusing the portable specification with runtime-specific extensions. Use when the user wants to "create a skill", "create an agent skill", "build a skill", "make a new skill", "write a new skill", "improve an existing skill", "audit my skill", "audit a SKILL.md", "refine my skill", "test a skill", "test skill discovery", "install skills across...

ahundt/cli-demo-recorder

Create demo videos for CLI and TUI tools. Use when user asks to "record a demo", "make a demo GIF", "create a demo video", "record my CLI tool", "asciinema demo", "demo recording script". Covers asciinema+agg+ffmpeg pipeline, tmux recording, multi-shell, and dual-purpose demo+test harnesses in Python, Rust, TypeScript, and Bash.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community