diff --git a/ui/timetable-terminology.png b/ui/timetable-terminology.png
new file mode 100644
index 0000000..4812335
Binary files /dev/null and b/ui/timetable-terminology.png differ
diff --git a/ui/timetable.tsx b/ui/timetable.tsx
index 40e4844..b3a7843 100644
--- a/ui/timetable.tsx
+++ b/ui/timetable.tsx
@@ -5,6 +5,8 @@ const oneDayMs = 24 * 60 * 60 * 1000;
 const oneHourMs = 60 * 60 * 1000;
 const oneMinMs = 60 * 1000;
 
+// See timetable-terminology.png for an illustration of how these terms are related
+
 /** Point in time where a time slots starts or ends. */
 type Edge = { type: "start" | "end", slot: TimeSlot };
 
@@ -18,7 +20,11 @@ type Span = {
 	locations: Map<string, Set<TimeSlot>>,
 };
 
-/** Collection of adjacent spans containing TimeSlots that are close to each other in time */
+/**
+	Collection of adjacent spans containing TimeSlots that are close to each
+	other in time. The start and end of the stretch is aligned to a whole hour
+	and the endpoint spans are always empty and at least one hour.
+*/
 type Stretch = {
 	start: string,
 	end: string,