SCAST

🚀 🔱 Static Code Analysis and Visualization (SCAST)

SCAST is a programming tool that converts code into UML diagrams and flowcharts, offering a clear and intuitive way to understand code structures.

[English]/Chinese

🔱SCAST is a programming tool that transforms code into UML diagrams and flowcharts.

📽️ Video Demo
📽️ Tutorial
📽️ MCP

✨ Features

• Multi - language Support: Plans to support multiple programming languages, including JavaScript, TypeScript, C#, Python, and Vue.
  • JavaScript (using acorn)
  • TypeScript (currently using typescript, will switch to estree later)
  • C# (currently using a custom parser, will no longer be supported in the future)
  • Python (plans to switch to filbert)
  • Vue (to be supported later)
• Visualization Principle: Parses code into an Abstract Syntax Tree (AST) through a parser, conducts static analysis, and then visualizes it using Mermaid and D3.

🚀 Quick Start

You can try the Online Version, or download this repository and open SCAST.html in your browser. For developers, you can use npm run server to deploy it to a server. Or integrate it into your AI client as an MCP server.

📦 Installation

MCP Function

1. Download the source code:

   git clone https://github.com/yourusername/scast.git
   cd scast
   

2. Install dependencies:

   npm install
   

3. Configure the MCP server:
   • Create a config.json file.
   • Add the following content to config.json:

     {
       "port": 3000,
       "host": "localhost",
       "debug": true
     }
     

💻 Usage Examples

scast_analysis

• Function: Perform code analysis and generate visualization results.
• Description: Supports syntax analysis of multiple languages and generation of dependency graphs.

scast_retriever

• Function: Extract specific information from code.
• Description: Used for data retrieval and pattern matching.

Ollama AI Integration

• Installation Steps:

  pip install oliviaai
  

• Configuration in ai.js:

  const ai = new OliviaAI({
    apiKey: 'your_api_key',
    model: 'gpt-4'
  });
  

📚 Documentation

ESTree Compatibility

• Refer to the detailed documentation at ESTree.

D3 Chart Types

• Force - directed graph
• Tree diagram
• Hierarchical structure diagram
• Network diagram
• Timeline diagram

For more detailed information, please refer to the relevant image link: