Skip to content

PositiveSecurity/ton-graph

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

TON Graph

A Visual Studio Code extension for visualizing function call graphs in TON smart contracts written in FunC, Tact, and Tolk.

Developed by PositiveWeb3 security researchers.

TON Graph visualization

Features

  • Parse and visualize function call relationships in multiple contract types:
    • FunC (*.fc, *.func)
    • Tact (*.tact)
    • Tolk (*.tolk)
  • Interactive diagram with cluster-based organization
  • Zoom functionality for better navigation
  • Filter functions by type (regular, impure, inline, method_id)
  • Filter functions by name
  • Export diagrams in multiple formats:
    • Mermaid (*.mmd)
    • SVG
    • PNG
    • JPG
Export diagrams in multiple formats
  • Automatic color coding of different function clusters
  • Optimized performance with Mermaid library caching

Installation

  1. Open Visual Studio Code
  2. Go to Extensions view (Ctrl+Shift+X)
  3. Search for "TON Graph"
  4. Click Install

Usage

  1. Open a contract file (*.fc, *.func, *.tact, or *.tolk)
  2. You can visualize a contract in multiple ways:
    • Press F1 or Ctrl+Shift+P to open the command palette and type "TON Graph: Visualize Contract"
    • Right-click on contract code in the editor → TON Graph: Visualize Contract
    • Right-click on a contract file in the Explorer panel → TON Graph: Visualize Contract
  3. The extension will analyze your contract and display a function call graph

Visualizing Projects with Imports

You can also visualize an entire contract including all imports:

  1. Open a main contract file (*.fc, *.func, *.tact, or *.tolk)
  2. Visualize the project in one of these ways:
    • Press F1 or Ctrl+Shift+P and type "TON Graph: Visualize Contract with Imports"
    • Right-click on contract code in the editor → TON Graph: Visualize Contract with Imports
    • Right-click on a contract file in the Explorer panel → TON Graph: Visualize Contract with Imports
  3. The extension will analyze the main contract and all its imports, displaying a complete function call graph

Interactive Features

The visualization provides several interactive features:

  • Zoom in/out for better detail view
  • Pan and navigate through the diagram
  • Filter functions by type
Filter functions by type
  • Filter functions by name using the search bar
Filter functions by name

Exporting

You can export the diagram in multiple formats:

  • Mermaid: Save as a Mermaid markdown file (*.mmd)
  • SVG: Vector graphics format for high-quality scaling
  • PNG: Raster image format for general use
  • JPG: Compressed image format for sharing

How It Works

The extension analyzes your contract code to:

  1. Identify all function declarations and their types
  2. Detect function calls between these functions
  3. Create a directed graph of function relationships
  4. Generate a visual representation using Mermaid diagrams
  5. Group related functions into clusters for better readability
  6. Multiple contracts support (for Tact)
Multiple contracts support

Development

Project Structure

ton-graph/
├── src/
│   ├── extension.ts          # Extension entry point
│   ├── parser/               # Contract code parsing
│   │   ├── funcParser.ts     # FunC parser
│   │   ├── tactParser.ts     # Tact parser
│   │   ├── tolkParser.ts     # Tolk parser
│   │   └── parserUtils.ts    # Shared parser utilities
│   ├── types/                # Type definitions
│   │   └── graph.ts          # Graph data structures
│   ├── visualization/        # Visualization components
│   │   ├── visualizer.ts     # Diagram generation
│   │   └── templates.ts      # HTML templates
│   └── export/               # Export functionality
│       └── exportHandler.ts  # Export handlers
├── out/                      # Compiled output
└── cached/                   # Cache directory for Mermaid library

Building From Source

# Clone the repository
git clone https://github.com/PositiveSecurity/ton-graph
# Install dependencies
npm install

# Compile the extension
npm run compile

# Package the extension (creates a .vsix file)
chmod +x rebuild.sh && ./rebuild.sh

Requirements

  • Visual Studio Code 1.60.0 or newer

Known Issues

  • Large contracts with many functions may take longer to process
  • Very complex call graphs may become cluttered - use filters to simplify the view

Feedback and Contributions

We welcome your feedback and contributions to improve this extension!

  • File issues and suggestions on GitHub
  • Fork the repository and submit pull requests

License

MIT

About

VSCode extension for visualizing function call graphs in TON smart contracts. Built with Mermaid.js by @PositiveSecurity

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published