AI Flowchart: Codebase Map

See how your code actually works. AI Flowchart turns any JavaScript, TypeScript or Python project into clear, clickable diagrams: what the app does, which screens call which APIs, where data is stored, and which outside services it depends on. Built for vibe-coded projects and legacy code you didn't write yourself.

Everything is scanned locally. Your source code never leaves your machine.

What you get

• Codebase map – your project as an architecture diagram: Frontend → Shared code → Server / API → Data → Outside services. Every box opens the code it stands for. Switch between a Detailed view straight from the scan and a Simple view drawn by AI, the way a senior engineer would sketch it for a new teammate.
• Features – everything a user can do (buttons, forms, screens opening), grouped by area, with the API calls and services each feature uses. Play any feature to watch the code run step by step.
• Trace a flow – pick an API route or a screen and get a step-by-step sequence diagram through your files, your API, databases and outside APIs. Follow along in the editor as it plays.
• Data flow – every database table and environment variable, with the code that writes it and the code that reads it.
• Dependencies – which parts import which, and every circular import.
• Code size – a treemap of where the code lives; colour by recent changes to spot hot spots.
• Timeline – how the architecture changed commit by commit.
• What changed? – after your AI assistant edits the code, see the new services, API routes, calls, packages and env vars it added.
• Simulate – take a service down and see what breaks, or simulate 1K → 10M users to find what fails first (AI).
• Database diagram (two-way) – edit your Prisma schema visually; changes are written straight to schema.prisma.
• Present – walk through any diagram as slides in VS Code, or full screen in the browser on aiflowchart.io.

Getting started

1. Open a project folder.
2. Click the AI Flowchart icon in the activity bar, or run AI Flowchart: Show Codebase Map from the Command Palette.
3. Click any box to see its files, routes, calls and env vars; double-click to look inside.
4. Use Features, Trace a flow, Views ▾ and Present ▾ in the toolbar for the other diagrams.

Above every API route you'll also see ▶ Trace – click it to follow that request through your code.

Languages and frameworks

JavaScript, TypeScript, JSX/TSX and Python. Recognises React, Next.js, Vue, Svelte, Express, Fastify, Hono, NestJS, Flask, FastAPI, Django, serverless functions; Prisma, Mongoose, Sequelize, Supabase, Knex, DynamoDB, Firestore, SQLAlchemy and raw SQL; and 150+ services such as Stripe, OpenAI, Anthropic, AWS, Firebase and Google APIs.

Privacy

• The scan runs entirely on your machine. No source code is uploaded.
• AI features (the Simple view and the scale simulator) use your aiflowchart.io account and send only a summary: folder and file names, routes, package names, outside hosts and environment variable names (never values). Use What gets sent to see the exact text before generating.
• Open in aiflowchart.io and Present in the browser send the diagram itself (boxes and connections), not your code.

Account

The diagrams are free. AI features need a free aiflowchart.io account (AI Flowchart: Sign In) and use AI credits; Pro is unlimited. See aiflowchart.io/pricing.

Settings

Feedback

Questions or ideas: aiflowchart.io/contact