Baoyu Diagrampor Jim Liu (Baoyu)

Baoyu Diagram Skill.

Mantén las relaciones, las etiquetas y las rutas de los conectores explícitas en un archivo vectorial inspeccionable.

Diagramas
SVG
Diseño de información

Revisión de la fuente · Baoyu DiagramSKILL.md

Tarea Diagramas Produce • Un diagrama SVG escalable con texto y geometría explícitos • Una exportación PNG generada a partir del SVG • Un diseño cuyos grupos, flujos y leyenda se corresponden con el sistema proporcionado Antes de empezar Un entorno de texto/código para SVG; Bun o Bun mediante npx para el script de conversión PNG incluido.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Dibuja diagramas técnicos estructurados como SVG

Un flujo de trabajo para crear diagramas SVG de tema oscuro con diseños semánticos, capas de conectores y conversión a PNG.

Flujo de trabajo basado en la fuenteNo es una prueba de ejecución

El método de trabajo

Baoyu Diagram escribe diagramas SVG independientes para arquitectura, diagramas de flujo, secuencias, líneas de tiempo y otras explicaciones estructurales, en lugar de pedir a un modelo de imágenes que pinte las etiquetas. La fuente aporta un sistema visual oscuro con colores semánticos, tipografía monoespaciada e indicaciones de diseño específicas para cada tipo de diagrama.

Un detalle de implementación distintivo es su orden de capas: los conectores se dibujan detrás de máscaras opacas y de cajas de componentes translúcidas para que las líneas no se vean a través de las etiquetas. El espaciado, la ubicación de la leyenda y el relleno del viewBox se consideran parte del contrato del diagrama. Después, un script incluido puede generar un PNG de mayor resolución para herramientas que no aceptan SVG.

Entregables esperados

Un diagrama SVG escalable con texto y geometría explícitos
Una exportación PNG generada a partir del SVG
Un diseño cuyos grupos, flujos y leyenda se corresponden con el sistema proporcionado

Ver el brief de ejemplo

Del brief a la revisión

01
Elige el modelo de relaciones
Decide si la información es una secuencia, un flujo de decisiones, una jerarquía, una arquitectura u otra estructura admitida.
02
Planifica nodos y conexiones
Enumera las entidades, los límites de agrupación y la dirección del flujo antes de asignar posiciones y trazar las flechas.
03
Renderiza y revisa el grafo
Escribe el SVG, inspecciona solapamientos y espacio libre de las etiquetas, exporta un PNG y comprueba que ambos formatos sigan siendo legibles.

02 Cuándo usarlo

Cuándo usarla

Un entorno de texto/código para SVG; Bun o Bun mediante npx para el script de conversión PNG incluido.

Buen encaje

Documentación de arquitecturaÚtil para mostrar límites de servicios, almacenes de datos y relaciones direccionales con etiquetas vectoriales editables.
Explicación de procesosSirve para flujos y secuencias en los que la dirección de las flechas y el orden de los mensajes importan más que el estilo ilustrativo.

Límites que conviene revisar

Tema oscuro con criterio propioLa fuente revisada está diseñada en torno a una paleta oscura. Un tratamiento de marca distinto requiere una adaptación explícita.
Las fuentes pueden ser externasAunque el resultado es un único archivo SVG, el ejemplo permite importar Google Fonts. Conviene comprobar el aspecto sin conexión con la tipografía de reserva prevista o una estrategia de fuente incrustada.

Aporta estos datos

Entidades y relacionesProporciona los nodos, las direcciones de conexión y las etiquetas reales; no esperes que el agente deduzca comportamientos del sistema no documentados.
Propósito del diagramaIndica qué pregunta debe responder el diagrama y el nivel técnico de la audiencia.
Entorno de salidaEspecifica dónde se usará el SVG o el PNG, incluidos el tamaño y los requisitos sin conexión.

03 Decisiones importantes

Decisiones importantes

Capas de conectores legibles
La fuente evita expresamente que las flechas se transparenten a través de cajas semitransparentes.
Semántica según el tipo
Los mensajes de secuencia, las decisiones de los diagramas de flujo y las relaciones estructurales usan convenciones distintas, en lugar de tarjetas conectadas genéricas.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración de la skill antes de usarlo.

Revisa la configuración

Conserva las referencias por tipo de diagrama y el script de conversión. Comprueba el renderizado y la disponibilidad de la fuente en el destino previsto.

Archivo fuente original

https://github.com/JimLiu/baoyu-skills/blob/1567581c26ec29f4216c6e6835415bf30343b0e3/skills/baoyu-diagram/SKILL.md

Un entorno de texto/código para SVG; Bun o Bun mediante npx para el script de conversión PNG incluido.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar la skill.

Brief de ejemplo

Usa baoyu-diagram para crear un SVG que muestre nuestro flujo de carga: navegador, API, cola, worker y almacenamiento de objetos. Usa solo las relaciones que indico, agrupa los componentes del lado del servidor, etiqueta por separado el comportamiento de reintento y deja la leyenda fuera del grafo. Verifica las direcciones de las flechas y el espacio libre del texto, y entrega versiones en SVG y PNG sin añadir servicios inventados.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

Cada flecha y cada grupo coinciden con la descripción del sistema proporcionada.
Las etiquetas, los conectores y las leyendas no se solapan ni se recortan.
El SVG se escala correctamente y el PNG exportado conserva la legibilidad.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que la skill esté incluida ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fija de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: Jim Liu (Baoyu)
Repositorio: JimLiu/baoyu-skills
Archivo de la skill: skills/baoyu-diagram/SKILL.md
Licencia: MIT
Instantánea revisada: 2026-10-07 · 1567581c26ec

Resumen editorial de la fuente

Un flujo de trabajo para crear diagramas SVG de tema oscuro con diseños semánticos, capas de conectores y conversión a PNG.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso de la skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Usa un API de generación de imágenes?

El flujo documentado escribe SVG directamente y lo convierte a PNG, a diferencia de las skills de ilustración que generan imágenes ráster.

¿Puedo editar las etiquetas más tarde?

Las etiquetas siguen siendo texto SVG en el archivo fuente, por lo que se pueden cambiar con un editor adecuado o mediante código.

¿Funciona totalmente sin conexión por defecto el SVG?

Revisa el manejo de las fuentes. La fuente permite una importación externa de Google Fonts aunque los demás elementos del diagrama estén contenidos en un solo archivo.

OpenDesign

Haz espacio para la próxima iteración de diseño.

Mantén tu brief, el material de origen y el trabajo de diseño juntos en un espacio de trabajo local. Revisa la configuración propia de la skill antes de añadirla a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño