Ir a la guía de uso
diagrampor Garry Tan

Diagram Skill.

Un skill de Claude Code y Codex para diagramas y gráficos: convierte una descripción o fuente Mermaid en un archivo Excalidraw editable más SVG y PNG renderizados.

  • Diagrams & Data Visualization
  • Diagram
garrytan/gstack · diagram/SKILL.mdSKILL.md
--- name: diagram description: Turn an English description (or mermaid source) into a diagram triplet: the source, an editable .excalidraw file you can open on excalidraw.com, and rendered SVG + PNG. (gstack) --- ## When to invoke this skill ## Step 1 — Author the diagram ## Step 2 — Stage the render bundle (once per session) ## Step 3 — Render the triplet ## Step 4 — Show and deliver ## Rules
Portada y encabezados de sección leídos del archivo original el 14/09/2026 · 16 276 caracteres en total

01 Qué hace

Qué hace el Skill de diagramas en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Convierte una descripción en inglés o código fuente Mermaid en un triplete de diagrama: el código fuente Mermaid (.mmd), un archivo Excalidraw editable (.excalidraw) que se abre en excalidraw.com, y salidas renderizadas en SVG + PNG. El renderizado es totalmente offline mediante un servidor loopback local — usa el navegador Aside cuando está en ejecución, o de lo contrario el propio navegador headless de gstack.

Los diagramas de flujo (graph LR/TD) y los diagramas de secuencia producen escenas de Excalidraw totalmente editables con cajas, flechas y texto reales. Otros tipos de diagramas Mermaid (state, class, gantt) se renderizan a SVG/PNG y se exportan como un único elemento de imagen dentro del archivo Excalidraw — movible y anotable, pero no editable a nivel de elemento. El código fuente Mermaid sigue siendo la única fuente de verdad para iterar.

Qué produce

  • Un archivo de código fuente Mermaid (.mmd) que sirve como formato de intercambio amigable para LLM y única fuente de verdad.
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Redactar el Código Fuente Mermaid

    Escriba Mermaid que coincida con la solicitud del usuario. Prefiera graph LR para pipelines/flujos y graph TD para jerarquías.

  2. 02
    Preparar el Paquete de Renderizado Una Vez por Sesión

    Prepare diagram-render.html en el directorio de staging de renderizado de gstack bajo ${TMPDIR:-/tmp}/gstack-render, direccionado por contenido mediante el SHA del paquete.

  3. 03
    Renderizar el Triplete con un Solo Comando

    Escriba el archivo .mmd y luego ejecute gstack-render con el paquete preparado.

  4. 04
    Mostrar y Entregar

    Lee el PNG en línea para que el usuario vea el diagrama. Enumera las rutas del triplete y señala que el archivo .excalidraw se abre en excalidraw.com para su edición.

02 Encuentra tu caso de uso

Cuándo Usar la Skill diagram

Usa la skill diagram en Claude Code o Codex cuando el trabajo sean diagramas y gráficos de este tipo. El ajuste y los límites que siguen están tomados del propio archivo de la skill.

Buen caso de uso

  • El usuario solicita hacer un diagrama, dibujar la arquitectura, crear un diagrama de flujo, diagramar esto o visualizar un flujo.
  • Producir diagramas vectoriales nítidos para documentación junto con salidas ráster para chat, issues o READMEs.
  • Generar un archivo Excalidraw editable que el usuario puede abrir en excalidraw.com, mover cuadros y seguir trabajando.

Conozca los límites

  • Diagramas con más de 15 nodos en una sola escena: divídelos en varios diagramas para mejorar la legibilidad.
  • Los tipos de Mermaid que no son de diagrama de flujo ni de secuencia (state, class, gantt y otros) producen un archivo Excalidraw que se puede mover pero no editar a nivel de elemento.

Qué proporcionar

  • Descripción en inglés o código fuente de MermaidEl usuario proporciona una descripción del diagrama que desea crear, o bien código fuente de Mermaid existente para renderizar.

03 Dentro del skill

Reglas que el skill de diagramas le da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

  1. Nunca Entregar Sin Renderizar

    Un archivo .mmd por sí solo no es un diagrama. Si el renderizado es imposible (falta el bundle o no hay navegador disponible), señala el bloqueo y detente.

  2. Los Diagramas de Flujo y de Secuencia Son Totalmente Editables

    Los diagramas de flujo (graph LR/TD) y los diagramas de secuencia se convierten en escenas de Excalidraw totalmente editables, con cuadros, flechas y texto reales. Otros tipos de Mermaid se exportan como un único elemento de imagen.

  3. Codificar el Código Fuente en Base64 para el Transporte en el Navegador

    Envía el código fuente de Mermaid a la página de renderizado mediante base64 para evitar interpretar comillas invertidas, ${ } y barras invertidas en el código fuente. Nunca inserte el contenido de un archivo en un template literal de JS.

  4. El Directorio de Salida Sigue el Contexto de Git

    Escribe en ./diagrams/ cuando el directorio de trabajo es un repositorio git (artefactos que el usuario puede confirmar), y en /tmp/gstack-diagrams/ en caso contrario. Deriva el slug a partir del asunto en kebab-case, con un máximo de 40 caracteres.

  5. El Ancho del PNG Es Fijo en 1950px

    El PNG rasterizado siempre tiene un ancho de 1950 píxeles, equivalente a 300 ppp en una colocación de 6,5 pulgadas.

  6. El Renderizado Es Totalmente sin Conexión

    El bundle de diagram-render es autónomo y se sirve desde loopback. Sin CDN, sin red.

  7. Volver a Renderizar un Excalidraw Editado sin Tocar Mermaid

    Cuando el usuario edite un archivo .excalidraw y quiera volver a renderizarlo, carga el archivo de escena y exporta SVG/PNG directamente; no lo regeneres a partir del código fuente de Mermaid.

  8. Preferir Incrustar .mmd para Destinos en PDF

    Para los diagramas que van a un PDF, recuerda al usuario que make-pdf renderiza de forma nativa los bloques de código de Mermaid: incrustar el .mmd en markdown es mejor que incrustar el PNG.

04 Ponlo a trabajar

Instalar diagram en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar diagram a Claude Code, Codex o Tu Agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal
npx skills add https://github.com/garrytan/gstack --skill diagram

Formulario genérico de CLI de skills para diagram/SKILL.md; el repositorio puede documentar su propia ruta.

Asignar al Skill una Primera Tarea de Diagramas y Gráficos

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt
Create a flowchart showing the build pipeline for [my TypeScript project]. Include lint, test, build, and deploy stages with their dependencies. Use graph LR layout and output to ./diagrams/.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

  • Lea la salida PNG en línea para verificar que el diagrama se renderizó correctamente y coincide con la solicitud del usuario.
  • Revise la salida de gstack-render para líneas ERROR: que indiquen errores de análisis de Mermaid — corrija el .mmd y reintente si están presentes.
  • Inspeccione la salida de PAGE_ERRORS en busca de 'Error processing Mermaid diagram' para confirmar cuándo el conversor de Excalidraw recurrió a un único elemento de imagen.
  • Verifique que las tres líneas OK <path> aparezcan en la salida de gstack-render, confirmando que se escribieron los archivos SVG, PNG y Excalidraw.
  • Para reprocesamientos de Excalidraw editados, ignore el benigno WorkerInTheMainChunkError en PAGE_ERRORS — el SVG/PNG son correctos.

En OpenDesign importe diagram desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, luego selecciónelo en la barra superior.

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author
Garry Tan
Repository
github.com/garrytan/gstack Rama main
Archivo de skill
diagram/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 71f6048
License
MIT De LICENSE.
Estrellas del repositorio
132.921 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio garrytan/gstack, que contiene 7 skills en este catálogo. No es una calificación ni recuento de uso para diagram.
Verificado por OpenDesign
14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

  1. Cuándo invocar este skillÚselo para solicitudes de diagramas, arquitectura, diagramas de flujo o visualización; SVG/PNG usan estilo Mermaid, Excalidraw tiene estética dibujada a mano.
  2. Paso 1 — Redactar el diagramaEscriba el código fuente de Mermaid; los diagramas de flujo y de secuencia se convierten en Excalidraw totalmente editable; otros tipos se exportan como imagen única.
  3. Paso 2 — Preparar el paquete de renderizado (una vez por sesión)Copie diagram-render.html al directorio de preparación de renderizado de gstack, direccionado por contenido mediante SHA, sin interferir nunca con sesiones concurrentes.
  4. Paso 3 — Renderizar el tripleteEscriba .mmd, ejecute gstack-render con el código fuente codificado en base64, obtenga como salida SVG/PNG/Excalidraw; verifique errores de análisis y PAGE_ERRORS.
  5. Paso 4 — Mostrar y entregarLea el PNG en línea, liste las rutas del triplete, indique la editabilidad de Excalidraw; para cambios edite el .mmd y vuelva a renderizar.
  6. ReglasNunca entregue sin renderizar; para objetivos PDF recuerde al usuario que make-pdf renderiza los bloques de Mermaid de forma nativa.
  7. Estado de finalizaciónDONE cuando se entrega el triplete; BLOCKED si falta el paquete o no hay navegador disponible.
La descripción propia del Skill
"Convierte una descripción en inglés (o código fuente de mermaid) en un triplete de diagrama: el código fuente, un archivo .excalidraw editable que puedes abrir en excalidraw.com, y SVG + PNG renderizados. (gstack)"

Descripción del front-matter desde SKILL.md. El archivo completo tiene aproximadamente 16.276 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill diagram

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Qué sucede si falta el paquete de renderizado o no hay navegador disponible?

El skill se detiene y le indica que construya el paquete ejecutando bun run build:diagram-render en el repositorio de gstack, o que abra Aside (macOS 15+) si el navegador de gstack no está compilado. El skill nunca instala Aside por usted ni sustituye un CDN u otro renderizador.

Diagram

Ejecute diagram en una tarea real de diagramas y gráficos.

Descarga OpenDesign, importa diagram desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Terminal
npx skills add https://github.com/garrytan/gstack --skill diagram

OpenDesign Desktop

Un sistema de diseño. Tu marca, coherente en cada resultado

En el Vibe Design Workspace completo, aplica las mismas reglas de marca a sitios web, presentaciones, prototipos interactivos, dashboards, imágenes y vídeo HTML. Conecta Codex, Claude Code, Cursor y otros agentes de código locales y crea gratis.

  • Web, presentaciones, prototipos, dashboards, imágenes y vídeo
  • Más de 140 sistemas de diseño y la biblioteca completa de plantillas y skills
  • Codex local y más de 21 agentes de código · Gratis
Descargar gratis

Disponible para macOS y Windows