WEBVTT 00:00:00.000 --> 00:00:06.480 You join a new team, you clone the repo, and you open the code base. And there it is, a 200,000 00:00:06.480 --> 00:00:24.785 line code base looking at you like a deer in the headlights. So you do what every dev does, you grep, we jump between files and we probably ask Claude to explain this repo. What if you got a map, a real interactive map that teaches you the code base? Flows, architecture layers, change impact, 00:00:25.250 --> 00:00:38.850 this is understand anything. And it's already hit over 14,000 stars on GitHub in weeks and a lot of devs have been talking about it. In the next minute, I'll show you how this works and how it's gonna immensely speed up your understanding of your code base. 00:00:44.285 --> 00:00:47.805 Understand anything is an open source Claude code plugin. 00:00:47.805 --> 00:00:52.765 It can also fit into workflows with tools like cursor, copilot, and Gemini CLI. 00:00:53.130 --> 00:01:00.650 You point it at a repo in even a knowledge base and it turns that project into a queryable interactive knowledge graph. 00:01:00.810 --> 00:01:12.965 It does this with static analysis plus multi agent LLM processing. But the important part is not the tech stack. The important part is the part it actually solves because every dev has had this problem. 00:01:13.125 --> 00:01:18.645 You are new to some kind of legacy code base, legacy app. The docs are outdated. 00:01:18.805 --> 00:01:20.805 The engineer who knew everything 00:01:20.805 --> 00:01:41.725 left six months ago, and your AI coding agent just keeps guessing over and over again. That is where this tool becomes really helpful. So let's run it. If you enjoy coding tools to speed up your workflow, be sure to subscribe. We have videos coming out all the time. Now here's a medium sized project. It's big enough to be really annoying, but small enough that I can actually show you how cool this is. 00:01:42.125 --> 00:01:45.165 It's just a repo I cloned from Google microservices 00:01:45.165 --> 00:01:49.405 and it's small enough that we can actually test this without having to pretend anything. 00:01:49.920 --> 00:02:00.480 First, I'm gonna install the plugin. Right here in Claude, plugin install understand anything. Once this generates, we need to reload the plugins of course, and then we just have to run understand. 00:02:00.880 --> 00:02:05.025 Now it's gonna scan the entire repo. It pulls out structure, 00:02:05.105 --> 00:02:06.145 relationships, 00:02:06.225 --> 00:02:07.185 key modules, 00:02:07.425 --> 00:02:09.425 and likely business concepts. 00:02:09.505 --> 00:02:24.440 Now we can run the dashboard command to launch everything. Now first, this took ages to run, like thirty minutes, and it burned a boatload of tokens. So having a good Claude plan is a must. I have clawed max and this used 25% of my rate, so it burns and it burns fast. 00:02:24.760 --> 00:02:35.425 But once it is done, we can open this dashboard, and this is the really cool part that really hits home. I can zoom out and see high level architecture, I can zoom in and access internal parts. 00:02:35.585 --> 00:02:40.065 I can click to see the code breakdown and how all this code is connected. 00:02:40.225 --> 00:02:42.945 I can even click in and view the actual code itself. 00:02:43.105 --> 00:02:45.905 Then I can search for something here like payments. 00:02:46.480 --> 00:02:56.240 Now normally, I'd be jumping between through routes, services, models, handlers, just docs that aren't even useful anymore, and here the tools pull the pieces together. 00:02:56.480 --> 00:02:58.160 Now I can click guided 00:02:58.160 --> 00:03:06.385 tour and it walks through the flow in order. The entry point, the validation, the logic, database, external APIs, 00:03:06.385 --> 00:03:07.105 air handling. 00:03:07.425 --> 00:03:20.610 That's already really useful. This guided tour breaks everything down, we can go into it, access the different components. That's the difference between hey, this is a really cool graph and I would actually check this before touching production code. 00:03:20.770 --> 00:03:23.170 But now the obvious question here is, 00:03:23.490 --> 00:03:28.770 don't we already have tools like this? As devs, we don't really need any more pretty dashboards. 00:03:29.235 --> 00:03:35.315 We need less wasted time and this tool goes after one of the biggest time syncs in software. 00:03:35.555 --> 00:03:44.195 Getting context, right? Where is all this connected? How is it useful? People are testing it on large projects, legacy Java monoliths, microservice repos, 00:03:44.540 --> 00:03:45.900 hundreds of files, 00:03:46.060 --> 00:03:56.300 and the reaction is kinda what I got here. This would have saved me my first two weeks in the job because it breaks everything down, it connects everything, and it shows us how it's intertwined. 00:03:56.300 --> 00:04:03.075 That's the first really big use case, onboarding. So instead of saying read these 12 pages and ask around if anything's confusing, 00:04:03.155 --> 00:04:09.235 that's already confusing, we can now say open the graph, take the tour, then we can ask better questions. 00:04:09.395 --> 00:04:25.250 Now, the second really good use case is AI agents because most AI coding tools are only as good as the context that we give them. If the agent sees three files, it's just gonna guess. If it has a structured map of the system with domains, flows, dependencies 00:04:25.250 --> 00:04:26.610 and actual explanations, 00:04:26.975 --> 00:04:39.695 it has a better chance of making the right change in the first place. Then of course, there's refactoring, right? Before we touch the code, we can now ask, what does this code depend on? What flow does it belong to? What might break if it moves? 00:04:40.210 --> 00:04:44.610 That is how you avoid turning a one line change into a major event. 00:04:44.690 --> 00:05:00.195 And this is the real reason devs are pretty excited about this project. Not because we care about diagrams, I like diagrams, right? They're cool, they're useful and visual, but we hate being lost. Now, this is where we need to be careful because devs have seen code visualization tools before. 00:05:00.355 --> 00:05:05.395 IDE graphs, source graph style navigation, NX graphs, tree setter visualizers, 00:05:05.635 --> 00:05:08.780 and a lot of them have the same exact problem. 00:05:08.860 --> 00:05:11.100 What do they do? They show structure, 00:05:11.180 --> 00:05:17.340 but they don't explain the actual meaning. They tell you this file imports that file. Great, 00:05:17.420 --> 00:05:46.420 but why? What flow is this a part of? Where does the request start? What breaks if I change it? That's the missing layer. Understand anything is trying to add that layer. Instead of only showing as a typescript file or something else, it tries to turn into something closer to an actual flow of how things work. That's the big things here. From files to meaning, from imports to system behavior, from here are the pieces to here is how the machine works. Compared to many LLM or rag code tools, 00:05:46.580 --> 00:05:48.500 it is also more visual and more teachable. 00:05:48.915 --> 00:05:56.835 A lot of AI code tools are basically just search boxes. You ask a question, you get an answer. This gives you a full on breakdown 00:05:56.835 --> 00:05:58.355 helping us understand 00:05:58.435 --> 00:06:20.825 where everything is going, what's intertwined, how it's connected with allowing us to actually see the code. Now, let's talk about what people actually like. The obvious win here was onboarding. If you're joining a large code base, this gives you a good starting point. Also, the architecture layers, right? These are really built out. You can start at the system level and then drill down into modules and implementation details. 00:06:20.985 --> 00:06:28.745 Diff impact is another big one. Every experienced dev knows the fear of making a tiny change in a code base they don't actually understand yet. 00:06:29.170 --> 00:06:36.450 For Claude code users, the graph can also become better context. So instead of dumping random files into a prompt, 00:06:36.610 --> 00:06:39.250 you give the agent structured architecture knowledge. 00:06:39.330 --> 00:06:41.490 It's also free, MIT licensed, 00:06:41.570 --> 00:06:53.465 incremental and designed to work across multiple dev environments. Now, the skeptical side, when a project blows up this quickly, we start to ask the question, is this useful or did it just win the GitHub algorithm? 00:06:53.465 --> 00:06:57.865 That's a good question to ask. There are also the LLM dependencies, 00:06:57.865 --> 00:06:59.545 that means token cost. 00:06:59.625 --> 00:06:59.865 This 00:07:00.480 --> 00:07:04.960 blew up on token cost. So it took a while, it took a lot of tokens, 00:07:05.120 --> 00:07:22.321 make sure you have a good plan if you're gonna use this. You still need good judgment, this just gives you that overview. It doesn't replace reading code, it just helps you understand it better where everything is going. If you enjoy coding tools and tips like this, be sure to subscribe to the BetterStack channel. We'll see you in another video.