LLVMViz is an interactive web-based platform for visualizing LLVM compiler internals. It helps developers, students, and compiler engineers understand how LLVM transforms code through its compilation pipeline.
Perfect for:
- Learning - Understand LLVM's SelectionDAG and MIR transformations visually
- Debugging - Compare DAG/MIR states before and after optimizations
- Research - Analyze how different passes affect code generation
- Teaching - Demonstrate compiler concepts with real-time visualization
- Interactive DAG visualization with zoom, pan, and node inspection
- Stage-by-stage viewing (dag-combine1, legalize, isel, sched, etc.)
- Compare mode for before/after analysis
- Node highlighting with connection tracing
- Support for 50+ LLVM target architectures
- Full MIR pipeline visualization with automatic pass discovery
- Syntax highlighting for virtual/physical registers, basic blocks, opcodes
- Multi-tab interface for viewing multiple passes simultaneously
- Side-by-side comparison with line-level and word-level diff highlighting
- Smart filtering - separates viewable passes from analysis-only passes
- Quick navigation - jump to registers, frame info, or basic blocks instantly
Visit llvmviz.org - no installation needed!
# Clone the repository
git clone https://github.com/jonathan03ant/llvmviz.git
cd llvmviz
# Install dependencies
cd frontend
npm install
# Start development server
npm run devSelectionDAG Visualization:
# Generate DAG from LLVM IR
llc -march=amdgcn -mcpu=gfx1101 -view-isel-dags input.ll
# Or use llc with -debug flag
llc -march=amdgcn -debug input.ll 2>&1 | grep SelectionDAGMIR Visualization:
# Generate MIR for a specific pass
llc -march=amdgcn -mcpu=gfx1101 -stop-after=regbankselect input.ll -o output.mir
# Paste the output into LLVMViz MIR ViewerInteractive visualization of LLVM's SelectionDAG with stage-by-stage views and compare mode.
Full DAG visualization with code editor, interactive graph, and node filtering
Side-by-side comparison showing added (blue) and removed (red) nodes with change summary
Full pipeline visualization with syntax highlighting, tabs, and side-by-side comparison.
MIR pipeline with 148+ passes, collapsible sidebar, and syntax-highlighted output
Side-by-side MIR diff with line-level and word-level change highlighting
**Tech Stack:**
- **Frontend:** React, TypeScript, Vite, Tailwind CSS
- **Backend:** Python Flask
- **Compiler:** LLVM (debug build with `-view-isel-dags`)
- **Deployment:** Automated via GitHub Actions
---
## How It Works
### SelectionDAG
1. Paste LLVM IR or upload a file
2. Select architecture and CPU (AMDGPU, X86, ARM, etc.)
3. Choose compilation stage (legalize, isel, sched, etc.)
4. View interactive DAG with zoom/pan
5. Compare different stages side-by-side
### MIR Pipeline
1. Click "Discover Passes" to analyze the entire pipeline
2. Browse passes categorized by stage (regbankselect, instruction-select, etc.)
3. Click any pass to view MIR output with syntax highlighting
4. Open multiple passes in tabs
5. Compare two passes side-by-side with diff highlighting
---
## Development
### Prerequisites
- Node.js 20+
- Python 3.8+
### Building from Source
```bash
# Install frontend dependencies
cd frontend
npm install
# Build frontend
npm run build
# Run backend
cd ../backend
python3 app.py
# Frontend tests
cd frontend
npm test
# Backend tests
cd backend
pytestContributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- ScheduleDAG visualization
- Register allocation visualization
- Live editing and compilation
- Export DAG/MIR as images
- Custom pass filtering and search
- More architecture support
- Collaborative sharing (save/load sessions)
This project is licensed under the MIT License - see the LICENSE file for details.
- LLVM Project for the incredible compiler infrastructure
- The LLVM community for documentation and support
- Inspired by existing LLVM visualization tools
Jonathan - @jonathan03ant
Project Link: https://github.com/jonathan03ant/llvmviz
Live Demo: https://llvmviz.org