home blog

Pikchr Ep 1: So I have a weatherman, which also tells me the news

20 Sep 2026

I was reading this wonderful blog post from Yogiraj H on their project with a eInk screen.

In their article they shared an image of their architecture.

Architecture of Yogiraj’s project

I’ve recently learned about Pikchr and really loved the idea behind this diagramming language.

I’d thought it’d be fun to copy “by hand” the diagrams I find in the wild. Here’s my attempt at it!

weather Todo Reading Markets AQI Moon Hacker News HTTP Server Weather/AQI HN Yahoo Finance Display + ESP32 Click to see the code
A: [
  Weather: box invisible "weather"
  box invisible "Todo" "Reading"
  Markets: box invisible "Markets"
  box invisible "AQI" "Moon" at .5 below Weather
  News: box invisible "Hacker News" width 200%
]

HTTPServer: box thin "HTTP Server" radius .25cm with .w at 1.5cm right of A.e

WeatherAPI: box thin "Weather/AQI" radius .25cm with .w at HTTPServer.e + (1cm, 1.5cm)
HN: box thin "HN" radius .25cm with .w at HTTPServer.e + (1cm, 0cm)
Yahoo: box thin "Yahoo Finance" radius .25cm with .w at HTTPServer.e + (1cm, -1.5cm)

Border: box thin radius .25cm width A.width height A.height at A.center
text "Display + ESP32" with .n at 0.1cm below A.s
line thin from A.Weather.ne then to A.News.sw
line thin from A.Weather.sw then to A.Markets.se
line thin from A.Markets.nw then to A.Markets.sw

line -> from A.e + (3px, 5px) to HTTPServer.w + (-3px, -10px)

line -> from WeatherAPI.w to HTTPServer.ne + (6px, -5px)
line -> from HN.w to HTTPServer.e + (3px, 0px)
line -> from Yahoo.w to HTTPServer.se + (6px, 10px)