SO — Sherlyn Olalo

Sherlyn Olalo

Codia

Codia reads your code and draws the structure hiding inside it. You paste a file, pick the language, and it pulls out your classes, methods, fields, and inheritance, then renders a UML diagram you can save as SVG or PNG. It all runs in the browser, so your code never leaves your machine.

RoleFront End Developer
Year2025
ClientPersonal project
Stack
Next.js 15/React 19/TypeScript/Tailwind CSS/Mermaid.js/Monaco Editor/Framer Motion
01

The problem.

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 simple middle ground: paste code, get a diagram, and nothing leaves the browser.

02

What I built.

A tool that turns your code into a UML diagram the moment you paste it. You open it in the browser, pick Python, Java, or TypeScript, drop in your code, and it draws out the classes, methods, fields, and how they all 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. It works on any screen, and since nothing runs on a server, your code never leaves your machine.

Paste code, get UML — live editor on the left, Mermaid-rendered diagram on the right, SVG/PNG export

The tech stack stayed intentionally focused: Mermaid.js to render the diagrams, the Monaco editor for the code input, and plain TypeScript for the parsing. Choosing to write the parsers myself forced me to be honest about what actually mattered: cover the everyday code well, render it cleanly, and be upfront about the rare cases I don't handle.

Key decisions

Hand-written parsers — I wrote the code-reading logic for all three languages by hand instead of pulling in heavy libraries, which kept full control over what gets captured and how

Fully client-side — Everything runs in the browser, so there's no backend, no sign-up, and your code stays private

Lightweight by design — Each parser is around 150 lines and covers the most common code, keeping the whole app fast and easy to deploy anywhere

03

What I learned.

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, like tracking indentation in Python or balancing brackets across lines. And building it fully client-side made privacy a constraint baked into every choice, which ended up making the app simpler, not harder.