Scenariofiguren voor blogposts en technische artikelen

Technische blogs, Medium/Substack-posts, GitHub-READMEs en nieuwsbrieven over autonoom rijden en ADAS hebben regelmatig een duidelijke scenariofiguur nodig: het kruispunt dat je uitlegt, het randgeval dat je doorloopt, de rijstroopiconfiguratie waarover je code redeniert. drawtonomy is redelijk voor die figuren, met uitvoerformaten afgestemd op het web.

Deze pagina is het blog-/artikelequivalent van Figuren voor autonome rijpapers — hetzelfde canvas, andere uitvoerbeperkingen.

Wat blog- en artikelfiguren nodig hebben

De beperkingen zijn anders dan een paperfiguur:

• Insluitbaar. De figuur moet zonder conversie in een Markdown/MDX/Notion/Ghost/Substack-editor vallen.
• Lichte/donkere modus veilig. Veel technische blogs renderen in beide. De figuur moet in beide leesbaar zijn, of een donkere modusvariant hebben.
• Klein bestandsformaat. Een 4 MB rasterafbeelding schaadt laadsnelheid en SEO. SVG of gecomprimeerde PNG is de juiste standaard.
• Social-card vriendelijk. Wanneer de post wordt gedeeld op Twitter/LinkedIn/Hacker News, is de OG-afbeelding gewoonlijk de figuur. Beeldverhouding en leesbaarheid op kleine grootte zijn belangrijk.
• Herewerkbaar. Bloggers updaten posts. De figuur moet later bewerkbaar zijn zonder hertekenen.

De standaardinstellingen van drawtonomy passen hier goed bij:

• .drawtonomy.svg (het native SVG-formaat van drawtonomy) is een geldige SVG, dus het sluit in elk HTML/Markdown/MDX-context in — en het is herewerkbaar in drawtonomy wanneer de post een update nodig heeft.
• PNG-export is beschikbaar met hoge DPI wanneer SVG niet wordt ondersteund (LinkedIn-previews, bijvoorbeeld).
• Het oneindige canvas laat je een brede figuur tekenen die goed bijsnijdt naar OG-afmetingen.

Aanbevolen workflow

Een herhaalbare workflow voor een typische blogfiguur:

1. Kies het scenario. Eén scène, één punt. Probeer niet een hele pipeline in één figuur te illustreren.
2. Schets op drawtonomy.com. Wegen, rijstroken, kruispunten, voertuigen, voetgangers, paden, tekstlabels.
3. Stijl voor zowel lichte als donkere modus. Houd je aan kleuren die werken op een #fff- en op een #1a1a1a-achtergrond. Vermijd pure witte lijndikten (onzichtbaar op licht) en pure zwarte lijndikten (onzichtbaar op donker). Middengrijze lijndikten werken goed op beide.
4. Stel het canvas-uitsnijden in. Positioneer de figuur zodat het meest relevante deel in het midden zit. Als je dezelfde figuur als OG-kaart gebruikt, kader dan ruwweg op 1200 × 630.
5. Sla op als .drawtonomy.svg. Dit is de bewerkbare bron. De meeste blogposts worden minstens één keer na publicatie bijgewerkt — typografische fixes, vervolgcorrecties, “ik heb een gerelateerd diagram in een vervolgpost toegevoegd” — en .drawtonomy.svg maakt elke update een bewerking in plaats van een hertekening.
6. Exporteer de assets die je daadwerkelijk verzendt. Vanuit dezelfde scène:
   • .png op 1200 × 630 voor de OG-kaart (LinkedIn/X/Hacker News-previews).
   • Platte SVG voor de hoofdtekst van de post als je blogplatform een gewone SVG prefereert boven de .drawtonomy.svg (de meeste moderne platforms accepteren beide, aangezien beide geldige SVG’s zijn).
7. Sluit in. Voeg in je blog-editor in. Voeg een bijschrift toe — zoekmachines en schermlezers vertrouwen er allebei op.

Afmetingen en resolutie

Voor SVG maakt resolutie niet uit; de figuur schaalt naar wat de indeling beslist. Voor PNG zijn handige afmetingen:

Gebruik	Grootte
Inline blogfiguur (volledige breedte)	1600 × 900
Inline blogfiguur (halve breedte)	800 × 450
OG / social card	1200 × 630
Twitter card	1200 × 600
LinkedIn gedeelde afbeelding	1200 × 627
GitHub README hero	1200 × 600 (of wat je README-indeling gebruikt)

Stijlsuggesties voor technische posts

• Eén scenario per figuur. Als je de lezer door drie gevallen leidt, teken dan drie figuren.
• Annotaties op de figuur. Korte labels (“TTC = 2,5 s”) ingebed in de figuur besparen de lezer zijn ogen; lange uitleg gaat in de omringende tekst.
• Consistente ego-stijl over een serie. Als de post deel uitmaakt van een serie, kies één ego-kleur en houd dit over alle figuren.
• Geen propriëtaire schermafbeeldingen. Generieke, scenario-gekleurde figuren vanuit drawtonomy vermijden de “is dit van een simulator?”-vraag en geven je vertrouwen over hergebruiksrechten.

Waarvoor dit niet bedoeld is

• Fotorealistische illustraties. drawtonomy is strikt bovenaanzicht 2D. Voor renders van het eerste-persoon-perspectief van een sensor, gebruik een simulatorschermafbeelding.
• Animaties. drawtonomy exporteert statische figuren. Voor geanimeerde scenario-uitleggers, exporteer de statische figuur en animeer apart, of gebruik de OpenSCENARIO-export met esmini voor een opgenomen afspeling.

Verwante pagina’s

• Figuren voor autonome rijpapers — het academische-paper-equivalent.
• Dia’s voor ontwerpreviews — het presentatie-equivalent.
• Inhaalmanoeuvre- en rijstrookwisselscenario’s visualiseren — de terugkerende scenario’s die je zult tekenen.