DiagramPreview
Vista avanzadaLive previewBrowser workflowExport SVG

HAR a diagrama de secuencia

Pega HAR JSON y revisa secuencia de requests en el navegador. Útil para documentación técnica, reviews y borradores de IA antes de publicar.

Ejemplos
Detected JSON

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

Vista previaListo
La vista previa aparecerá aquí cuando haya una entrada válida.

Continúa con una herramienta relacionada

Lleva esta vista previa a un flujo cercano para convertir, depurar o exportar.

API debugging workflowopenapi-to-sequencepostman-collection-sequence-diagramhar-file-sequence-diagramapi-error-flow-diagram
OpenAPI a diagrama de secuencia

OpenAPI a diagrama de secuencia para vista previa, review y exportación en documentación de desarrollo.

Abrir
Postman Collection a secuencia

Postman Collection a secuencia para vista previa, review y exportación en documentación de desarrollo.

Abrir
Diagrama de Flujo de Errores API

Convierte códigos de estado, condiciones de fallo, reglas de reintento y acciones de recuperación en un diagrama de errores API.

Abrir

Cómo usar

  1. 1Pega HAR JSON o carga un ejemplo.
  2. 2Revisa secuencia de requests en la vista previa y marca problemas de sintaxis, etiquetas o estructura.
  3. 3Comprueba Comprobar sintaxis y renderizado., Comparar etiquetas, relaciones y orden con el sistema real., Eliminar valores sensibles antes de compartir. antes de publicar, exportar o compartir.
  4. 4Guarda la fuente junto con el resultado exportado para que futuras reviews sean reproducibles.

Casos de uso

Debugging APIPerformance frontendAnálisis third-partyEvidencia de incidente

Herramientas relacionadas

OpenAPI a diagrama de secuencia

OpenAPI a diagrama de secuencia para vista previa, review y exportación en documentación de desarrollo.

Postman Collection a secuencia

Postman Collection a secuencia para vista previa, review y exportación en documentación de desarrollo.

Diagrama de Flujo de Errores API

Convierte códigos de estado, condiciones de fallo, reglas de reintento y acciones de recuperación en un diagrama de errores API.

FAQ

¿HAR a diagrama de secuencia funciona en el navegador?

Sí. La mayor parte de la previsualización, validación y exportación ocurre en el navegador. Las herramientas con IA solo envían el prompt a la API configurada.

¿Qué debo revisar antes de publicar?

Comprueba que el diagrama o archivo refleje el flujo real, que las etiquetas sean legibles, que no haya datos sensibles y que el SVG/PNG exportado siga siendo revisable.

¿Cómo ayuda en la documentación?

La herramienta convierte texto o archivos técnicos en una vista visual revisable que puedes enlazar desde README, ADR, runbooks, issues y documentación de API.

¿Puedo pegar contenido privado?

Evita pegar secretos, tokens, datos de clientes o infraestructura sensible. Para diagramas confidenciales, elimina valores privados o usa un entorno controlado.

HAR a diagrama de secuencia ayuda a los equipos a revisar visualmente HAR JSON antes de publicar, en lugar de depender solo de texto bruto o capturas.

La vista previa sirve para documentación técnica, reviews de API, decisiones de arquitectura, onboarding y borradores generados por IA.

Antes de exportar, revisa Comprobar sintaxis y renderizado., Comparar etiquetas, relaciones y orden con el sistema real., Eliminar valores sensibles antes de compartir. y elimina valores sensibles.

Demo: convertir HAR JSON en una vista revisable

HAR a diagrama de secuencia es más útil cuando la entrada es lo bastante pequeña para entenderse durante la review. Empieza con un fragmento enfocado y amplíalo después.

  • Empezar con un ejemplo pequeño.
  • Comparar etiquetas y relaciones con la documentación real.
  • Exportar solo después de una revisión manual.
{"log":{"entries":[{"request":{"url":"/api/orders"},"response":{"status":200}}]}}

Un fragmento enfocado se depura mejor que un volcado completo.

Checklist de review de HAR a diagrama de secuencia

La review no consiste solo en comprobar que algo renderiza. Lo importante es confirmar que la vista previa comunica correctamente la intención técnica.

  • Comprobar sintaxis y renderizado.
  • Comparar etiquetas, relaciones y orden con el sistema real.
  • Eliminar valores sensibles antes de compartir.
entrada -> vista previa -> revisión técnica -> exportar o enlazar

La vista previa no sustituye la revisión técnica, pero reduce el camino hasta ella.

Checklist de revisión para HAR a diagrama de secuencia

Usa HAR a diagrama de secuencia para inspeccionar visualmente contenido fuente antes de publicar documentación, notas de PR, incidentes o handoffs. HAR a diagrama de secuencia para vista previa, review y exportación en documentación de desarrollo.

Antes de exportar, revisa legibilidad, relaciones, datos sensibles y si la vista sigue teniendo sentido tras editar la entrada.

Límites y solución de problemas

Si la vista falla, reduce la entrada al ejemplo completo más pequeño, valida la sintaxis y agrega secciones gradualmente.

Trata la vista como superficie de revisión, no como fuente de verdad. Los resultados críticos requieren validación humana.

Entradas de ejemplo

  • 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...

Madurez de la herramienta

Vista avanzada

Analizador avanzado

Esta herramienta extrae estructura y relaciones de entradas de desarrollo. Los casos complejos deben comprobarse contra la fuente.

La etiqueta indica si la herramienta sirve mejor para exportar, depurar, analizar rápido o generar con AI.