Renderizado de Diagramas Mermaid con beautiful-mermaid
Renderiza archivos Mermaid .mmd a SVG estilizado usando beautiful-mermaid v1.0.2 y bun.
Contenido de la Skill
| Archivo | Propósito |
|---|---|
render-mermaid.ts | Herramienta CLI: renderiza archivos .mmd a SVG |
gemini-diagram-prompt.md | Prompt para generación de imágenes con Gemini |
Instalación
Solo se requiere bun. La dependencia beautiful-mermaid se instala automáticamente con bun en la primera ejecución.
# macOS
brew install oven-sh/bun/bun
# O instalador universal
curl -fsSL https://bun.sh/install | bash
Referencia CLI
render-mermaid — Renderiza archivos .mmd de Mermaid a SVG temáticos
Uso:
bun run render-mermaid.ts [opciones] <entrada.mmd...>
echo 'graph TD; A-->B' | bun run render-mermaid.ts -o salida.svg
Opciones:
-o, --output <archivo> Archivo de salida (solo una entrada)
--outdir <directorio> Directorio de salida para múltiples archivos
-t, --theme <nombre> Tema (por defecto: tokyo-night)
--list-themes Lista los temas disponibles
--help Muestra esta ayuda
Salida por defecto: Sin -o o --outdir, escribe <nombre>.svg junto a cada archivo de entrada (-d es ignorado por bun run; usa --outdir).
Atajo: Define MERMAID=plugins/autorun/skills/mermaid-diagrams/render-mermaid.ts para comandos más cortos.
Ejemplos
MERMAID=plugins/autorun/skills/mermaid-diagrams/render-mermaid.ts
# Renderizar un solo archivo (salida junto a la entrada)
bun run $MERMAID diagrama.mmd
# Renderizar a una salida específica
bun run $MERMAID diagrama.mmd -o bonito.svg
# Renderizar todos los archivos .mmd a un directorio de salida
bun run $MERMAID docs/diagramas/*.mmd --outdir docs/diagramas
# Tema diferente
bun run $MERMAID -t dracula diagrama.mmd
# Entrada desde stdin
echo 'graph TD; A-->B-->C' | bun run $MERMAID -o rapido.svg
# Listar temas
bun run $MERMAID --list-themes
Diagramas del Proyecto
Archivos fuente Mermaid (.mmd) y salida renderizada (.svg) en docs/diagrams/, además de un archivo fuente en la raíz del repositorio:
| Fuente | Descripción |
|---|---|
docs/diagrams/autofile-policy.mmd | Diagrama de flujo de política AutoFile |
docs/diagrams/three-stage-autorun.mmd | Diagrama de flujo de autorun en tres etapas |
autorun-architecture.mmd | Arquitectura completa (demasiado compleja para beautiful-mermaid) |
Regeneración:
bun run $MERMAID docs/diagrams/*.mmd --outdir docs/diagrams
Limitaciones Conocidas
- Los diagramas complejos con subgrafos profundamente anidados pueden provocar errores de layout en dagre. Los diagramas fallidos se reportan pero no bloquean otros renders.
- El front matter
%%{init:...}%%se elimina automáticamente (beautiful-mermaid aplica su propio tema).
<image_generation>
Generación de Imágenes con Gemini
gemini-diagram-prompt.md contiene un prompt para que Gemini genere una imagen de resumen del proyecto centrada en resultados. Copia el prompt en una conversación con Gemini.
</image_generation>