Advanced previewLive previewBrowser workflowExport SVG

HAR File to Sequence Diagram

HAR File to Sequence Diagram: Turn browser Network HAR exports into request sequence diagrams for debugging and documentation.

Examples

Detected JSON

This input may work better in the matching tool. Open JSON tool

HAR JSON

PreviewReady

The rendered diagram will appear here.

Continue with a related tool

Move this preview into a nearby workflow for conversion, debugging, or export.

API debugging workflowopenapi-to-sequencepostman-collection-sequence-diagramhar-file-sequence-diagramapi-error-flow-diagram

OpenAPI to Sequence Diagram

Convert OpenAPI paths into a Mermaid sequence diagram locally.

Open

Postman Collection to Sequence Diagram

Postman Collection to Sequence Diagram: Convert Postman collection JSON into a readable API request sequence diagram.

Open

API Error Flow Diagram

Turn API status codes, failure conditions, retry rules, and recovery actions into a clear error flow diagram.

Open

How to use

1Export a HAR file from the browser Network panel and remove cookies, tokens, and private payloads.
2Paste HAR JSON or load a sample request flow.
3Review request order, domains, methods, response status, and slow requests.
4Hide static asset noise when the goal is to explain an API workflow.
5Export the diagram for bug reports, performance notes, or incident timelines.

Common use cases

Frontend API debuggingBrowser network waterfall reviewIncident request timelinesPerformance investigationBackend handoff notes

Related tools

OpenAPI to Sequence Diagram

Convert OpenAPI paths into a Mermaid sequence diagram locally.

Postman Collection to Sequence Diagram

Postman Collection to Sequence Diagram: Convert Postman collection JSON into a readable API request sequence diagram.

API Error Flow Diagram

Turn API status codes, failure conditions, retry rules, and recovery actions into a clear error flow diagram.

FAQ

Can I use generated or production-like source?

Yes, but remove secrets, tokens, private hostnames, and customer data before pasting any source.

What should I remove from a HAR before sharing?

Remove cookies, authorization headers, query tokens, private hostnames, request bodies, and customer data before sharing or documenting a HAR flow.

How is HAR different from OpenAPI or Postman?

HAR shows observed browser traffic. OpenAPI shows the intended contract, and Postman often shows a test or documentation workflow.

HAR File to Sequence Diagram converts browser Network HAR exports into request sequence diagrams for frontend debugging, API handoff, and incident documentation.

Use it to see observed request order, domains, methods, response status codes, and slow calls without reading a large HAR JSON file by hand.

Because HAR files can contain sensitive headers and payloads, sanitize the source before sharing a diagram or attaching it to public documentation.

Demo: turn a browser HAR into request sequence

A HAR sequence diagram explains what the browser requested and in what order. It helps debug login, checkout, asset loading, and API waterfall behavior.

Group requests by domain to separate first-party and third-party calls.
Show long API requests as highlighted messages.
Hide static asset noise when documenting business flow.

Browser -> app.example.com: GET /checkout
Browser -> api.example.com: POST /api/cart
Browser -> pay.example.com: POST /authorize

Performance checklist: sequence plus timing is more useful

Request order alone is not enough for performance review. Pair the sequence with duration, size, cache status, and blocked time.

Look for late-starting critical API calls.
Check cache misses for repeated assets.
Separate network latency from server wait time.

GET /app.js 40ms cached
POST /api/checkout 1250ms waiting
GET /analytics.js 300ms third-party

Privacy checklist: sanitize HAR before sharing

HAR files are rich debugging artifacts, but they often contain cookies, tokens, request bodies, and customer-specific URLs. Clean the source before turning it into a shareable diagram.

Remove Cookie, Authorization, and Set-Cookie headers.
Replace account ids, emails, and private hosts with placeholders.
Keep enough URL path and status information to preserve the debugging story.

Authorization: Bearer ***
Cookie: <removed>
GET https://api.example.com/accounts/{accountId}/billing -> 500

Review checklist for HAR File to Sequence Diagram

Use HAR File to Sequence Diagram when you need to inspect source content visually before it becomes documentation, a pull request note, an incident write-up, or a handoff artifact. HAR File to Sequence Diagram: Turn browser Network HAR exports into request sequence diagrams for debugging and documentation.

Before exporting, check that labels are readable, relationships match the source, generated examples do not contain private data, and the preview still makes sense after you edit the input.

Limits and troubleshooting

If the preview fails, reduce the input to the smallest complete example, confirm the format syntax, and then add sections back one at a time. Many rendering failures come from partial files, indentation mistakes, missing diagram headers, or copied snippets that depend on hidden context.

Treat the preview as a review surface rather than a source of truth. Generated diagrams, converted files, dashboards, and rule examples should be checked before they are used in production documentation or operations.

Example inputs to test

Checkout HAR: { "log": { "version": "1.2", "creator": { "name": "DiagramPreview" }, "entries": [ { "time": 86, "request": { "method": "GET", "url": "https://app.example.com/checkout" }, "respons...
Assets waterfall: { "log": { "version": "1.2", "creator": { "name": "DiagramPreview" }, "entries": [ { "time": 34, "request": { "method": "GET", "url": "https://cdn.example.com/app.js" }, "response"...
API debug: { "log": { "version": "1.2", "creator": { "name": "DiagramPreview" }, "entries": [ { "time": 188, "request": { "method": "POST", "url": "https://api.example.com/login" }, "response...

Tool maturity

Advanced preview

Advanced parser

This tool extracts useful structure and relationships from developer input. Complex edge cases should still be checked against the source.

The maturity label is not a quality score. It tells visitors whether the tool is best for stable export, deeper debugging, quick parsing, or AI-assisted generation.