In the bubble tea shop flowchart, the step most worth looking at is when the boba sells out

Kevin Ngo posted a set of bubble tea shop business diagrams. The diagrams were drawn with JavaScript, using @poteto's /statechart skill, are open source, and are labeled Made with Claude Opus 5.5. This combination is worth a look: AI is involved in generating them, but the focus is still on business states.

The first diagram goes from queuing to getting the drink. Customers queue, order, confirm the order, and pay; the cashier starts making the drink. The diagram includes an exception branch: not enough boba, so the money is refunded. Many flowcharts only draw the happy path; this one attaches out-of-stock and refunds to the main flow. The most real moments in a bubble tea shop are often in those few minutes when the boba runs out.

The second diagram depicts a day. The store closes in the early morning, starts prep at 7 a.m., has busy and quiet periods after opening, enters a peak after school lets out, and at 9 p.m. if there are few people, closes the register and tidies up. It does not write the store as a straight line; rather, it lays out the operating rhythm.

The third diagram is more specific, drawing the parallel states of the barista and the boba pot. The barista is idle, takes an order and makes the drink, shakes and seals it, and calls numbers. The boba pot goes from full to empty, then cooks a new batch; the condition for cooking more is labeled when barista free. Making drinks and cooking boba wait on each other and constrain each other. This kind of concurrency relationship explains how the store operates better than a shift schedule.

Open source and Made with Claude Opus 5.5 are facts stated in the tweet. The value of state diagrams is not that they look cute, but that they force people to answer unglamorous details like out-of-stock, refunds, and parallel resources. Tools can generate diagrams; business constraints still have to come from people.