visualize-code-structure

Generate visual diagrams of code structure to analyze classes, methods, and attributes in repositories or files using ASCII, Mermaid, or DOT formats.

Input Schema

TableJSON Schema

Name	Required	Default
`repositoryUrl`	No
`filePath`	No
`fileContent`	No
`showMethods`	No
`showAttributes`	No
`format`	No	mermaid

Implementation Reference

src/features/visualization/index.ts:60-87 (handler)

Handler function that invokes generateCodeStructureVisualization with parameters and returns MCP-formatted response or error.

async ({ repositoryUrl, filePath, fileContent, showMethods, showAttributes, format }) => {
  try {
    const visualization = await generateCodeStructureVisualization({
      repositoryUrl,
      filePath,
      fileContent,
      showMethods,
      showAttributes,
      format
    });
    
    return {
      content: [{
        type: "text",
        text: visualization,
        _metadata: format === "mermaid" ? { format: "mermaid" } : undefined
      }]
    };
  } catch (error) {
    return {
      content: [{
        type: "text",
        text: `Error generating visualization: ${(error as Error).message}`
      }],
      isError: true
    };
  }
}

src/features/visualization/index.ts:52-59 (schema)

Zod input schema defining optional repositoryUrl/filePath/fileContent, booleans for showing methods/attributes, and format enum.

{
  repositoryUrl: z.string().optional(),
  filePath: z.string().optional(),
  fileContent: z.string().optional(),
  showMethods: z.boolean().default(true),
  showAttributes: z.boolean().default(true),
  format: z.enum(["ascii", "mermaid", "dot"]).default("mermaid")
},

src/features/visualization/index.ts:50-88 (registration)

Registration of the 'visualize-code-structure' tool on the MCP server within registerVisualizationFeatures, including schema and handler.

server.tool(
  "visualize-code-structure",
  {
    repositoryUrl: z.string().optional(),
    filePath: z.string().optional(),
    fileContent: z.string().optional(),
    showMethods: z.boolean().default(true),
    showAttributes: z.boolean().default(true),
    format: z.enum(["ascii", "mermaid", "dot"]).default("mermaid")
  },
  async ({ repositoryUrl, filePath, fileContent, showMethods, showAttributes, format }) => {
    try {
      const visualization = await generateCodeStructureVisualization({
        repositoryUrl,
        filePath,
        fileContent,
        showMethods,
        showAttributes,
        format
      });
      
      return {
        content: [{
          type: "text",
          text: visualization,
          _metadata: format === "mermaid" ? { format: "mermaid" } : undefined
        }]
      };
    } catch (error) {
      return {
        content: [{
          type: "text",
          text: `Error generating visualization: ${(error as Error).message}`
        }],
        isError: true
      };
    }
  }
);

src/features/visualization/visualizer.ts:67-111 (helper)

Core helper function that fetches/uses code content, analyzes structure with analyzeCode, and generates visualization in ascii/mermaid/dot format.

export async function generateCodeStructureVisualization(options: {
  repositoryUrl?: string;
  filePath?: string;
  fileContent?: string;
  showMethods: boolean;
  showAttributes: boolean;
  format: string;
}): Promise<string> {
  const { repositoryUrl, filePath, fileContent, showMethods, showAttributes, format } = options;
  
  // Get the code to analyze
  let code: string;
  let language: string = "";
  
  if (repositoryUrl) {
    const repoPath = await getRepository(repositoryUrl);
    
    if (!filePath) {
      throw new Error("filePath must be provided when repositoryUrl is specified");
    }
    
    const fullPath = path.join(repoPath, filePath);
    code = fs.readFileSync(fullPath, 'utf8');
    language = path.extname(filePath).slice(1);
  } else if (fileContent) {
    code = fileContent;
  } else {
    throw new Error("Either repositoryUrl with filePath, or fileContent must be provided");
  }
  
  // Analyze the code structure
  const analysis = analyzeCode(code, language);
  
  // Generate the visualization in the requested format
  switch (format) {
    case "mermaid":
      return generateMermaidClassDiagram(analysis, { showMethods, showAttributes });
    case "dot":
      return generateDotClassDiagram(analysis, { showMethods, showAttributes });
    case "ascii":
      return generateAsciiClassDiagram(analysis, { showMethods, showAttributes });
    default:
      throw new Error(`Unsupported format: ${format}`);
  }
}

src/features/visualization/visualizer.ts:202-236 (helper)

Helper function to generate Mermaid class diagram from code analysis, showing classes, methods, attributes (placeholders).

function generateMermaidClassDiagram(analysis: any, options: { showMethods: boolean, showAttributes: boolean }): string {
  const { classes, functions } = analysis;
  const { showMethods, showAttributes } = options;
  
  let mermaid = "classDiagram\n";
  
  // Add classes
  for (const className of classes) {
    mermaid += `  class ${className} {\n`;
    
    // Add attributes and methods if available and requested
    if (showAttributes) {
      mermaid += `    +attribute: type\n`;  // Placeholder - would need actual analysis
    }
    
    if (showMethods) {
      mermaid += `    +method()\n`;  // Placeholder - would need actual analysis
    }
    
    mermaid += "  }\n";
  }
  
  // Add standalone functions if no classes
  if (classes.length === 0 && functions.length > 0) {
    mermaid += `  class Functions {\n`;
    
    for (const func of functions) {
      mermaid += `    +${func}()\n`;
    }
    
    mermaid += "  }\n";
  }
  
  return mermaid;
}

CodeAnalysis MCP Server