Diseño de Diagramas Editoriales
Genera diagramas limpios y de calidad de publicación como archivos HTML individuales y autónomos (SVG + CSS embebidos). Nunca uses brillos genéricos de cian oscuro, diseños predeterminados de Mermaid o líneas de conexión diagonales.
ADN Visual y Paleta de Colores
- Papel (Fondo):
#f5f5f5(lienzo plano). - Tinta (Texto y Trazos Dominantes):
#2d3142. - Atenuado (Texto Secundario y Líneas Estándar):
#4f5d75. - Bordes y Divisores:
rgba(45, 49, 66, 0.12). - Acento (Cuellos de Botella / Enfoque Crítico):
#eb6c36(coral/terracota; máximo 1–2 nodos focales por diagrama). - Externo / Límites Difusos: Trazo discontinuo (
stroke-dasharray="4,4").
Tipografía (Google Fonts)
Incrustar en el encabezado HTML:
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
- Título del Diagrama:
Instrument Serif, 28px, peso normal. - Nombres de Nodos:
Geist(sans), 12px, peso 600. - Subetiquetas y Metadatos:
Geist Mono, 9px (puertos, protocolos, intervalos de lote). - Insignias de Conectores / Encabezados:
Geist Mono, 7–8px, mayúsculas, espaciado entre letras (letter-spacing: 0.08em).
Geometría SVG y Estándares de Diseño
- Disciplina de Cuadrícula de 4px: Todas las coordenadas (
x,y), dimensiones (width,height), rellenos y espacios deben ser múltiplos de 4. - Solo Conectores Ortogonales: Nunca dibujes líneas diagonales inclinadas entre nodos fuera de eje. Cada curva debe ser un codo en ángulo recto con esquina redondeada (
r=8). Reserva la línea recta<line>estrictamente para nodos que compartan ejes idénticos. - Insignias de Conectores Enmascaradas: Coloca las etiquetas de datos/protocolo (ej.,
CSV,XLSX,LOAD) dentro de un<rect>opaco relleno con#f5f5f5(rx=2). Mantén un espacio visible de 6px–10px desde el trazo de la línea para que la etiqueta nunca corte la flecha. - Zonas y Contenedores Funcionales: Agrupa los pasos en columnas/áreas amplias (ej.,
RECOPILACIÓN,PROCESAMIENTO,DIFUSIÓN). Usa un borde de 1px (rgba(45,49,66,0.12)), esquinas redondeadas (rx=8) y una pestaña de título mono en mayúsculas en la parte superior izquierda. - Jerarquía de Nodos:
- Estándar: relleno
#ffffff, trazo de 1px#2d3142, radio de 6px (rx=6). - Cuello de botella / Punto crítico: relleno
#fbeee8(rgba(235,108,54,0.08)), trazo#eb6c36. - Externo: relleno transparente o blanco, borde discontinuo (
stroke-dasharray="4,4").
- Estándar: relleno
- Leyenda Inferior Horizontal: Coloca una tira de leyenda horizontal debajo de los nodos del diagrama, separada por una regla fina de ancho completo.
Plantilla SVG Estructural
Carga references/template.md antes de escribir el SVG (marcadores, zonas, conectores, insignia enmascarada, cuadro de nodo).