Draw a Sequence Diagram

I got the code checked out, got secrets setup, and launched the local dev environment. The response in my browser was less than helpful: 502 Bad Gateway.

There were many moving parts in the docker-compose.yml. There were actually two docker-compose.yml files in play. One of my favorite tools for helping recover from mental stack overflow is drawing sequence diagrams. Drawing a sequence diagram takes time. It forces me to slow down, trace through the code or study the network tab in the web browser inspector. Slowing down in this way changes what I have in my head as I read the code. What's more, once I've drawn the diagram, I can share that picture with colleagues to drive discussion about what is actually happening.

In this specific case, tracing through the browser inspector's network tab and then following the details in the docker-compose.yml helped me find something really simple. I needed to build the database. But the process was not simple to discover that in this case "502 Bad Gateway" meant "create the dabase". The result is a helpful artifact for thinking through all the moving parts in the dev environment. Moreover, there's a technique that can be applied the next time there's a less than helpful error message.

Sequence Diagram editor