{"slug": "interactive-architectural-maps-of-your-repo-show-branches-and-commit-diffs-ai", "title": "Interactive architectural maps of your repo, show branches and commit diffs. AI", "summary": "RepoMap, a new open-source tool, extracts repository structure without sending source code to an LLM, generating interactive architectural maps for human and AI agent use. The tool reduces token consumption by providing a deterministic structural representation that agents can reuse for reasoning and visualization. It integrates with coding agents like OpenCode and Claude to streamline architectural understanding.", "body_md": "Give coding agents architectural awareness.\n\nRepoMap extracts the structure of any repository without sending source code to an LLM, then generates an interactive architectural map that both humans and AI agents can understand.\n\nModern coding agents spend a significant amount of time reconstructing a project's architecture.\n\nThey repeatedly open files, follow imports, inspect folders, and consume thousands of tokens just to answer questions like:\n\nWhere is authentication implemented? Which modules depend on the database? What architectural pattern does this project follow? How are components connected?\n\nRepoMap changes that workflow.\n\nInstead of asking the LLM to rediscover the architecture every session, RepoMap builds a deterministic structural representation once and lets the agent reason over that representation.\n\nsignificantly fewer tokens spent on repository understanding faster architectural reasoning interactive visualization for humans reusable architecture data for AI agents Features\n\n✅ Deterministic repository analysis\n\n✅ Zero source code sent to the LLM\n\n✅ Interactive architecture graph\n\n✅ Automatic architectural role detection\n\n✅ Architecture pattern recognition\n\n✅ Multiple graph layouts\n\n✅ Editable graphs with persistent branches\n\n✅ Git history visualization\n\n✅ Large repository support\n\nRepoMap separates structure extraction from architectural reasoning.\n\n```\nRepository\n     │\n     ▼\nDeterministic Analyzer\n     │\n     ▼\nRawAnalysis\n(no source code)\n     │\n     ▼\nLLM\n(architecture reasoning)\n     │\n     ▼\nRepoGraph\n     │\n     ▼\nInteractive visualization\n```\n\nThe analyzer never calls an LLM.\n\nIt scans the repository and extracts:\n\ndirectory hierarchy imports function signatures module relationships git information\n\nThe result is a compact RawAnalysis that describes the repository structure without exposing the source code.\n\nInstead of reading thousands of files, the LLM receives only the structured analysis.\n\nFrom that information it can:\n\nassign architectural roles identify architectural patterns improve module labels generate a visualization layout\n\nOnly one reasoning step is required.\n\nRepoMap renders the generated architecture as an editable graph.\n\nFeatures include:\n\nReact Flow visualization multiple layouts branch-based editing node inspection viewport culling persistent local storage Git-aware visualization\n\nRepoMap lets you explore repositories together with their Git history.\n\ninspect commits browse branches highlight added files highlight modified files highlight deleted files\n\nFuture versions will expand this into full architectural diff visualization.\n\nBecause repository exploration is mostly deterministic.\n\nFinding imports, discovering modules, following folders and extracting definitions does not require intelligence.\n\nLLMs should spend their context reasoning about architecture—not reconstructing information that software can extract automatically.\n\nThis dramatically reduces token usage while producing a richer architectural representation.\n\nDesigned for coding agents\n\nRepoMap was built to integrate naturally with tools such as OpenCode and Claude.\n\nInstead of repeatedly exploring the repository, agents receive a compact structural model that can be reused for reasoning, visualization and future analysis.\n\n```\ngit clone <repo-url>\ncd repomap-pipeline-v2\nnpm install\n```\n\nThe skill is auto-discovered by OpenCode and Claude from `.opencode/skills/repomap/`\n\n.\n\nQuick Start\n\n```\n# Analyze a local repository and serve the interactive map\nnode .opencode/skills/repomap/cli.js open my-repo\n\n# Or from code:\nimport { analyze } from './.opencode/skills/repomap/index.js'\nconst raw = await analyze({ localPath: '/path/to/repo' })\n# List all saved maps\nnode .opencode/skills/repomap/cli.js list\n{\n  \"meta\": {\n    \"repoName\": \"owner/repo\",\n    \"estimatedSize\": \"small|medium|large\",\n    \"languages\": [\"TypeScript\", \"Python\"],\n    \"totalFiles\": 42,\n    \"totalModules\": 8\n  },\n  \"nodes\": [\n    { \"id\": \"layer__src\", \"label\": \"Src\", \"type\": \"layer\", \"parentId\": null, \"files\": [], \"metadata\": {} },\n    { \"id\": \"module__src_core\", \"label\": \"Core\", \"type\": \"module\", \"parentId\": \"layer__src\", \"files\": [\"core/index.ts\"], \"metadata\": {} },\n    { \"id\": \"file__core_index_ts\", \"label\": \"index.ts\", \"type\": \"file\", \"parentId\": \"module__src_core\", \"files\": [\"core/index.ts\"], \"metadata\": { \"language\": \"TypeScript\", \"lineCount\": 150, \"complexity\": \"medium\" } }\n  ],\n  \"edges\": [\n    { \"id\": \"edge__file1__file2\", \"source\": \"file__core_index_ts\", \"target\": \"file__utils_helpers_ts\", \"edgeType\": \"engineering\", \"strength\": 3, \"label\": \"imports\", \"confidence\": \"high\" },\n    { \"id\": \"edge__layer__module\", \"source\": \"layer__src\", \"target\": \"module__src_core\", \"edgeType\": \"architecture\", \"strength\": 5, \"label\": \"contains\", \"confidence\": \"high\" }\n  ],\n  \"overlay\": {\n    \"version\": 0,\n    \"nodeOverrides\": {},\n    \"edgeOverrides\": {},\n    \"manualNodes\": [],\n    \"manualEdges\": []\n  }\n}\nnode cli.js list              List all saved maps\nnode cli.js open <name>       Open a map by name, file name, or partial match\n```\n\nAll commands run from `.opencode/skills/repomap/`\n\n.\n\n```\n.opencode/skills/repomap/\n  analyzer.js     Deterministic scanner: file tree, imports, definitions, signatures, git data\n  index.js        Orchestration: analysis → persist → serve visualization\n  cli.js          CLI wrapper (list, open)\n  visual_src/     React Flow-based interactive graph renderer (published as @frannn2114/repomap-visual)\n```\n\nThe pipeline is:\n\n**analyzer.js** extracts structure without calling an LLM**index.js** saves the result as a RepoGraph JSON and spawns a visual server**cli.js** provides`list`\n\nand`open`\n\ncommands for saved maps\n\nMIT&und", "url": "https://wpnews.pro/news/interactive-architectural-maps-of-your-repo-show-branches-and-commit-diffs-ai", "canonical_source": "https://github.com/agustinvillegas/repomap", "published_at": "2026-07-17 00:58:55+00:00", "updated_at": "2026-07-17 01:21:19.890640+00:00", "lang": "en", "topics": ["developer-tools", "ai-agents", "large-language-models", "ai-infrastructure"], "entities": ["RepoMap", "OpenCode", "Claude"], "alternates": {"html": "https://wpnews.pro/news/interactive-architectural-maps-of-your-repo-show-branches-and-commit-diffs-ai", "markdown": "https://wpnews.pro/news/interactive-architectural-maps-of-your-repo-show-branches-and-commit-diffs-ai.md", "text": "https://wpnews.pro/news/interactive-architectural-maps-of-your-repo-show-branches-and-commit-diffs-ai.txt", "jsonld": "https://wpnews.pro/news/interactive-architectural-maps-of-your-repo-show-branches-and-commit-diffs-ai.jsonld"}}