GeekChart es una librería open source que transforma diagramas escritos en sintaxis Mermaid en gráficos SVG animados con la estética visual de 4Geeks. El paquete ofrece tres puntos de entrada: un componente React para edición en navegador, una función server side para generación estática, y una CLI para exportar a archivos independientes. Según el README del repositorio oficial, el parser diferido carga solo cuando el visitante interactúa con el primer diagrama, lo que mantiene el bundle inicial ligero. Por qué GeekChart existe cuando ya hay Mermaid Mermaid.js parsea y renderiza diagramas, pero no anima ni garantiza consistencia visual. Wafic Mikati, desarrollador del equipo 4Geeks, construyó GeekChart para cubrir esos vacíos: animación con vocabulario de Manim (trazos que aparecen, rellenos que siguen, un solo movimiento por vez), sistema de diseño propio con tokens en , y un gate de medición que falla el build si cualquier diagrama incumple las reglas de espaciado, tipografía o color. El gate ( ) ejecuta unas cuarenta comprobaciones sobre cada fixture del directorio . Esto convierte la consistencia visual en una propiedad verificable por CI, no en una revisión manual. Alejandro Sánchez, CEO de 4Geeks Academy, le pidió a Mikati que documentara la herramienta: "amazing man, do you want to clone the 4geeks website and try to put it inside an article??" — Slack blogequipo, 26 de agosto de 2026. Mikati respondió que el repositorio ya incluía benchmarks y estaba listo para publicarse en npm. Qué tipos de diagrama soporta y cómo se animan GeekChart soporta flowcharts, state diagrams, class diagrams, ER diagrams, sequence diagrams, gantt, timeline, journey, quadrant, radar, XY charts, sankey, treemap, kanban, pie charts, mindmaps y git graphs. Un único renderer dibuja todos los tipos, lo que elimina la fragmentación de estilos entre diagramas diferentes. El pipeline de renderizado sigue seis pasos: paste (pegar el código Mermaid), repair (corrección automática), which diagram (detección de tipo), mermaid parses (el parser original genera el AST), we place (layout propio con ELK para árboles y serpentina propia para cadenas que saltan línea), we draw (cajas de tamaño fijo en grid de 8, líneas finas, un solo acento en el camino principal), y motion (animación con ritmo de pausa tras cada secuencia). Las reglas numéricas viven en y en . El lienzo mide como máximo 1000 unidades de ancho (1200 para tableros), se adapta al contenido con padding de 48 unidades, y nunca baja de 480. La tipografía se mantiene a 11 unidades en relación 1:1 con los píxeles reales, lo que evita que el texto se vuelva ilegible en contenedores estrechos. Instalación y uso del componente React El componente React se instala con o . Para usarlo en una aplicación Next.js o React estándar: El componente carga el parser de forma diferida en el primer uso. Esto significa que el bundle inicial no incluye el peso del parser de Mermaid; solo se descarga cuando el visitante necesita renderizar un diagrama. Para sitios con mucho tráfico y pocos diagramas, esto reduce el tiempo de carga interactiva (TTI) respecto a importar Mermaid directamente. Los desarrolladores que buscan profundizar en el ecosistema React y herramientas de visualización pueden explorar el de 4Geeks Academy, donde se trabaja con componentes avanzados y renderizado server side. Renderizado server side para sitios estáticos Para blogs generados en build time o documentación técnica, GeekChart expone desde . Esta función devuelve SVG inline sin JavaScript, lo que elimina el coste de runtime para el lector. El SVG resultante incluye las animaciones como SMIL (Synchronized Multimedia Integration Language), compatibles con la mayoría de navegadores modernos. Para casos donde el soporte SMIL es problemático, el CLI ofrece exportación a MP4. Esta aproximación de renderizado híbrido —server para contenido estático, cliente para interactividad— es la misma que se enseña en los de 4Geeks, donde los estudiantes aprenden a optimizar el bundle de aplicaciones React. CLI para exportación estática y CI El ejecutable de línea de comandos ( ) permite generar componentes React autónomos o archivos SVG/PNG/MP4 desde archivos : Esta capacidad resulta útil en pipelines de documentación donde los diagramas deben versionarse como archivos binarios o incluirse en PDFs. El CLI incluye las mismas comprobaciones del gate, por lo que un diagrama que falla el diseño no llega a producción. Benchmarks y rendimiento El repositorio incluye un script de benchmark ( ) que mide tiempos de renderizado y tamaños de salida. Según el código disponible en , las pruebas ejecutan cada diagrama de referencia contra tres métricas: tiempo de parseo, tiempo de layout, y peso del SVG generado. Comparado con Recharts 2.15 y Nivo 0.88 (librerías estándar de React para gráficos), GeekChart ocupa un nicho diferente: no compite en volumen de datos (donde Canvas supera a SVG), sino en claridad comunicativa de diagramas de flujo y arquitec