MLIR Visualizer — Tree & Dependency Graph

Read large MLIR dumps without scrolling through 50k lines of text. Tree view + dependency graph + dialect-aware highlighting for .mlir and .ttadapter files.

demo

Why?

Debugging MLIR pipelines means staring at thousands of SSA values, regions, and dialect ops in flat text. Existing editors give you syntax highlighting at best. This extension gives you:

A collapsible tree so you can fold away noise and focus on a function
A dependency graph so you can see which ops produce/consume a value you're inspecting
Dialect-colored tags (linalg, memref, scf, tt, hacc, ...) at a glance
Memory shape inspector — click an op, see 4.0 KB (128x16 f16) immediately

Works out of the box with standard MLIR dialects, and any vendor .ttadapter files (Tenstorrent, OpenXLA, IREE-style dumps).

Features

Feature	What it does
Tree View	All ops as a nested, collapsible tree with dialect color tags
Dep Trace	Click an op → dim everything outside its producer/consumer chain. Trace depth configurable (1 / 2 / 3 / full)
DAG Panel	Right-side dependency graph. Producers on the right, consumers on the left, arrows show dataflow. Wheel to zoom, drag to pan, click a node to re-center the graph on it
Tree ↔ DAG sync	Click a DAG node → tree scrolls to that op and highlights it. Click a tree op → DAG re-renders centered on it
Pin Mode	Pin multiple ops without dimming the rest — useful for cross-referencing far-apart code
Mem Info Bar	Sticky on top: shows result type, shape, and byte size of the selected buffer
Minimap Navigator	Right-edge bar shows selection, producers, consumers, and pins. Click to jump
Resizable Panels	Drag the DAG panel's left edge to resize
Switch to Text	One-click toggle back to the plain text editor without closing the file

Installation

From VS Code Marketplace

Search for MLIR Visualizer in the Extensions view (Ctrl+Shift+X), or visit: https://marketplace.visualstudio.com/items?itemName=Mlir-Visualizer.mlir-tree-viewer

From VSIX

code --install-extension mlir-tree-viewer-1.1.0.vsix

Activating

Open any .mlir or .ttadapter file. The custom editor takes over automatically — no command palette step.

Usage

Open a .mlir or .ttadapter file.
Click any op in the tree to select it.

Use the toolbar:

Button	Effect
Dep Trace	Toggle dependency-tracing mode. Click an op to highlight its full producer/consumer chain
Pin	Toggle pin mode. Click ops to mark them; click again to unpin
Mem Info	Toggle the memory info bar. Clicking an op shows its result type and size
DAG	Toggle the right-side dependency graph panel
Switch to Text	Open the file in the default text editor

The Trace dropdown next to Dep Trace sets dependency depth.
In the DAG panel: wheel to zoom, drag to pan, click any node to make it the new center.

Screenshots

tree view

DAG panel

Requirements

VS Code 1.80.0 or later
MLIR files with standard dialects (func, memref, tensor, linalg, scf, arith, bufferization, etc.) — vendor dialects (tt, hacc, hivm, ...) also colored

Project Structure

extension/
├── package.json              # Extension manifest
├── media/                    # Icon and screenshots
├── src/
│   ├── extension.ts          # Activation
│   ├── customEditor.ts       # CustomTextEditorProvider
│   └── webview/
│       └── generator.ts      # Inlined HTML/CSS/JS for the tree view webview
└── out/                      # Compiled output

The webview (HTML, CSS, JS) is fully embedded in generator.ts — no external assets at runtime.

Development

# Install deps
npm install

# Watch mode (auto-recompile)
npm run watch

# Debug
# Press F5 in VS Code to launch an Extension Development Host

# Package the VSIX
npm run package        # produces mlir-tree-viewer-<version>.vsix

# Publish to Marketplace
vsce login Mlir-Visualizer
vsce publish

Testing parser logic without launching VS Code

node -e "
const { getHtml } = require('./out/webview/generator');
const fs = require('fs');
const mlir = fs.readFileSync('../HSTU.mlir', 'utf-8');
const html = getHtml({ asWebviewUri: u => u, cspSource: '' }, null, mlir, 'HSTU.mlir');
const scripts = [...html.matchAll(/<script>([\s\S]*?)<\/script>/g)];
scripts.forEach(([_, code], i) => { new Function(code); console.log('script', i, 'OK'); });
"

Roadmap

[ ] Export DAG as SVG/PNG
[ ] Diff view (compare two MLIR files side-by-side)
[ ] Search inside tree (Ctrl+F)
[ ] Custom dialect color schemes (settings.json)
[ ] Large-file mode (>10 MB virtualization)
[ ] CI integration (PR comment with op-count diff)

Got a feature request? Open an issue on GitHub.

Feedback & Support

Bugs: GitHub Issues
Discussions: GitHub Discussions
Sponsoring development: see Sponsor

If your team uses a private MLIR dialect and wants first-class support in the viewer, get in touch.

License

MIT — see LICENSE.