Which integrations are available for this server?

Generates Excalidraw diagrams that visualize algorithm execution step-by-step, producing .excalidraw files with support for multiple data structures such as arrays, linked lists, trees, graphs, and more.

How do I use code-visualizer-mcp?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@code-visualizer-mcp Trace the two-sum algorithm on the list [2,7,11,15]" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

code-visualizer-mcp

by vishwavinayak

Overview Schema Related Servers Score Discussions

Python

Local

🎨 Code Visualizer MCP

An MCP server that generates Excalidraw diagrams to visualize algorithm execution step-by-step. Give it your code + an example input, and get a single .excalidraw file showing every iteration.

Python License MCP

Code Visualizer Output

✨ Features

Single-file traces — All iterations in ONE .excalidraw diagram
12 data structures — Array, LinkedList, Tree, Graph, HashMap, Stack, Queue, Matrix, Heap, Trie, Priority Queue, Set
Dark-mode palette — YouTube-friendly colors with semantic highlighting
MCP + CLI — Use via AI assistants (Claude, Cursor, Gemini) or command line

Related MCP server: AI Charts

📐 Supported Data Structures

Data Structure	Type Key	Visualization
Array	`array`	Horizontal cells with index labels + pointer arrows
Linked List	`linkedlist`	Nodes with next-pointers and cycle detection
Binary Tree	`tree`	Hierarchical layout with parent-child edges
Graph	`graph`	Circular layout with directed/undirected edges
HashMap	`hashmap`	Vertical key-value pair list
Stack	`stack`	Vertical cells with TOP label
Queue	`queue`	Horizontal cells with FRONT/REAR labels
Matrix	`matrix`	2D grid with row/col labels
Heap	`heap`	Binary tree + array representation
Priority Queue	`priority_queue`	Same as heap
Trie	`trie`	Tree with character-labeled edges
Set	`set`	Rounded-rectangle collection

🚀 Quick Start

Prerequisites

Python 3.10+
uv (recommended) or pip

Installation

git clone https://github.com/your-username/code-visualizer-mcp.git
cd code-visualizer-mcp
uv sync

🔌 Client Integration & Ways to Use

This MCP server is standard Model Context Protocol compliant and works with a variety of AI assistants and IDEs:

1. Claude Desktop

Add to claude_desktop_config.json (~/Library/Application Support/Claude/claude_desktop_config.json on macOS or %APPDATA%\Claude\claude_desktop_config.json on Windows):

{
  "mcpServers": {
    "code-visualizer": {
      "command": "uv",
      "args": [
        "--directory",
        "/absolute/path/to/code-visualizer-mcp",
        "run",
        "code-visualizer"
      ]
    }
  }
}

2. Google Antigravity (AGY)

Add to your Antigravity MCP config file (~/.gemini/antigravity/mcp_config.json or your project settings):

{
  "mcpServers": {
    "code-visualizer": {
      "command": "uv",
      "args": [
        "--directory",
        "/absolute/path/to/code-visualizer-mcp",
        "run",
        "code-visualizer"
      ]
    }
  }
}

3. Cursor IDE

Open Cursor Settings > Features > MCP.
Click + Add New MCP Server.
Set Name: code-visualizer, Type: stdio

Set Command:

uv --directory /absolute/path/to/code-visualizer-mcp run code-visualizer

4. VS Code (Cline / Roo Code / Continue)

Add to your extension's MCP settings file (e.g. cline_mcp_settings.json):

{
  "mcpServers": {
    "code-visualizer": {
      "command": "uv",
      "args": [
        "--directory",
        "/absolute/path/to/code-visualizer-mcp",
        "run",
        "code-visualizer"
      ]
    }
  }
}

5. MCP Inspector (Interactive Testing)

To test and debug tools directly in a browser UI without an AI assistant:

npx @modelcontextprotocol/inspector uv --directory /absolute/path/to/code-visualizer-mcp run code-visualizer

CLI Usage

# Generate an array diagram
uv run python examples/generate_cli.py array \
  --title "Two Sum" \
  --data "2,7,11,15" \
  --highlights "0:visited,1:found" \
  --pointers "i:1"

# Generate a full algorithm trace
uv run python examples/sliding_window_maximum.py

Output files are saved to the output/ directory as .excalidraw files. Open them at excalidraw.com or in the VS Code Excalidraw extension.

🏗️ Project Structure

code-visualizer-mcp/
├── pyproject.toml                 # Project config, dependencies, entry points
├── LICENSE
├── README.md
│
├── src/code_visualizer/           # Main package
│   ├── __init__.py
│   ├── server.py                  # MCP server entry point (FastMCP)
│   ├── renderer.py                # Excalidraw JSON file writer
│   │
│   ├── primitives/                # Low-level element factories
│   │   ├── elements.py            # make_rectangle, make_ellipse, make_arrow, ...
│   │   ├── colors.py              # Semantic color palette (PALETTE, get_color)
│   │   └── styles.py              # Style presets (CELL_STYLE, NODE_STYLE, ...)
│   │
│   ├── layout/                    # Spatial position calculators
│   │   ├── linear.py              # Arrays, matrices, stacks, queues, hashmaps, sets
│   │   ├── tree_layout.py         # Binary trees, heaps, tries
│   │   └── graph_layout.py        # Circular graph layout
│   │
│   └── tools/                     # MCP tool implementations
│       ├── visualize_array.py     # Array + hashmap diagrams
│       ├── visualize_linkedlist.py
│       ├── visualize_tree.py
│       ├── visualize_graph.py
│       └── visualize_trace.py     # ⭐ Multi-step trace (primary tool)
│
├── tests/                         # Test suite
│   ├── conftest.py                # Shared fixtures
│   ├── test_primitives.py         # Element factory tests
│   └── test_tools.py              # Tool integration tests
│
├── examples/                      # Usage examples
│   ├── generate_cli.py            # CLI diagram generator
│   └── sliding_window_maximum.py  # Full algorithm trace example
│
├── docs/
│   └── architecture.md            # System architecture & workflow guide
│
└── output/                        # Generated .excalidraw files

🧪 Running Tests

uv run pytest -v

🎨 Color Palette

Color Name	Use Case	Preview
`default`	Unvisited elements	⬛
`current`	Currently processing	🟧
`highlighted`	Active window/range	🟦
`visited`	Already processed	⬜
`found`	Match / answer found	🟨
`comparing`	Being compared	🟠
`swapping`	Being swapped	🩷
`pointer_a` / `pointer_b` / `pointer_c`	Named pointers	🟩🟪💛
`success` / `error`	Result indicators	✅❌

📄 License

MIT — see LICENSE.

This server cannot be installed

license - permissive license

quality - not tested

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

–Release cycle

–Releases (12mo)

Commit activity

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Servers

excalidraw-architect-mcp
Design Tools Software Architecture Developer Tools
BV-Venky
A
license
B
quality
C
maintenance
An MCP server that generates beautiful Excalidraw architecture diagrams with perfect auto-layout, stateful editing, and architecture-aware component styling.
Last updated 2026-06-08
24
137
MIT
AI Charts
Software Architecture Developer Tools App Automation
tjameswilliams
A
license
-
quality
D
maintenance
An MCP server that enables AI assistants to programmatically create and manage flowcharts, ERDs, and swimlane diagrams. It provides tools for manipulating diagram structures, performing auto-layouts, and exporting to Mermaid or Markdown formats.
Last updated 2026-03-15
20
MIT
fcp-drawio
Software Architecture Design Tools
os-tack
A
license
B
quality
B
maintenance
MCP server that enables LLMs to create and edit draw.io diagrams using high-level intent commands, with automatic layout and styling.
Last updated 2026-07-06
4
24
3
MIT
sketchboard-excalidraw-mcp
Design Tools Software Architecture
sandraschi
A
license
-
quality
C
maintenance
An MCP server for Excalidraw diagram creation and headless rendering, enabling interactive canvas editing and automated SVG/PNG export via Playwright.
Last updated 2026-07-17
1
MIT

View all related MCP servers

Related MCP Connectors

CodePic
AI agent draws editable hand-drawn diagrams (flowchart, ER, architecture) via MCP, not static images
cnvs.app
Real-time collaborative whiteboard — AI agents and humans edit the same board live over MCP.
hithereiamaliff-mcp-nextcloud
A comprehensive Model Context Protocol (MCP) server that enables AI assistants to interact with yo…

View all MCP Connectors

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/vishwavinayak/code-visualizer-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server