Codia

Coming back to a codebase, the hard part isn't reading one file. It's seeing how everything fits together: which classes extend what, and what connects to what. Most tools make you drag boxes by hand, which is slow and goes stale fast. Others want you to upload your code to a server, which is a no for work code. I wanted the middle ground: paste code, get a diagram, and nothing leaves the browser.

A tool that turns your code into a UML diagram the moment you paste it. Pick Python, Java or TypeScript, drop in your code, and it draws out the classes, methods, fields and how they connect. There's a live editor on the left and the diagram on the right, a side panel that breaks down each class, and one-click export to SVG or PNG.

The stack stayed intentionally focused: Mermaid.js renders the diagrams, Monaco handles the code input, and plain TypeScript does the parsing.

The big lesson was knowing when not to reach for the obvious library. My first thought was to grab a real parser for each language, but that meant a bigger bundle and a lot of fighting their APIs, all to cover cases most pasted code never hits. Writing my own kept me honest: cover the common code well, and be clear about the rare stuff I don't handle. I also learned how fiddly text parsing gets once you leave the easy path: tracking indentation in Python, balancing brackets across lines. Building it fully client-side made privacy a constraint baked into every choice, which ended up making the app simpler, not harder.