Turn your messy HAR files into clean, visual API flow diagrams.
No backend. No setup. Just drop and go.

🔴 🟡 🟢   HAR Flow  —  canvas  ·  both

---

What's this?

You're debugging an auth flow, or mapping out how a mobile app talks to its backend. You export a HAR file from DevTools, open it in a text editor, and stare at 4000 lines of JSON. Not fun.

HAR Flow drops those requests onto a canvas. Nodes. Edges. Pan, zoom, inspect. It automatically groups requests into flows — login, OTP, payment, referral — and lets you click through them one by one.

No installation. No server. One HTML file.

---

Quick Start

# Clone it
git clone https://github.com/Subhashis360/HAR-Flow.git

# Open it (literally just open the file)
open index.html

Or just download index.html directly and open it in Chrome/Firefox/Edge.

---

How to get a HAR file

Chrome / Edge

1. Open DevTools → Network tab
2. Do the thing you want to record (login, checkout, etc.)
3. Right-click any request → Save all as HAR with content

Firefox

1. Open DevTools → Network tab
2. Click the gear icon → Save All As HAR

Safari

1. Enable DevTools via Preferences → Advanced
2. Network tab → Export (the down arrow icon)

---

Features

🗺 Canvas that doesn't fight you

Infinite pan, smooth scroll-to-zoom, dot-grid background. Nodes drag, snap into place after auto-layout, and connect with bezier edges. You can hand-draw connections between any two nodes by switching to Connect mode (C).

⚡ Automatic flow detection

Drop in a HAR and the tool scans every request's URL, pathname, and body for patterns:

Flow	Detected when it sees...
Login	login, signin, authenticate
Registration	register, signup, create, onboard
OTP	otp, verify, send-otp, validate
Payment	payment, checkout, cart, wallet, upi
Referral	referral, refer, invite, promo
Profile	profile, user, account, avatar

Didn't match? Add your own keywords in the sidebar and hit Reanalyze.

🔍 Request inspector

Click any node to pop open the inspector panel — full request body, full response body, HTTP method badge, status code, host. The detail modal shows both panels side-by-side with live search across request and response content.

🧹 Clean node labels

Instead of showing raw URLs, the tool tries to infer what each request actually does:

/api/v2/auth/otp/send  →  "Send OTP"
/api/users/me          →  "Get Current User"
/v1/payments/checkout  →  "Process Payment"

📤 Export

When you're done arranging, hit Export to save a har-flow.json with all nodes and edges — useful for docs, Notion embeds, or sharing with teammates.

---

Keyboard Shortcuts

Key	Action
V	Select tool
H	Hand / pan tool
C	Connect tool
Space	Temporarily switch to hand (hold)
Delete / Backspace	Delete selected node or edge
Escape	Deselect everything / close modal
Scroll	Zoom in / out
Middle-click drag	Pan canvas

---

UI Tour

┌────────────────────────────────────────────────────┐
│              [ HAR Flow ]  Canvas | Both            │  ← top bar
├──────┬─────────────────────────────────────┬───────┤
│      │                                     │       │
│ Side │         infinite canvas             │ Insp- │
│ bar  │   ┌──────────┐   ┌──────────┐      │ ector │
│      │   │ Send OTP │──▶│ Verify   │      │       │
│ Flow │   │ POST 200 │   │ OTP      │      │ click │
│ list │   └──────────┘   │ POST 200 │      │ a node│
│      │                  └──────────┘      │ to    │
│ Kw   │                                    │ open  │
│ srch │                                    │       │
├──────┴─────────────────────────────────────┴───────┤
│  status: ready          coords: 120, 340   - 100% +│  ← bottom bar
└────────────────────────────────────────────────────┘

---

Stack

Completely client-side. The whole thing is one HTML file.

• Tailwind CSS (CDN) — for all the utility classes
• Lucide (CDN) — icon set
• Vanilla JS — no framework, no build step, no bundler

The canvas rendering uses absolute-positioned DOM nodes transformed together inside a single #world div. Edges are drawn on an overflow: visible SVG layer sitting on top.

---

Roadmap

Things I'm thinking about:

• AI-powered flow summarization (that "AI Chat" button is a teaser)
• Sequence diagram export (Mermaid / PlantUML)
• Timeline view — show requests on a time axis
• HAR diff mode — compare two captures side by side
• Dark/light theme toggle
• Node groups / swimlanes

PRs welcome if any of these interest you.

---

Contributing

git clone https://github.com/Subhashis360/HAR-Flow.git
cd HAR-Flow

# There's no build step. Just edit index.html and refresh.

Please open an issue before working on anything big so we can sync up first.

---

License

MIT. Use it, fork it, ship it. Just don't claim you built it from scratch.

---

Made for the people who've stared at HAR files for too long.

⭐ Star if useful