Interactive visualization tool for Solidity smart contracts
Features • Demo • Getting Started • Usage • Built-in Libraries • Guides • Contributing • 日本語
Sol-Flow is a web-based tool that visualizes dependencies, inheritance structures, and function call flows of Solidity smart contracts as interactive diagrams.
It helps developers understand complex codebases and streamlines security reviews.
Visualize inheritance and implementation relationships between contracts. Easily understand relationships with libraries like OpenZeppelin.
Click on a function to see its internal call flow diagram with actual source code.
Automatically detects and groups proxy patterns including ERC-7546, UUPS, Transparent, Diamond, and Beacon.
Quickly search by contract name, function name, or event name. Navigate large codebases efficiently.
Simply drag and drop Solidity files. External libraries (OpenZeppelin, Solady, etc.) are resolved automatically.
Major libraries like OpenZeppelin and Solady are preloaded and ready to explore.
Add custom edges to document relationships not captured by static analysis. Perfect for documenting proxy relationships and cross-contract interactions.
View full contract source code with Solidity syntax highlighting. Includes comments, imports, and NatSpec documentation with proper color coding.
🌐 Live Demo: https://sol-flow.vercel.app
- Node.js 18+
- pnpm
# Clone the repository with submodules
git clone --recurse-submodules https://github.com/cardene777/sol-flow.git
cd sol-flow
# If you already cloned without submodules:
git submodule update --init --recursive
# Install dependencies
cd app
pnpm install
# Start development server
pnpm devOpen http://localhost:3000 in your browser.
Click the "Import" button and drag & drop your Solidity files (.sol).
src/
├── MyToken.sol
├── Governance.sol
└── Treasury.sol
Navigate the auto-generated dependency diagram:
- Mouse wheel: Zoom in/out
- Drag: Pan the view
- Click contract: Expand/collapse details
- Sidebar: Filter by category
Click on a function name within an expanded contract to see its detailed call flow and source code.
| Icon | Description |
|---|---|
| 🟢 | external view/pure |
| 🟠 | external write |
| 🟣 | internal |
Enable Edit Mode to add custom relationship edges between contracts. Changes are saved to your project.
The following libraries are preloaded:
| Library | Description |
|---|---|
| OpenZeppelin Contracts | Industry-standard smart contract library |
| OpenZeppelin Upgradeable | Upgradeable contracts with proxy patterns |
| Solady | Gas-optimized Solidity snippets |
Switch between libraries using the "Projects" button in the header.
| Category | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| UI | React 19, Tailwind CSS |
| Graph | React Flow |
| Parser | @solidity-parser/parser |
| Language | TypeScript |
sol-flow/
├── app/ # Next.js application
│ ├── src/
│ │ ├── app/ # App Router (pages)
│ │ ├── components/ # React components
│ │ ├── lib/ # Parser, utilities
│ │ ├── constants/ # Application constants
│ │ ├── types/ # Type definitions
│ │ └── utils/ # Helper functions
│ └── package.json
├── library/ # Built-in library sources (Git submodules)
│ ├── openzeppelin-contracts/
│ ├── openzeppelin-contracts-upgradeable/
│ └── solady/
├── docs/ # Documentation
└── README.md
Contributions are welcome!
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
See CONTRIBUTING.md for details.
This project is licensed under the Sol-Flow Non-Commercial Open Source License.
- ❌ Commercial use prohibited
- ✅ Non-commercial use allowed
- ✅ Modification allowed (must share under same license)
- ✅ Network/SaaS use allowed (must disclose source code)
See the LICENSE file for details. For commercial licensing inquiries, please contact the author.
- OpenZeppelin - Smart contract library
- Solady - Gas optimized Solidity snippets
- React Flow - Graph visualization library
Made with ❤️ for the Solidity community