u/pennystudio

$185

Architectural Diagram

I'm vibe coding this game with claude code, the game grew more and more complicated. Despite numerous prompt and invariants I put into the various architectural document and .md files, the code still smells of duplication, parallel path, just doesn't feel clean.

As a stroke of genius, I thought, what if I ask claude to build me a visualization of the architecture of the game, starting from the game engine, and follow each data path, call sites to its end point? The result is remarkable, I think.

The diagram is human readable, I can click any block, and it will highlight its connections. Underneath the diagram is json, so it's machine readable, so claude agent could read this and "understand" the architecture instead of reading various documents and code base.

The moment it's built, it immediately paid dividends. I asked the agent to look at the diagram and spot any architectural gap, they found a few. So I ask the agent to modify the architecteral graph first before changing code. And as I review it, I also spotted a few more architectural gap that we could unify and simplify. For example, I saw a local server and a remote server implementation, that smells like duplication for me. So I ask the agent to build the game with remote PVP first, and fit the offline game in to the mold of the remove server. You paid a small price (miliseconds) of offline performance, but for a turn base game, it's negligible. Then I also spotted the duplication of remote and local client. Same story there.

At the end, we simplify and unify the architectural a lot. And as a bonus, any future feature add would drive through the architecture graph first, review it, then implement.

What do you think? Is this how the pros do it? Should I have started with this from the beginning?