Your website as a futuristic city: an n8n workflow turns the sitemap into districts and towers

Update 7 November: graphics upgrade. The city is now futuristic and shows the real structure of the website: every section is a district, every subpage a tower, and everything is clickable.

Try it first: your website as a city. Enter a domain, press “Build the city”, and a few seconds later the city stands. No domain at hand? The demo button fills in daniele-michelin.com.

How to read the city

• Centre = home page: the glowing spire in the middle is the home page, with a beacon. Multilingual sites get coloured rings, one per language.
• Districts = sections of the site: the workflow reads every URL in the sitemap and groups them by the first path segment. Each section, such as /blog or /tools, becomes a hexagonal platform with a hologram sign and its page count. Up to ten districts, the rest goes into the district “…”. Translated sections like /fehler, /en/errors and /it/errori are counted together.
• Towers in a district = subpages: the biggest subsections stand as labelled towers in the district, their height grows with the number of pages.
• Everything is clickable: clicking a district or a tower opens exactly that part of the website. The city is a sitemap you can walk through.
• Light bridges = load time: data packets run from the centre to every district. Up to 600 ms they are fast, above that slow, over 1500 ms a red “jam” blinks.
• Energy dome = security headers: six emitters for HSTS, CSP, nosniff, frame protection, Referrer-Policy and Permissions-Policy span a dome over the city. If a header is missing, a red leak flickers in its place.
• Energy core = TLS, antenna = e-mail: the core at the entrance shows the days left on the certificate, the antenna signals green, yellow or red depending on SPF and DMARC.
• City plan: below the graphic the same plan is listed with bars, for anyone who prefers reading to looking.

What the workflow shows

• Check first, then in parallel: the webhook first calls a checkpoint. It measures headers, SPF and DMARC, TLS and response time, and returns the final address after redirects. Then three HTTP nodes run at the same time: homepage, sitemap.xml and sitemap_index.xml.
• Merge: a Merge node with three inputs waits until all answers are in. If the sitemap is an index, the workflow fetches up to eight child sitemaps from the same host and extrapolates the page count. It follows the WordPress redirect to wp-sitemap.xml once.
• Code does the maths: the Code node “Stadt vermessen” (surveying the city) counts pages, kilobytes, scripts and images and recognises 40 technologies from headers and HTML. The AI calculates nothing.
• AI with rules: the city guide is gpt-oss-120b at IONOS in Germany. It gets the measurements as JSON and may use only those numbers. Three to four sentences, at most 380 characters, weaknesses told with gentle humour, no insults, no emojis, JSON only.
• Fallback: all HTTP nodes carry on after errors. If the AI does not answer or answers too briefly, a Code node writes the guide from the same numbers using a template. So the city always stands.
• Sharing with a picture: the server stores the city with a number and a link and draws a skyline as the preview image. WhatsApp and LinkedIn show the city when shared, not just a link.

Build it yourself

The workflow is ready as JSON to import. Placeholders are marked: the checkpoint address, the token and the page that receives the result. On my server the checkpoint is a small PHP script, so you need an endpoint of your own for it. Any OpenAI-compatible API works for the AI.

The skeleton also fits something serious: check first, then several requests in parallel, merge, calculate and let an AI put it into words. More workflows to click and download are on the n8n overview.

---

Originally published at daniele-michelin.com.