Figuras de escenarios para blogs y artículos técnicos

Los blogs de ingeniería, los posts en Medium / Substack, los READMEs de GitHub y los boletines técnicos sobre conducción autónoma, vehículos autónomos y ADAS necesitan regularmente una figura limpia del escenario: la intersección que estás explicando, el caso extremo que estás desarrollando, la configuración de carriles sobre la que razona tu código. drawtonomy es adecuado para esas figuras, con formatos de salida adaptados a la web.

Esta página es el equivalente para blogs / artículos de Figuras para artículos de conducción autónoma — el mismo lienzo, diferentes restricciones de salida.

Qué necesitan las figuras de blogs y artículos

Las restricciones son diferentes a las de una figura para un artículo académico:

• Incrustable. La figura tiene que poder insertarse en un editor de Markdown / MDX / Notion / Ghost / Substack sin conversión.
• Compatible con modo claro / oscuro. Muchos blogs de ingeniería se renderizan en ambos. La figura debe ser legible en cualquiera de los dos, o tener una variante para modo oscuro.
• Tamaño de archivo pequeño. Una imagen raster de 4 MB perjudica la carga de página y el SEO. SVG o PNG comprimido es el estándar por defecto.
• Amigable para tarjetas sociales. Cuando el post se comparte en Twitter / LinkedIn / Hacker News, la imagen OG es normalmente la figura. La relación de aspecto y la legibilidad a tamaño pequeño importan.
• Re-editable. Los bloggers actualizan los posts. La figura necesita ser editable más adelante sin redibujar.

Los valores predeterminados de drawtonomy encajan bien con estas restricciones:

• .drawtonomy.svg (el formato SVG nativo de drawtonomy) es un SVG válido, así que se incrusta en cualquier contexto HTML / Markdown / MDX — y se puede re-editar en drawtonomy cuando el post necesite una actualización.
• La exportación PNG está disponible con alta resolución cuando SVG no está soportado (las previsualizaciones de LinkedIn, por ejemplo).
• El lienzo infinito te permite dibujar una figura ancha que se recorta bien a las dimensiones OG.

Flujo de trabajo recomendado

Un flujo de trabajo repetible para una figura de blog típica:

1. Elige el escenario. Una escena, un punto. No intentes ilustrar todo un pipeline en una sola figura.
2. Esboza en drawtonomy.com. Carreteras, carriles, intersecciones, vehículos, peatones, trayectorias, etiquetas de texto.
3. Prepara el estilo para modo claro y oscuro. Usa colores que funcionen sobre un fondo #fff y sobre uno #1a1a1a. Evita trazos blancos puros (invisibles sobre fondo claro) y trazos negros puros (invisibles sobre fondo oscuro). Los trazos gris medio funcionan bien en ambos.
4. Define el recorte del lienzo. Posiciona la figura de modo que la parte más relevante quede en el centro. Si vas a usar la misma figura como tarjeta OG, encuadra en aproximadamente 1200 × 630.
5. Guarda como .drawtonomy.svg. Esta es la fuente editable. La mayoría de los posts se actualizan al menos una vez después de publicarse — correcciones de erratas, correcciones de seguimiento, “añadí un diagrama relacionado en un post posterior” — y .drawtonomy.svg hace que cada actualización sea una edición en lugar de un redibujado.
6. Exporta los activos que realmente vas a publicar. Desde la misma escena:
   • .png a 1200 × 630 para la tarjeta OG (previsualizaciones de LinkedIn / X / Hacker News).
   • SVG plano para el cuerpo del post si tu plataforma prefiere un SVG simple sobre el .drawtonomy.svg (la mayoría de las plataformas modernas aceptan cualquiera de los dos, ya que ambos son SVG válidos).
7. Incrusta. Pégalo en tu editor de blog. Añade un pie de figura — los motores de búsqueda y los lectores de pantalla dependen de él.

Tamaño y resolución

Para SVG, la resolución no importa; la figura se escala a lo que decida el layout. Para PNG, tamaños útiles:

Uso	Tamaño
Figura de blog en línea (ancho completo)	1600 × 900
Figura de blog en línea (medio ancho)	800 × 450
Tarjeta OG / social	1200 × 630
Tarjeta Twitter	1200 × 600
Imagen compartida en LinkedIn	1200 × 627
Hero de README de GitHub	1200 × 600 (o el que use tu layout)

Ejemplos de incrustación

En Markdown / MDX (Astro, Next.js, blogs basados en MDX):

![Escenario cut-in: ego a 90 km/h, vehículo cortador a +20 km/h](./cut-in.svg)

En HTML con variante para modo oscuro:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./cut-in-dark.svg">
  <img src="./cut-in.svg" alt="Escenario cut-in: ego a 90 km/h, vehículo cortador a +20 km/h">
</picture>

En un README de GitHub con metadatos de tarjeta social:

![Figura escenario cut-in](./docs/img/cut-in.png)

Sugerencias de estilo para posts técnicos

• Un escenario por figura. Si estás llevando al lector a través de tres casos, dibuja tres figuras.
• Anotaciones en la figura. Etiquetas cortas (“TTC = 2,5 s”) incrustadas en la figura ahorran los ojos del lector; las explicaciones largas van en el texto circundante.
• Estilo de ego consistente en una serie. Si el post es parte de una serie, elige un color para el ego y mantenlo en todas las figuras.
• Sin capturas de pantalla propietarias. Las figuras genéricas con sabor a escenario de drawtonomy evitan la pregunta “¿esto es de un simulador?” y te dan confianza sobre los derechos de reutilización.

Para qué no sirve esto

• Ilustraciones fotorrealistas. drawtonomy es estrictamente 2D desde arriba. Para renders desde el punto de vista de un sensor, usa una captura de pantalla del simulador.
• Animaciones. drawtonomy exporta figuras estáticas. Para explicadores de escenarios animados (p. ej., cut-in a lo largo del tiempo), exporta la figura estática y anima por separado, o usa la exportación OpenSCENARIO con esmini para una reproducción grabada.

Lecturas relacionadas

• Figuras para artículos de conducción autónoma — el equivalente para artículos académicos.
• Diapositivas para revisión de diseño — el equivalente para presentaciones.
• Visualizar escenarios de cut-in y cambio de carril — los escenarios recurrentes que estarás dibujando.