C++ Data Structure Visualizer

v0.1 - linear list finished

A pure frontend data structure animation tool for C++ learning and classroom-style demonstrations.

This project focuses on making basic data structures easier to understand by combining:

• a main animation stage
• a synchronized C++ code panel with current-line highlighting
• variable snapshots for each step
• playback controls for step-by-step learning

The current v0.1 release completes the first linear-list module set.

Finished in v0.1

• Sequential list with array storage
• Singly linked list: head insertion
• Singly linked list: tail insertion
• Singly linked list with head node
• Doubly linked list without head node
• Circular singly linked list

UI Overview

• Left sidebar: data-structure navigation
• Center stage: node / pointer animation area
• Right panel: complete C++ reference code with line highlighting
• Top bar: current variables
• Bottom bar: input, playback controls, progress slider, and speed selector

Tech Stack

• Native HTML
• Native CSS
• Native JavaScript
• No heavy framework

Quick Start

npm run serve

Then open:

http://127.0.0.1:4173

How to Use

1. Choose a demo from the left sidebar.
2. Enter a sequence such as 10,20,30.
3. Click 生成动画.
4. Use 播放 / 暂停 / 上一步 / 下一步 to inspect the process.

Project Structure

viewer/                  Main frontend app
scripts/                 Local static server and helper scripts
instrumentor/            Earlier C++ trace instrumentation prototype
runtime/                 Runtime support for the trace prototype
samples/                 Sample C++ files
build/                   Generated / local build outputs

Notes

• The current viewer is fully frontend-runnable.
• The repository also keeps an earlier C++ execution-trace prototype. That part is not the main focus of v0.1, but it remains in the repo for future exploration.
• This release is centered on linear lists. Stack, queue, tree, graph, and algorithm animations can be added in later versions.

Roadmap

• More linear-list operations: insert, delete, search
• Stack and queue animations
• Tree and graph modules
• More refined transition animations
• Optional export / shareable demo states

License

Released under the MIT License. See LICENSE.