juanmackie/juanskills

Arquitecto de Diagramas ASCII

Un skill especializado para generar diagramas y flujogramas ASCII de alta utilidad y agnósticos a herramientas dentro de comentarios de código o documentación, siguiendo el formal 'Espacio de Diseño de Dibujos ASCII' (Hayatpur et al., 2024).

Instrucciones de Activación

Usa este skill cuando el usuario pida:

• "visualizar",
• "diagramar",
• "flujograma", o
• "mapear"

un proceso, estructura de datos o arquitectura de sistema usando texto plano.

Actívalo también al proporcionar explicaciones de código donde una representación visual de la lógica o el diseño de memoria mejore la claridad.

Principios Fundamentales

Agnosticismo a Herramientas

Asegúrate de que el diagrama sea estrictamente monoespaciado y legible en cualquier editor de texto básico (IDE, Terminal, Git).

Proximidad de la Información

El diagrama debe actuar como un 'mapa visual' que se sitúe directamente encima o al lado de la lógica que describe.

Notación Estructurada

Usa conjuntos de caracteres consistentes (+, -, |, v, >) para definir límites y flujo.

El Flujo de Trabajo del Espacio de Diseño

Basado en la investigación de Hayatpur et al., define internamente las siguientes dimensiones antes de renderizar:

1. Identificación del Contenido

Determina qué se está representando:

• Arquitectura del Sistema: Componentes de alto nivel y redes.
• Estructuras de Datos: Diseños de memoria, listas enlazadas o nodos de árboles.
• Comportamiento Dinámico: Lógica paso a paso o transiciones de estado.

2. Disposición y Conectividad

• Caja-y-Línea: Usa +---+ para entidades y | o - para conexiones.
• Dirección del Flujo: Estandariza de arriba a abajo o de izquierda a derecha.
• Alineación: Asegura que todas las tuberías verticales (|) estén perfectamente alineadas para mantener la forma de 'caja'.

Guías de Implementación

El Estándar de "Caja"

Usa siempre un borde de 3 niveles para las entidades, asegurando que sean visualmente distintas:

+-----------------------+
|      NOMBRE ENTIDAD   |
+-----------------------+

El Estándar de "Conector"

Usa puntas de flecha explícitas para mostrar direccionalidad. No uses líneas ambiguas.

• Vertical: | seguido de v
• Horizontal: --- seguido de >

Anotaciones

Coloca texto descriptivo corto junto a los conectores para explicar la transición o lógica (por ejemplo, "si x > 0" o "Llamada API").

Ejemplo de Flujo de Trabajo: Solicitud del Sistema

Entrada: "Muéstrame cómo un Balanceador de Carga distribuye tráfico a tres servidores."

Salida:

          [ SOLICITUD CLIENTE ]
                  |
                  v
       +-----------------------+
       |  BALANCEADOR DE CARGA |
       +----------+------------+
                  |
        +---------+---------+
        |         |         |
        v         v         v
    +-------+ +-------+ +-------+
    | SRV 1 | | SRV 2 | | SRV 3 |
    +-------+ +-------+ +-------+

Restricciones

1. No uses caracteres Unicode no estándar (como ┌ o ┐) a menos que se solicite explícitamente, ya que pueden romperse en ciertos entornos de terminal o editores heredados.
2. Mantén Monoespaciado: Cada línea debe verificarse para consistencia de ancho de caracteres.
3. Evita Complejidad: Si un diagrama requiere más de 80 caracteres de ancho, divídelo en 'Sub-Módulos' para asegurar que quepa en ventanas de IDE estándar.