name: beautiful-mermaid description: Rendre les diagrammes Mermaid en SVG et PNG à l'aide de la bibliothèque Beautiful Mermaid. À utiliser quand l'utilisateur demande de rendre un diagramme Mermaid.
tags: [productivity, agent-skills, beautiful-mermaid, svg, mermaid, diagram] -------|------------|----------| | default | Gris clair | Usage général | | dracula | Violet foncé | Préférence mode sombre | | tokyo-night | Bleu foncé | Esthétique sombre moderne | | tokyo-night-storm | Bleu plus foncé | Contraste élevé | | nord | Arctique foncé | Visuels mutés et calmes | | nord-light | Arctique clair | Mode clair aux tons doux | | github-dark | GitHub foncé | Correspond à l'interface GitHub | | github-light | GitHub clair | Correspond à l'interface GitHub | | catppuccin-latte | Clair chaleureux | Esthétique pastel douce | | solarized | Beige/crème | Schéma de couleurs Solarized | | one-dark | Atom foncé | Esthétique de l'éditeur Atom | | zinc-dark | Neutre foncé | Minimal, sans préférence de couleur |
Dépannage
Thème non appliqué
Vérifiez la sortie du script de rendu pour les valeurs bg et fg, ou inspectez la balise d'ouverture du SVG pour les propriétés CSS personnalisées --bg et --fg.
Le diagramme apparaît coupé ou incomplet
- Vérifiez la syntaxe des étiquettes de bord — utilisez la notation pipe
-->|label|, pas-- label --> - Vérifiez que tous les ID de nœud sont uniques
- Vérifiez les crochets non fermés dans les étiquettes de nœud
Le rendu produit un SVG vide ou mal formé
- Validez la syntaxe Mermaid sur https://mermaid.live avant le rendu
- Vérifiez les caractères spéciaux qui nécessitent un échappement (enveloppez-les entre guillemets)
- Assurez-vous que la direction du diagramme est spécifiée (
graph TD,graph LR, etc.)