Skip to content

README.md

Latest commit

 

History

History
65 lines (44 loc) · 2.18 KB

README.md

File metadata and controls

65 lines (44 loc) · 2.18 KB

About Project

This project is designed to analyze function calls within a JavaScript project and generate visual diagrams of the function call hierarchy using Mermaid.

Note: Currently, this tool only supports .js and .vue files

DEMO

How to use

default.mp4

Generated function call graph

all-fucntions-call-graph: 微信图片_20240727123249

functions-call-graph-with-filter: 微信图片_20240727123228

Features

  • Extracts all user defined functions from the project.
  • Analyzes function calls within the project.
  • Generates JSON files containing function call data.
  • Creates visual diagrams using Mermaid.
  • Filters diagrams based on specified criteria.

Installation

  1. Clone the repository:

    git clone https://github.com/SartreShao/function-visualization.git cd function-visualization

  2. Install dependencies:

    npm install

Usage

  1. Update the main function parameters in index.js:
  // replace with the project directory you need to analyze
  const directoryPath = "C:/Code/server/easylink.server";

  // replace with the folders in the project directory that need to be ignored 
  const ignoreFolders = ["node_modules", "dist", "public"];

  // replace with the name of the function you need to analyze
  // case insensitive, it doesn't even need to be the complete function name, just a part of the function name
  const filterText = "easyfile";
  1. Run the script:
   npm start

  1. The results will be generated in the following files:

    • diagram-all-function.mmd: A call graph of all user-defined functions in the specified folder.
    • diagram-filter-function.mmd: A call graph of functions related to the filter word in the specified folder.

  2. Process files generated by the program can be ignored:

    • result.json: JSON file containing all function calls.
    • diagram-id.mmd: Mermaid diagram with function IDs.