Diagramas en Claude Code: una imagen vale más que 100 líneas de Markdown

Claude Code lleva desde el 4 de agosto con una skill que no sale en el changelog ni en la documentación. Solo asoma en el menú de comandos, y cambia lo que recibes cuando pides un diagrama: el camino que recorre el dato en vez de una caja con un nombre dentro.

Una caja etiquetada cache frente al mismo cache dibujado como un camino: request lee la cache, en fallo va al store, y el store la invalida

TL;DR El comando es /artifact-diagramming, y lo que no es obvio es que admite texto detrás. A secas te carga la guía y se queda ahí. Con el encargo en la misma línea le das el manual y el trabajo de una vez, y dejas de recibir cajas con nombres dentro. No hace falta ningún servidor MCP de mermaid: dibuja SVG a mano dentro del artefacto.

Anthropic puso por escrito que un Markdown de más de 100 líneas no se lee, se ojea en diagonal. Por eso existen los artefactos. Pero un artefacto sigue siendo texto casi entero, y lo único que ahí dentro no se ojea en diagonal es el dibujo.

Desde el 4 de agosto hay una skill nueva que se encarga de ese dibujo. Y ha entrado de tapadillo.

Existe, pero no te lo han contado

La saqué comparando binarios: no está en la 2.1.220 y sí en la 2.1.221. No aparece en el changelog de esa versión, y tampoco en la documentación oficial de artifacts, que sí documenta su hermana artifact-design. El único sitio donde asoma es el menú de comandos:

/artifacts             Browse your published and shared artifacts
/artifact-design       Design guidance and fundamentals for Artifacts.
/artifact-diagramming  Diagramming know-how for Artifacts, when a picture
                       earns its place, how to draw one that shows the real
                       mechanism, and the inline-SVG mechanics that keep it
                       legible in both themes.

Y hay un detalle que importa: fuera del carril workshop, nada obliga a Claude a cargarla. Decide él. Cuando el diagrama es el plato principal la carga sola; cuando es un detalle dentro de una tarea grande, compite por atención con todo lo demás.

Qué le enseña exactamente

La tesis está en la primera línea y es más opinable de lo que esperaba:

Una caja etiquetada cache dice menos que la prosa. El camino que recorre una petición a través de ella, los dos almacenes entre los que se sienta, y la flecha que desaparece cuando quitas la caché dicen lo que las palabras no pueden.

De ahí sale todo lo demás:

Regla	Qué significa en la práctica
Dibuja el mecanismo, no su nombre	Enseña lo que sostiene el argumento: la frontera que se cruza, el salto que se añade, el dato que se mueve
Si comparas, dibuja la diferencia	Una caja por opción sin nada que las conecte al sistema no es una comparación, es una lista reformateada
Etiqueta las flechas	Una flecha sin etiqueta es "relacionado de alguna manera". `writes`, `invalidates`, `polls every 30s` es información
Ajusta el tamaño a lo que te juegas	Una pregunta de un salto son tres cajas. Una migración que enruta escrituras por una cola necesita la cola, el escritor, el lector y la flecha de orden
Una figura, una afirmación	`<figure>` con `<figcaption>` que dice qué demuestra el dibujo, más `role="img"` y `aria-label` con lo mismo

Y el cierre, que es el que más me gustó: si una frase lo dice más rápido, escribe la frase.

Cómo se pide (aquí está el truco)

/artifact-diagramming y Enter no dibuja nada. Es un comando de tipo prompt: te mete las cuarenta líneas de la guía en el contexto y ya. Cargas el manual y te quedas mirándolo.

Lo que sí funciona es escribir el encargo detrás, en la misma línea:

> /artifact-diagramming el flujo de regeneración cuando la nota sale vacía:
  qué se guarda en sessionStorage, qué sobrevive al reload y en qué momento
  se consume

Tu texto viaja en un bloque <command-args> junto a la guía, así que llegan los dos a la vez. Y no es evidente que se pueda: la skill no declara argumentHint, así que el menú no te sugiere en ningún momento que ahí detrás cabe algo.

Un apunte de redacción del encargo: di qué decisión tiene que zanjar el dibujo, no qué cosa tiene que enseñar. "Un diagrama de la arquitectura" devuelve el organigrama. "Qué sobrevive al reload y cuándo se consume" devuelve el mecanismo.

No, no necesitas el servidor MCP de mermaid

Medio internet está montando servidores MCP y skills de terceros para previsualizar mermaid con Claude. Dentro de un artefacto no hace falta: mermaid se renderiza nativo, con fences ```mermaid en las páginas Markdown y con <pre class="mermaid"> en las HTML.

Pero la skill empuja hacia otro lado en las páginas HTML: SVG escrito a mano con formas nativas (rect, circle, line, path) y <text>, sin librerías y sin runtime. viewBox propio, currentColor en trazos y texto para que funcione en tema claro y oscuro, y un solo color literal reservado al elemento que carga el significado. La documentación oficial empuja igual, aunque por otro motivo: SVG antes que imágenes raster porque los data URI son lo caro en tokens.

Nada de <script>, <style> ni <foreignObject> dentro del SVG, y las referencias internas (<use>, gradientes, patrones) apuntando a ids del mismo fragmento.

Cuándo no pedirlo

Cuando la respuesta cabe en una frase. La propia skill lo dice y es la regla que más se salta la gente: un diagrama se gana su sitio cuando le deja ver a alguien que llega frío un mecanismo que si no tendría que reconstruir leyendo. Si no es eso, es decoración cara.

Esto encaja con esculpir un artefacto hasta entender el cambio antes de delegarlo: el diagrama es el momento en que descubres si lo habías entendido o no. Y si lo que quieres es que la página entera deje de parecer generada por IA, eso va del frontend-design skill y de /artifact-design.

Requisitos

Claude Code 2.1.221 o superior (claude --version). En la 2.1.220 la skill no existe.
Artefactos disponibles: plan Pro, Max, Team o Enterprise, sesión con /login en claude.ai y solo API de Anthropic. Los detalles, en el tip de artifacts.

Documentación oficial: Share session output as artifacts. La skill de diagramas no está documentada ahí todavía.