Diagram

A few lines of text become a diagram, drawn when the document is built. It reads and prints without JavaScript, and every diagram carries the same content in words.

Step through it

Four steps, each with its own words. Use the buttons or the arrow keys.

How a booking at Casa Exemplo travels
How a booking at Casa Exemplo travelsCasa ExemploBooking portalOwnerCaretakerGuestbooks a stayasks to holdreadies the houseconfirms
  1. The guest picks the dates and pays a deposit on the booking portal.
  2. The portal asks the owner to hold those dates, and the request waits in the owner's queue.
  3. The owner tells the caretaker, who airs the rooms and makes up the beds.
  4. The owner confirms, and the guest gets the address and the caretaker's number.
The source
title: How a booking at Casa Exemplo travels
Portal = Booking portal
group Casa Exemplo: Owner, Caretaker
Guest -> Portal: books a stay
> The guest picks the dates and pays a deposit on the booking portal.
Portal => Owner: asks to hold
> The portal asks the owner to hold those dates, and the request waits in the owner's queue.
Owner -> Caretaker: readies the house
> The owner tells the caretaker, who airs the rooms and makes up the beds.
Owner -> Guest: confirms
> The owner confirms, and the guest gets the address and the caretaker's number.

Flows, running down

A flow (=>) has something moving along it. It stays still in quiet and when motion is reduced.

Where the monsoon rain goes
Where the monsoon rain goesThe houseRoofGutterTankGardenKitchenruns offfillsoverflowsafter the filter
Read the diagram as text

Where the monsoon rain goes: 5 parts, 4 connections.

Roof (in The house), Gutter (in The house), Tank (in The house), Garden and Kitchen (in The house).

  1. Roof sends to Gutter: runs off.
  2. Gutter sends to Tank: fills.
  3. Tank sends to Garden: overflows.
  4. Tank to Kitchen: after the filter.
The source
title: Where the monsoon rain goes
direction: down
Roof => Gutter: runs off
Gutter => Tank: fills
Tank => Garden: overflows
Tank -> Kitchen: after the filter
group The house: Roof, Gutter, Tank, Kitchen

A loop back, and numbers on a narrow page

A connection that goes back against the flow loops round the side that meets no other box. Where a label cannot sit clear beside its own line, every connection carries its number instead, matching the steps.

How a direct booking reaches you
How a direct booking reaches youGuestYour siteYour bankRazorpaychooses datespaysconfirms, with the house manualthe payment, less the fee
  1. The guest picks dates on your own site.
  2. They pay by UPI or card, through Razorpay.
  3. Your site confirms the stay and sends the house manual.
  4. Razorpay pays the money into your bank, less its fee.
The source
title: How a direct booking reaches you
Guest = Guest
Site = Your site
Bank = Your bank
Guest -> Site: chooses dates
> The guest picks dates on your own site.
Guest => Razorpay: pays
> They pay by UPI or card, through Razorpay.
Site -> Guest: confirms, with the house manual
> Your site confirms the stay and sends the house manual.
Razorpay => Bank: the payment, less the fee
> Razorpay pays the money into your bank, less its fee.

Lines both ways

A plain line (--) and a two-way arrow (<->).

Who talks to whom during a stay
Who talks to whom during a stayGuestCaretakerOwnerCleanerday to dayevery eveningbooks
Read the diagram as text

Who talks to whom during a stay: 4 parts, 5 connections.

Guest, Caretaker, Owner and Cleaner.

  1. Guest and Caretaker, both ways: day to day.
  2. Caretaker and Owner, both ways: every evening.
  3. Guest is linked with Owner.
  4. Owner to Cleaner: books.
  5. Cleaner is linked with Caretaker.
The source
title: Who talks to whom during a stay
Guest <-> Caretaker: day to day
Caretaker <-> Owner: every evening
Guest -- Owner
Owner -> Cleaner: books
Cleaner -- Caretaker