Parker Rex
All videos
Parker Rex

Vibe Coders Need to Learn Software Architecture Basics (Extension to Help)

May 22, 2025

Watch on YouTube@parkerrex

Two tools to speed up understanding a new codebase: V Explain for architecture diagrams and call graphs, and Augment for Claude 4–powered AI help inside your editor. This demo uses an Astro site to show how the tools surface project structure and context quickly.

Tools in focus#

  • V Explain
  • What it does: automatically generates architecture diagrams, function graphs, and more from a codebase. It indexes the project to reveal the call graph, file tree, libraries, and data flow.
  • How it feels to use: you can see a left-side chart with the architecture and, on the right, access to the index and other tooling. Right-click on a function name to view its call graph; right-click selected text to generate a diagram.
  • Notable perks: shows a lot of project context in one view, including where data comes from (JSON) and how the site is composed (SEO, Tailwind, etc.). The demo notes it’s free.
  • Limitations: certain languages/patterns (e.g., some Astro setups) may render call graphs less helpful; indexing speed depends on the codebase.
  • Augment
  • What it is: an editor extension that ships with Claude 4, designed to give deeper AI-assisted insights as you explore and modify code.
  • How it fits in: after indexing with V Explain, Augment surfaces FAQs, project information, and guided prompts to help you understand decisions and tradeoffs.
  • Take on it: the presenter hasn’t fully explored Augment yet but highlights that it should offer “everything you’d expect from a cursor-based AI assistant and more.”
  • Caveats: more to explore in a deeper setup; Claude 4 integration means you’ll want to be mindful of prompts and context length.

Astro example walkthrough#

  • What’s being examined: an Astro website with real-world structure
  • Top-down flow: server renders the page layout; assets are served and wrapped into the page layer; meta and context are injected into components.
  • Component map: the diagram surfaces the components and their file names, plus the libraries involved.
  • Data sources: JSON files show how data is passed in (no backend in this example).
  • SEO and styling: shows SEO setup and Tailwind usage.
  • Practical takeaway: this kind of view helps you quickly understand where data, layout, and assets live without digging through files one by one.

Practical takeaways and actionable tips#

  • Use V Explain to build a living map of a codebase:
  • Index the project to get a visual call graph and file tree.
  • Right-click function names to inspect call graphs; right-click text to generate diagrams for difficult sections.
  • Leverage the left diagram to understand how the site renders, where data and assets flow, and how components are wired together.
  • Pair with Augment for deeper context:
  • Let Augment surface project FAQs and summaries after indexing.
  • Use Claude 4–powered prompts to reason about design decisions, bottlenecks, and potential refactors.
  • Plan a deeper setup exploration for configurations, architecture decisions, and future-proofing.
  • For onboarding teams:
  • Introduce V Explain as a quick ramp tool to visualize architecture and data flow.
  • Use Augment for onboarding notes, rationale behind choices, and consistent context across tasks.
  • Be mindful of limitations:
  • Some frameworks (like Astro) may not yield perfectly intuitive call graphs in every situation.
  • AI assistants are powerful, but prompts and context length matter; verify critical insights with the codebase directly.

Next steps#

  • Expect a deeper dive focused on configuring Augment and getting the most out of Claude 4 within the editor.
  • Try both tools on your current codebase to compare how much cognitive load you can save during ramp-up.
Transcript

standing up a quick landing page for the community and wanted to show you some of the new tools that I'm finding helpful when ramping up on code bases. So, this one on the left, I haven't run this yet. I wanted to wait. It's called V Explain and the promise is that it does a bunch of architecture diagramming as well as explanations. And so, you can also get function graphs. That's what it's doing right now. That's on the left side. And then on the right side, I have augment. And I'm going to hit index. So, it'll go and index it. I picked this tool up because regardless of how many good prompts you can chain together, the context is always the bottleneck for me. So, let's take a look at this. On the left, it has this chart. This is an Astro website. So, we can see we've got quite a bit of information here. Honestly, this should be its own page. Wow. You've got from the top down, you interact with the web server. The web server renders the layout and the assets are served. That wraps the page layer, manages the meta, injects the context into these components. This is nice. And then those are all the different components with the file names. You can see different libraries that are used. That's pretty cool. And what else do we have here? We have some JSON files. It looks like it's using just to pass in data. There's no backend. Manages the SEO. Includes Tailwind. Wow, that is nice. That is really nice. This is free, too. So, what else can we do with this? the call graph. View call graph. Right click the function name and you can see the call graph. This wouldn't be very helpful in Astro, but you can also see the file tree and what's the playground. Right click on selected text in the editor. Generate the diagram. Okay, cool. So, this thing is great. I really like this. That's called V explain. It is in the extension store. Someone posted on Reddit that they started it yesterday. Then over here, as soon as it's done indexing, it's going to tell me what all the key features are. It's going to tell me some of the information about the project and it gives me FAQs. I'm going to have a big deep dive on the augment setup. It ships with Claude 4. I haven't used it yet, but it has everything that you would expect from cursor and more. So, be talking about that more and more and more.