Visualizador de JSON en gráfico
Pega JSON o abre un archivo .json y ve su estructura como un diagrama: cada objeto y cada array se convierte en una tarjeta, unida a su padre por la clave bajo la que se encuentra. Amplía, arrastra, contrae ramas, busca claves o valores, copia la ruta de cualquier campo y guarda el gráfico como PNG o SVG.
Última actualización:
Cómo usar Visualizador de JSON en gráfico
- Pega tu JSON en el cuadro o abre un archivo .json. Al cargar se dibuja un catálogo de tienda de ejemplo para que puedas probarlo de inmediato.
- Explora el gráfico: arrastra para moverte, usa la rueda o pellizca para hacer zoom y pulsa Ajustar para ver todo el documento.
- Contrae ramas con el botón redondo − de una tarjeta y vuelve a abrirlas con +.
- Busca una clave o un valor; usa las flechas o Intro para saltar entre coincidencias.
- Haz clic en un campo para ver su JSONPath y luego copia la ruta o el valor.
- Descarga el gráfico como PNG para documentos y presentaciones, o como SVG para un escalado nítido.
Cómo leer el gráfico
| Lo que ves | Significado |
|---|---|
Tarjeta con encabezado verde y {n} | Un objeto con n claves |
Tarjeta con encabezado naranja y [n] | Un array con n elementos; los elementos se etiquetan por índice 0, 1, 2… |
| Texto verde entre comillas | Valor de cadena |
| Texto naranja | Número (enteros y decimales son el mismo tipo en JSON) |
| Texto morado | true o false |
| Texto gris | null, o un enlace a un objeto o array anidado |
| Línea de una fila a otra tarjeta | La clave o el índice de esa fila contiene el objeto o array anidado |
Atajos de teclado y ratón
- Arrastra el lienzo para desplazarte; en pantallas táctiles arrastra con un dedo y pellizca con dos.
- La rueda del ratón hace zoom alrededor del puntero; mantén Shift para desplazarte de lado.
- Con el gráfico enfocado, + y − hacen zoom, 0 ajusta todo el gráfico y las flechas lo desplazan.
- En el cuadro de búsqueda, Intro va a la siguiente coincidencia y Shift+Intro a la anterior.
- Haz clic en una fila que enlace a una tarjeta anidada y vuelve a hacer clic para contraer o expandir esa tarjeta.
Cuándo ayuda un gráfico
Los gráficos son útiles para entender una respuesta de API desconocida antes de escribir código para ella, para detectar registros incoherentes en un array (un elemento con un objeto anidado de más o de menos destaca), para explicar un modelo de datos en un documento de diseño y para comprobar qué tan anidado está un archivo de configuración. Para editar o validar el texto en sí, el Formateador de JSON y el Editor de JSON son más adecuados, y el Probador de JSONPath ejecuta consultas con las rutas que copies aquí.
Preguntas frecuentes
¿Qué muestra un gráfico de JSON?
Cada objeto o array del documento se dibuja como una tarjeta. Los valores simples (cadenas, números, true/false, null) aparecen dentro de la tarjeta de su padre, y cada objeto o array anidado tiene su propia tarjeta conectada por una línea desde la clave que lo contiene. Así, la forma de una respuesta de API o de un archivo de configuración se ve de un vistazo.
¿En qué se diferencia de un visor de árbol JSON?
Un visor de árbol muestra los mismos datos como un esquema con sangrías, que es compacto y bueno para leer valores. Un gráfico despliega la estructura en dos dimensiones, lo que facilita ver qué tan profundo es el anidamiento, qué ramas son grandes y cómo se relacionan las partes. Usa el que mejor se adapte a la tarea.
¿Puede manejar archivos JSON grandes?
Se pueden abrir archivos de hasta 25 MB. Cuando un documento tiene más de unos 250 objetos y arrays, los niveles más profundos empiezan contraídos para que la página siga respondiendo, y los arrays muestran los primeros 60 elementos en una tarjeta. Abre las ramas que necesites o usa la búsqueda, que recorre todo el documento.
¿Qué formato de ruta se copia?
Las rutas usan la notación de punto y corchetes de JSONPath empezando por $, por ejemplo $.address.geo.lat o $.products[2]['unit price']. Las claves que no son identificadores simples se escriben entre corchetes y comillas. La misma ruta funciona en herramientas JSONPath y, sin el $, en JavaScript.
¿Por qué dice que mi JSON no es válido?
La entrada debe ser JSON estricto: claves y cadenas entre comillas dobles, sin comas finales, sin comentarios y sin comillas simples. El error muestra la línea y la columna donde se detuvo el análisis; el error real suele estar justo antes de ese punto.
¿Se envía mi JSON a un servidor?
No. El análisis, la disposición y la exportación de imágenes se hacen en tu navegador. No se sube nada, así que es seguro usarlo con respuestas de API privadas o archivos de configuración.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.
Herramientas relacionadas
Ver todas las de Conversores de datos y formatos de archivo →