VS Code Extensions

Categories

Visualization

Render software structures visually. Discover top VS Code Visualization extensions to generate architecture charts, map data schemas, and preview layout plots.

M

Mermaid Diagrams for Deckpilot

focus-space

Native Mermaid diagram renderer for Deckpilot.

Visualization #deck
6
PrairieLearn Preview

PrairieLearn Preview

runjuu

Preview PrairieLearn questions side by side in VS Code. Save your edits and the rendered question refreshes instantly from a local server running in Docker or Podman.

Visualization Education #docker
6
FlowTrace

FlowTrace

nixenic

Trace call chains from any function down to the database — layered call-flow diagram with DB table/column access tracking (TypeORM, Prisma, raw SQL).

Visualization #sql
6
PDM — Project Density Measures

PDM — Project Density Measures

woulgar

See what every part of your AI project costs — flow map, version diff, per-box tokens/$/GPU — right inside VS Code.

Visualization #ai
6
deckhost - Live Markdown Presentations

deckhost - Live Markdown Presentations

Deckhost

Author markdown presentations with a live WYSIWYG preview, publish to deckhost, and upload assets - right inside VS Code and Cursor.

Visualization #markdown
6
World of ClaudeCraft — Character Card

World of ClaudeCraft — Character Card

WorldofClaudeCraft

View any World of ClaudeCraft character card in a sidebar, with level and zone in the status bar. Look up any player, or log in to see your own private stats.

Visualization #status bar
6
Rails Schema Preview

Rails Schema Preview

AdinOmic

Preview Rails schema.rb files as interactive ER diagrams, docs, health checks, indexes, and seed data inside VS Code.

Visualization #schema
6
DevMon - Developer Performance Monitor

DevMon - Developer Performance Monitor

KaranSonker

Silently tracks CPU, GPU, RAM, Swap and Threads per open file. Generates a colour-coded Excel report at 6 PM every day — showing only files that crossed the 80% compute threshold.

Visualization #excel
6
TigerBeetle Explorer

TigerBeetle Explorer

OluwatobilobaAremu

Browse TigerBeetle accounts, transfers, and balances from VS Code.

Visualization #database
6 5.0
LLM Spend Tracker

LLM Spend Tracker

BradicalSoftware

Live token spend + context-window burn for Claude Code, right in your status bar. Budgets, history, and per-project breakdowns.

Visualization #claude code
6
PlanFS

PlanFS

dijgrid

Git-native planning in VS Code with a backlog, task board, next-work guidance, and roadmap insights

Visualization #git
6
W

Work Manager for VS Code

woguaiwo

Tracks the active terminal's working directory for the Work Manager time tracker.

Visualization #productivity
6