Interactive Map

You build a map by writing one JSON map definition and filling a prebuilt viewer with it. Do not write HTML, CSS or JavaScript for the page. scripts/render.py (Python 3, standard library only) checks the map and builds one HTML page from the viewer in assets/viewer/. Paths are relative to the folder that contains this file.

1. Write the map definition

Start from an example, copy its structure and replace the content. Write only the content: render.py fills in the interface strings, settings and timings (see scripts/defaults.py), and icons, logos and roles from the library.

• examples/kutt-url-shortener.json: a full map of a real repository (the Kutt URL shortener) in C4 terms: context on the overview, containers and components on the map, node shapes, library icons and logos, four flows, a build order, a tour and the project structure. Use it as the main reference.
• examples/privatebin-pastebin.json: a second repository map (the PrivateBin pastebin) written with no layout at all; render.py places everything. Start from it when you let the layout be automatic.
• examples/healthchecks-cron-monitor.json: a third repository map (the Healthchecks cron job monitor): a web app plus background loops that share a database, with the automatic layout steered by layout.grid.
• examples/fastapi-service.json: the smallest complete map, showing what a map must contain.