Mermaid ASCII : rendu de diagrammes Mermaid dans le terminal

• beautiful-mermaid est un outil ultra-rapide basé sur TypeScript pour rendre des diagrammes Mermaid en SVG ou en art ASCII
• Prend en charge 5 types de diagrammes (Flowchart, State, Sequence, Class, ER) et fonctionne à la fois dans le terminal et dans le navigateur
• Grâce à 15 thèmes intégrés et à la compatibilité Shiki, il est possible d’appliquer directement des thèmes VS Code
• Le mode Mono fournit une représentation visuelle cohérente avec seulement deux couleurs, tandis que les propriétés CSS personnalisées permettent un changement de thème en temps réel
• Son importance ressort comme outil léger et sans dépendances pour visualiser les flux de données et la structure des systèmes dans des environnements de programmation assistée par IA

---

Vue d’ensemble

• beautiful-mermaid est un outil qui rend des diagrammes Mermaid en SVG ou en texte ASCII/Unicode
  • Fonctionne sans dépendance au DOM et prend en charge un rendu ultra-rapide (plus de 100 diagrammes en moins de 500 ms)
  • Développé par l’équipe Craft pour Craft Agents
• Portage en TypeScript de Mermaid-ascii (projet basé sur Go), avec des fonctionnalités étendues
  • Ajout de la prise en charge des diagrammes Sequence, Class et ER
  • Inclut les caractères de boîte Unicode, ainsi que des réglages d’espacement et de padding

Fonctionnalités principales

• Types de diagrammes pris en charge : Flowchart, State, Sequence, Class, ER
• Formats de sortie : SVG (pour les interfaces riches), ASCII/Unicode (pour le terminal)
• Système de thèmes
  • 15 thèmes intégrés disponibles (tokyo-night, dracula, nord, github-dark, etc.)
  • Mode Mono : toutes les couleurs sont automatiquement dérivées à partir de deux couleurs seulement, l’arrière-plan (bg) et l’avant-plan (fg)
  • Mode enrichi : possibilité de définir des couleurs optionnelles comme accent, muted, surface, border, etc.
  • Prend en charge un basculement en temps réel basé sur les propriétés CSS personnalisées
• Intégration Shiki
  • Mappage automatique des couleurs des thèmes VS Code vers les couleurs du diagramme
  • La fonction fromShikiTheme() permet d’extraire bg, fg, accent, etc.

Installation et utilisation

• Commandes d’installation
  • npm install beautiful-mermaid ou bun add beautiful-mermaid, pnpm add beautiful-mermaid
• Exemple de rendu SVG

  import { renderMermaid } from 'beautiful-mermaid'
  const svg = await renderMermaid(`graph TD; A-->B;`)
  

• Exemple de rendu ASCII

  import { renderMermaidAscii } from 'beautiful-mermaid'
  const ascii = renderMermaidAscii(`graph LR; A --> B --> C`)
  

• Utilisation dans le navigateur
  • Chargement direct possible via une balise <script> depuis un CDN (unpkg, jsDelivr)
  • Accès à renderMermaid, renderMermaidAscii, THEMES, etc. depuis l’objet global beautifulMermaid

Sortie ASCII et options

• Prise en charge du mode Unicode (par défaut) et du mode ASCII pur
• Options disponibles
  • useAscii : activer ou non ASCII
  • paddingX, paddingY : espacement entre les nœuds
  • boxBorderPadding : marge intérieure des nœuds
• Exemple de sortie

  ┌───┐     ┌───┐
  │ A │────►│ B │
  └───┘     └───┘
  

Résumé de l’API

• renderMermaid(text, options?) : rend un diagramme Mermaid en SVG
  • Options : bg, fg, accent, muted, surface, border, font, transparent
• renderMermaidAscii(text, options?) : rendu en texte ASCII/Unicode
• fromShikiTheme(theme) : extrait les couleurs d’un thème Shiki
• THEMES : objet contenant 15 thèmes intégrés
• DEFAULTS : couleurs par défaut (#FFFFFF, #27272A)

Licence et création

• Licence MIT
• Créé par l’équipe Craft
• Moteur ASCII basé sur mermaid-ascii d’Alexander Grooff

Portée technique

• Dans les environnements d’assistant de code IA, il permet de visualiser instantanément des diagrammes dans le terminal ou dans une interface de chat
• Sa structure légère, rapide et sans dépendances le rend très utile aussi bien pour les outils CLI que pour les environnements serveur
• Son extensibilité thématique et sa compatibilité améliorent l’expérience développeur