ASCII Flow: diagramas en texto que se ven igual en un comentario, un README o un chat

Una skill que dibuja diagramas de arquitectura, flujos, secuencias y árboles con caracteres monoespaciados —sin renderizador, sin plugin, sin imagen— y los deja perfectamente alineados para que sobrevivan a cualquier copy-paste.

Invócala con un comando

/ascii-flow "el flujo de checkout: carrito → pago → confirmación"
Te devuelve el diagrama en texto monoespaciado, listo para pegar donde sea. Primero elige la codificación que encaja con lo que describes (grafo dirigido, secuencia, árbol, tabla, cajas anidadas…) y luego lo alinea a rejilla, contando columnas para que ningún conector se desvíe.
/ascii-flow "la arquitectura: navegador ↔ API gateway ↔ servicio ↔ base de datos"
Para arquitecturas usa cajas unidas por líneas; para procesos, flechas con orden. Elige el juego de caracteres según dónde va a vivir: ASCII puro si es un comentario de código, box-drawing Unicode si es un README en UTF-8.

Compartir en X Compartir en LinkedIn Compartir por email

Qué es esta skill

¿Qué es ascii-flow? ¶

ascii-flow dibuja diagramas con caracteres monoespaciados para que se vean idénticos en un comentario de código, un README, una terminal, un git diff, un email o un chat. Sin renderizador, sin plugin, sin imagen. Toda la gracia está en dos palabras: portabilidad y alineación. Un diagrama que sobrevive al copy-paste vaya donde vaya y que no se descuadra.

No es “écheme unas rayas y ya”. Está apoyada en la taxonomía y los ~500 ejemplos reales catalogados en asciidiagrams.github.io —diagramas sacados de Chromium, el kernel de Linux, LLVM o TensorFlow—, así que conoce qué forma visual le va a cada tipo de información y cómo construirla sin que se rompa.

Cómo elige la forma

Primero la codificación, luego el dibujo ¶

La decisión más importante es la primera: emparejar la forma de la información con la forma del diagrama. Un flujo o una máquina de estados pide un grafo dirigido (cajas con flechas de orden); una arquitectura, cajas unidas por líneas sin flechas; actores intercambiando mensajes, una secuencia con líneas de vida; una jerarquía, un árbol con ├─ └─; una tubería de pasos, una línea A ──▶ B ──▶ C; datos tabulares, una tabla. Elegir mal —un árbol para algo cíclico, por ejemplo— es la razón número uno de que un diagrama se lea fatal, así que ascii-flow lo decide antes de pintar nada.

Después viene la disciplina que mantiene todo cuadrado: solo espacios (nunca tabuladores), las cajas primero y los conectores después, y cada conector colocado por aritmética, no a ojo (columna_centro = borde_izquierdo + floor(ancho/2)). Por eso los verticales no se desvían y las flechas tocan su caja.

Cuándo sí y cuándo no

ASCII puro o Unicode, según dónde vaya a vivir ¶

La skill no te obliga a un solo estilo: elige el juego de caracteres por destino. ASCII puro (| - + / \ < > ^ v) cuando el diagrama va dentro de código y tiene que renderizar idéntico en cualquier OS, fuente o codificación. Box-drawing Unicode (─ │ ┌ ┐ └ ┘ ├ ┤) para READMEs y terminales en UTF-8, porque queda mucho más limpio y, al ser de ancho de una celda, la alineación aguanta. Y te avisa de cuándo conviene un renderizador de verdad: si el grafo es enorme y denso (decenas de nodos, aristas que se cruzan), Mermaid o Graphviz ganan; ASCII brilla en lo que vive pegado al código.

Instalación

Cómo instalar ascii-flow ¶

Funciona con cualquier agente compatible con el estándar abierto de Agent Skills (Claude Code, Cursor, Codex, OpenCode, Gemini CLI…). Pega esto en tu terminal y listo:

npx skills add webreactiva/skills --skill ascii-flow

¿La quieres disponible en todos tus proyectos? Añade -g para instalarla global en la carpeta de skills de tu agente (~/.agents/skills, o ~/.claude/skills si usas Claude Code):

npx skills add webreactiva/skills --skill ascii-flow -g

Es open source. Puedes ver el código fuente en GitHub antes de instalarla.

Preguntas frecuentes ¶

¿En qué se diferencia de pedirle un diagrama Mermaid? ¶

Mermaid necesita que algo lo renderice; el resultado de ascii-flow es texto plano que se ve igual en cualquier sitio sin tooling. Úsala cuando el diagrama tiene que vivir pegado al código (un comentario, un commit, un README portable) o cuando el destino no renderiza Mermaid. Para grafos muy grandes y densos, un renderizador sigue siendo mejor, y la propia skill te lo dice.

¿Me va a salir descuadrado al pegarlo? ¶

Esa es justo la obsesión de la skill. Construye sobre una rejilla fija, usa solo espacios (nunca tabuladores), calcula la columna de cada conector por aritmética y repasa el diagrama al final para verificar que los verticales se alinean y las flechas tocan su caja. Y elige caracteres de ancho de una celda para que la alineación no se rompa entre plataformas.

¿Con qué agentes funciona? ¶

Con cualquiera compatible con el estándar abierto de Agent Skills: Claude Code, Cursor, OpenAI Codex, OpenCode, Gemini CLI y más. La instalas una vez y la usas donde quieras.

¿Tiene coste? ¶

Es open source. La descargas e instalas gratis; el código está en GitHub.

¿Cómo se usa?

No necesitas el comando: tu agente también la activa sola cuando le dices algo como…

“dibújame el flujo de login en ASCII”
“haz un diagrama de la arquitectura para el README”
“necesito este flujo como texto, para un comentario”
“esquematiza esto en texto plano”
“draw this as an ASCII diagram”
“sketch the architecture in plain text”

Siguiente paso

Ya sabes instalar skills. Aprende a crearlas.

Si te ha gustado tener un copiloto a demanda, el siguiente paso es escribir las tuyas. En la guía de skills aprendes la anatomía de un SKILL.md, a redactar descripciones que la disparan sola y a validarla.