tpc-pascal/agent-skills

Dibuja diagramas y gráficos atractivos para informes: diagramas de flujo/secuencia/clase/estado/ER/Gantt con Mermaid (kroki.io, PNG), y gráficos de barras/torta/línea con matplotlib (uv). Genera `<nombre>.diagram.png` junto a la fuente para incrustar en `.report.docx`. Útil cuando un informe necesita diagramas en lugar de ASCII, requiere gráficos de datos, o el usuario pide 'diagramas bonitos'.

¿Qué es agent-skills?

Este skill de agente proporciona dos scripts ligeros para generar diagramas y gráficos de alta calidad directamente en el flujo de trabajo del informe. `scripts/mmd2png.py` convierte diagramas escritos en sintaxis Mermaid (como flowchart, sequence, class, state, ER, gantt) a PNG, usando de forma predeterminada el renderizador local `mmdc` (parte de `@mermaid-js/mermaid-cli`). Opcionalmente puede usar backends remotos como Kroki o mermaid.ink si el usuario lo habilita explícitamente. `scripts/chart.py` genera gráficos de barras (bar), de torta (pie) o de líneas (line) a partir de datos CSV con dos columnas (etiqueta, valor), usando matplotlib a través de `uv run` o un Python local con matplotlib instalado. Ambos scripts producen archivos PNG nombrados como `<original>.diagram.png` junto al archivo fuente, sin sobrescribir archivos existentes. El skill prioriza el procesamiento local: `mmd2png.py` solo usa internet si el usuario configura explícitamente la variable de entorno `MMD2PNG_BACKEND` como `remote`, `kroki` o `ink`. La verificación de salida incluye comprobación de la firma mágica PNG y tamaño ≥ 1 KB, y convierte imágenes JPEG remotas a PNG real (o emite advertencia). Es ideal para integrar diagramas en informes `.report.docx` generados por otros skills del agente, siguiendo reglas estrictas de no inventar datos (los valores de los gráficos deben estar etiquetados como `[fact]` o `[observed]`) y usando el mismo idioma del usuario para las etiquetas de los diagramas.

Compatible con~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/tpc-pascal/agent-skills/tree/HEAD/skills/research/diagram

Documentación

Versión en inglés: SKILL.en.md

diagram — diagramas y gráficos

Skill ligero, con 2 scripts: scripts/mmd2png.py (Mermaid → PNG, local-only por defecto mediante mmdc; remoto solo si se elige explícitamente) y scripts/chart.py (gráficos de datos → PNG, matplotlib mediante uv o Python existente). La fuente se ubica junto a la salida, sin sobrescribir archivos existentes.

Tabla de ruta según necesidad

Necesidad	Cómo hacerlo
Flowchart / sequence / class / state / ER / gantt / arquitectura de sistema	Mermaid → `scripts/mmd2png.py` (por defecto solo usa `mmdc` local)
Gráficos de barras / torta / línea a partir de datos reales	`scripts/chart.py` (matplotlib; `uv` puede necesitar red si el paquete aún no está en caché)
Diagrama incrustado en informe `.report.docx`	PNG + `![título](<nombre>.diagram.png)` en `.report.md`, exportar a docx siguiendo el skill `paper` y la receta `doc`
Diagramas fuera de capacidad de Mermaid/matplotlib (3D, gráficos altamente personalizados)	`[N/A]` — informar al usuario claramente la limitación, no inventar formas

Reglas

Salida junto a la fuente: <nombre_original>.diagram.png (imagen) + <nombre_original>.diagram.mmd (fuente Mermaid, editable). No sobrescribir archivos fuente.
Mermaid: escribir en .mmd, renderizar con python3 scripts/mmd2png.py '<f>.mmd' '<f>.diagram.png'; etiquetas del diagrama en el idioma que hable el usuario.
Los datos para los gráficos deben ser medidas/términos de la fuente (etiqueta [fact]/[observed]); no dibujar datos inventados.
Local-first, no enviar fuente sigilosamente: por defecto mmd2png.py solo usa mmdc; si falta CLI/browser o hay error, detenerse e informar la razón, sin llamar a la red. Instalar npm i -g @mermaid-js/mermaid-cli y Chrome/Chromium. Solo cuando el usuario/agente elija explícitamente, establecer MMD2PNG_BACKEND=remote (Kroki luego mermaid.ink), kroki o ink. chart.py procesa localmente; uv run --with matplotlib puede necesitar red para obtener el paquete si no está instalado/en caché, por lo que sin conexión usar Python con matplotlib instalado o caché preparada.
Verificar antes de entregar: mmd2png.py auto-verifica la firma mágica PNG y tamaño ≥ 1 KB; las imágenes JPEG de remoto se convierten a PNG real mediante ImageMagick (si falta convert → guardar <f>.jpg + advertencia, no fingir que es .png); al incrustar en informe → verificar nuevamente con pdfinfo + pdftotext después de convertir DOCX→PDF (imagen visible, sin romper página).
Tamaño: cada diagrama una idea, fuente legible; diagrama demasiado ancho → dividir en partes más pequeñas en lugar de dejar que el editor lo comprima.
Recordar idioma de entrada — responder en el mismo idioma que hable el usuario.

scripts

scripts/mmd2png.py — Mermaid → PNG (local-only por defecto; remoto opt-in mediante MMD2PNG_BACKEND): python3 scripts/mmd2png.py '<f>.mmd' '<f>.diagram.png' [--scale 2] [--size 1600] [--theme forest]
scripts/chart.py — datos CSV (2 columnas: etiqueta,valor) → PNG: uv run --with matplotlib python3 scripts/chart.py '<f>.csv' '<f>.diagram.png' <bar|pie|line>