🎥 See It In Action

✨ Features

📸 Feature Showcase

🚀 Quick Start

Installation

1. From VS Code Marketplace (Recommended)

   • Open VS Code
   • Press Cmd/Ctrl + Shift + X to open Extensions
   • Search for "LangGraph Visualizer"
   • Click Install

2. From VSIX File

   code --install-extension langgraph-visualizer-0.2.0.vsix
   

First Use

1. Open any Python file with LangGraph code
2. Look for the $(graph) LangGraph icon in the status bar (bottom right)
3. Click the icon to visualize your graph
4. Interact with the visualization!

🎮 Usage

Opening the Visualizer

There are multiple ways to open the visualizer:

Interacting with the Graph

Understanding the Visualization

Node Colors

• 🟢 Green = Start/Entry Point
• 🔵 Blue = Regular Node
• 🔴 Red = End/Finish Point
• 🟣 Purple = Conditional Node

Edge Types

• Solid Line = Direct Edge
• Dashed Line = Conditional Edge

State Panel

The collapsible state panel (top-right) shows:

• Field Names and their types
• Default Values or example values
• Annotations (e.g., add_messages)
• Copy to Clipboard button (📋)

📝 Examples

Simple Graph

from typing import TypedDict
from langgraph.graph import StateGraph

class State(TypedDict):
    messages: list[str]
    user_input: str
    response: str

# Create graph
graph = StateGraph(State)

# Add nodes
graph.add_node("start", start_function)
graph.add_node("process", process_function)
graph.add_node("end", end_function)

# Add edges
graph.add_edge("start", "process")
graph.add_edge("process", "end")

# Set entry point
graph.set_entry_point("start")

# Compile
app = graph.compile()

Conditional Routing

from langgraph.graph import StateGraph

graph = StateGraph(State)

graph.add_node("agent", agent_node)
graph.add_node("tool", tool_node)
graph.add_node("end", end_node)

# Conditional edge based on agent decision
graph.add_conditional_edges(
    "agent",
    should_continue,
    {
        "continue": "tool",
        "end": "end"
    }
)

graph.add_edge("tool", "agent")
graph.set_entry_point("agent")

app = graph.compile()

Multi-Agent System

from langgraph.graph import StateGraph

graph = StateGraph(State)

# Add multiple agent nodes
graph.add_node("supervisor", supervisor_node)
graph.add_node("researcher", researcher_node)
graph.add_node("writer", writer_node)
graph.add_node("reviewer", reviewer_node)

# Supervisor routes to different agents
graph.add_conditional_edges(
    "supervisor",
    route_to_agent,
    {
        "research": "researcher",
        "write": "writer",
        "review": "reviewer",
        "finish": "end"
    }
)

# Agents report back to supervisor
graph.add_edge("researcher", "supervisor")
graph.add_edge("writer", "supervisor")
graph.add_edge("reviewer", "supervisor")

graph.set_entry_point("supervisor")
app = graph.compile()

🎯 Supported Patterns

Graph Types

• ✅ StateGraph - State-based graphs
• ✅ MessageGraph - Message-based graphs
• ✅ Graph - Basic graphs

Node Operations

• ✅ .add_node("name", function) - Add nodes
• ✅ .add_edge("from", "to") - Direct edges
• ✅ .add_conditional_edges("from", func, {...}) - Conditional routing
• ✅ .set_entry_point("node") - Set start node
• ✅ .set_finish_point("node") - Set end node

State Definitions

• ✅ TypedDict: class State(TypedDict):
• ✅ Dataclass: @dataclass class State:
• ✅ Annotated: field: Annotated[type, annotation]
• ✅ MessagesState: class State(MessagesState):

🛠️ Development

Want to contribute? Great! Here's how to get started:

Setup

# Clone the repository
git clone https://github.com/Naveenkumarar/langgraph-visualizer.git
cd langgraph-visualizer

# Install dependencies
npm install

# Open in VS Code
code .

# Press F5 to launch Extension Development Host

Building

# Compile TypeScript
npm run compile

# Watch mode (auto-compile on changes)
npm run watch

# Package extension
vsce package

Testing

# Run linter
npm run lint

# Test with sample files
# Open any file in test_samples/ directory

Project Structure

langgraph-visualizer/
├── src/
│   ├── extension.ts          # Main extension entry point
│   ├── graphDetector.ts      # Detects LangGraph code
│   ├── graphParser.ts        # Parses graph structure
│   ├── fileTraverser.ts      # Multi-file graph support
│   └── webviewProvider.ts    # Visualization UI
├── media/
│   ├── banner.png            # README banner
│   ├── icons/                # Extension icons
│   └── webview.css           # Visualization styles
├── test_samples/             # Example LangGraph files
└── scripts/                  # Build scripts

📋 Requirements

• VS Code: Version 1.80.0 or higher
• Python files: With LangGraph code (no Python installation required for visualization)

🗺️ Roadmap

• [x] Interactive graph visualization
• [x] Export graph as image
• [x] Jump to code feature
• [x] State visualization panel
• [x] Search and filter
• [ ] Custom color schemes and themes
• [ ] Save and restore graph layouts
• [ ] Animation of execution flow
• [ ] Graph validation and error detection
• [ ] Multiple layout algorithms
• [ ] Subgraph support
• [ ] Live execution tracing

🤝 Contributing

Contributions are welcome! Please feel free to:

• 🐛 Report bugs
• 💡 Suggest features
• 🔧 Submit pull requests

See CONTRIBUTING.md for detailed guidelines.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with Cytoscape.js for graph visualization
• Uses Dagre for graph layout
• Inspired by the amazing LangGraph project by LangChain