codetographer

Generate interactive .cgraph code-flow graphs from codebases.

3|2|Updated Nov 26, 2025
One-click install
npx skills add https://github.com/Kelvination/codetographer --skill codetographer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: codetographer
Source: https://github.com/Kelvination/codetographer/tree/main/skill
Command: npx skills add https://github.com/Kelvination/codetographer --skill codetographer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Codetographer provides a visual, interactive map of code relationships to replace lengthy textual explanations, helping teams quickly understand unfamiliar codebases.

Core Features & Use Cases

  • Generate .cgraph files that visualize code architecture and data flow for a given scope.
  • Emphasize the primary execution path with clear node labels, descriptions, and exact file locations.
  • Useful for onboarding, code reviews, and documentation by presenting a concise, navigable graph.

Quick Start

Ask Codetographer to diagram the code flow for a feature, for example, 'Show me the user authentication flow'.

Frequently Asked Questions about codetographer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate interactive code-flow graphs from my codebase?

To generate interactive code-flow graphs, provide a feature scope to map architecture and data flow. The output is a valid .cgraph JSON structure containing nodes, edges, and a layered layout with exact file locations for code visualization.

What is the best way to visualize code architecture for developer onboarding?

Visualizing code architecture for onboarding is best achieved by generating interactive code maps that replace lengthy textual explanations. This navigable graph presents module relationships and primary execution paths to help teams quickly understand unfamiliar codebases.

Can I use code visualization maps for code reviews and feature behavior analysis?

Yes, you can use code visualization maps for code reviews and feature behavior analysis. The generated graph emphasizes the primary execution path with clear node labels and descriptions, presenting a concise, navigable overview of data flow and module relationships.

How do I create a .cgraph JSON file to map module relationships?

You create a .cgraph JSON file by requesting a diagram for a specific feature scope. The output includes version, metadata, nodes, edges, and a layered layout, with each node containing a location, label, type, and description detailing module relationships.

Do I need any specific dependencies to visualize data flow and module relationships?

No specific dependencies are required to visualize data flow and module relationships. The process directly analyzes your codebase scope to produce the interactive graph output without relying on external components or setup prerequisites.

What are the limitations of using code-flow graphs for code understanding?

Code-flow graphs for code understanding are limited by the provided scope, focusing on primary execution paths and module relationships rather than rendering the entire codebase. The output is a static .cgraph JSON structure requiring a compatible viewer for interactive navigation.