As boring as it may sound, architectural observability transforms the life of any developer. Until now, it has only been used in the context of infrastructure. With Next.js being a full-stack framework, it was time I turned my passion into something useful and cool.

I decided to create the most useful diagram possible directly from a Next.js codebase. By putting in plenty of love and my know-how from my days working at Google Search to reduce the clutter, I focused on the greatest user-impacting insights from a developer's standpoint. The end result turned out to be a diagram generator for frontend components to server actions flow. If you develop with Next.js, you'll love this experience.

Here's a quick review of ApiDiagram:

• Real-Time Updates: ApiDiagram generates diagrams directly from the TypeScript source code.
• Elegant User Interface: ApiDiagram utilizes Mermaid.js for the cleanest visual representation.
• Exact Version Control: ApiDiagram displays the git commit hash of the repository snapshot.
• Single Source of Truth: ApiDiagram statically analyzes source code using TypeScript.

• Limited Collaboration Capabilities: No way to collaborate yet. Stay tuned :)
• Incapable of Managing Cloud Resources: The diagram cannot assist with managing cloud resources.

The tool is located at apidiagram.com.

Currently the tool only supports public repos. There is a leaderboard on the website of all the most viewed public diagrams. I am working on the private repo support. If you're interested leave a comment and I'll let you know first!

The top most viewed repo happens to be vercel/ai-chatbot likely because I feature them as the example

I'm also working on a GitHub Action/App that will do an architectural diff on the PR. The core idea is to get insights into architectural changes affecting end-users on every code change. It's still in the works, but I would love to hear any thoughts. It's like an instant mini design review on each PR when there is a major change.