Trace

Code-to-Flow API Mapping Platform - 2026

Trace — Code-to-Flow API Mapping Platform - 2026

Tech Stack

Next.jsTypeScriptNode.jsPrismaPostgreSQLReact FlowDagreBabel Parser

My Role

Designed and built the complete product across CLI, backend APIs, and frontend visualization - from AST-based scanning and graph construction to authenticated dashboard workflows and shareable flow views.

Team

Timeline

2026 - Developer Tools

Overview

Trace solves a painful problem in modern codebases: understanding how requests actually move across services, routes, clients, and downstream dependencies. In most teams, architecture diagrams are outdated and onboarding depends on tribal knowledge. Trace replaces that with source-of-truth mapping directly from code. The platform has two tightly integrated parts: a local CLI scanner and a web dashboard. The CLI parses repositories using AST analysis, detects routes, HTTP calls, GraphQL operations, and key references, then builds a structured relationship graph. That graph is uploaded to the platform, where teams can explore it as an interactive DAG and inspect API paths end to end. From an architectural perspective, Trace uses a monorepo setup with a Node.js CLI and a Next.js App Router frontend backed by PostgreSQL via Prisma. Visualization is powered by React Flow with Dagre layouting, enabling readable graph rendering at scale. Authentication and team-level project workflows support secure collaboration and API-key-driven ingestion from local machines or CI pipelines. A core challenge was balancing deep static analysis with practical speed and reliability across different project structures. To address this, the scanner combines parser-driven extraction with resilient fallback logic, configurable include/exclude patterns, and depth controls for large repositories. The result is a fast, developer-friendly workflow where one command can turn a complex codebase into a navigable architecture map in seconds.

What I Built

  • AST-based static analysis for routes, HTTP clients, GraphQL operations, and key relationships
  • CLI-first workflow: run one command and generate API flow intelligence from local code
  • Interactive DAG visualization with pan, zoom, and node-level inspection in the dashboard
  • Monorepo architecture with reusable types and shared flow contracts between CLI and frontend
  • Project-scoped API key ingestion pipeline for secure uploads from local or CI environments
  • Configurable scanning depth, include/exclude patterns, and JSON export for automation use cases
  • Team-ready web experience with authentication, project dashboards, and visual flow exploration
  • Supports modern JavaScript/TypeScript backend patterns including Express and Next.js APIs

System Impact & Engineering Metrics

<2s
AST Graph Extraction

Sub-2s static extraction of API routes & downstream dependencies

100%
Code-as-Truth Accuracy

Direct Babel AST parsing eliminating outdated manual architecture docs

DAG
Interactive Visualization

React Flow & Dagre automatic graph layouting engine

Key Highlights

Code-as-Truth Mapping

Builds architecture views directly from source code so diagrams stay aligned with reality.

CLI to Cloud Workflow

Scans repositories locally and syncs structured flow graphs to a collaborative web dashboard.

Interactive DAG Explorer

Renders API relationships as a navigable graph using React Flow and Dagre layouting.

Interactive Playground

Interactive AST Route Mapper

Run a mock AST codebase scan to generate an interactive API dependency graph (DAG) automatically.

AST Code Scanner
1import express from "express";
2import { chargePayment } from "./services/billing";
3import { db } from "./db/client";
4
5const router = express.Router();
6
7// POST route for checkout
8router.post("/api/checkout", async (req, res) => {
9 const { userId, amount, cart } = req.body;
10
11 // 1. Fetch user context from PostgreSQL database
12 const user = await db.users.findUnique({ id: userId });
13
14 // 2. Call external billing service payment flow
15 const billResult = await chargePayment(user.email, amount);
16
17 res.status(200).json({ success: true, billResult });
18});
Standby. Ready to parse repository.

Trace API DAG Map

powered by React Flow
Client App
POST /api/checkout
db (PostgreSQL)
billing.ts (API)
Trace Architecture
Trace Dashboard
Trace Demo
Trace CLI
Trace Detailed Demo
Trace Login

Interested?

Want to explore Trace?

An open-source developer platform that automatically maps API and service flows from real codebases using AST analysis, then visualizes them in an interactive DAG dashboard.