Visor de Relaciones JSON
Mapea entidades y referencias de clave foránea en JSON — detecta campos id/*_id y dibuja el grafo de relaciones.
JSON Document Input
Relationship Diagram (4 Entities)
root
1| _id |
|---|
| 1 |
users
2linked via _parentId → root._id
| _parentId | _id | id | name | |
|---|---|---|---|---|
| 1 | 1 | 1 | Alice | alice@example.com |
| 1 | 2 | 2 | Bob | bob@example.com |
posts
2linked via _parentId → root._id
| _parentId | _id | id | title | userId |
|---|---|---|---|---|
| 1 | 1 | 10 | Hello World | 1 |
| 1 | 2 | 11 | JSON Tools | 2 |
comments
1linked via _parentId → root._id
| _parentId | _id | id | body | postId | userId |
|---|---|---|---|---|---|
| 1 | 1 | 100 | Great article! | 10 | 2 |
¿Qué es Visor de Relaciones JSON?
El Visor de Relaciones JSON ejecuta el mismo motor de normalización de tablas que JSON to Table — cada array de objetos en cualquier parte del documento se convierte en su propia tabla, enlazada mediante una columna `_parentId → parentTable._id` con la tabla que la contenía — pero renderiza el resultado como un diagrama entidad-relación interactivo en lugar de tablas de hoja de cálculo literales. Los nodos se pueden disponer de dos maneras: una vista de Esquema ERD que muestra cada tabla como una tarjeta (con sus filas completas, o un resumen compacto 'Solo Nodos' con solo sus nombres de columna), o una vista de Grafo de Nodos que muestra cada tabla como una pequeña píldora arrastrable etiquetada con sus recuentos de filas y columnas. Se dibuja una flecha de una tabla a un array solo cuando ese array está anidado directamente dentro de uno de sus propios registros — el enlace proviene de dónde vive físicamente el array en el JSON, no del nombre de un campo, así que un campo de aspecto similar como `userId` en un array `posts` que es hermano de un array `users` (ambos anidados bajo el mismo padre, no dentro del otro) permanece como una columna plana en lugar de convertirse en una relación detectada.
Cómo usar Visor de Relaciones JSON
- Pega un array JSON de objetos o un único objeto en el panel izquierdo, o carga el ejemplo integrado de Users / Posts / Comments.
- El diagrama se construye automáticamente — cada array anidado de objetos se convierte en su propio nodo, conectado por una flecha de vuelta a la tabla cuyo registro realmente lo contenía.
- Usa los controles de vista al pie del lienzo para alternar entre Esquema ERD (tarjetas de tabla completas, o 'Solo Nodos' para ver solo los nombres de columna) y Grafo de Nodos (píldoras compactas arrastrables).
- Arrastra cualquier nodo para recolocarlo, pulsa Restablecer para recuperar la disposición automática por profundidad, y haz zoom con los controles en pantalla o con Ctrl/Cmd + rueda.
- Pulsa el icono de descarga en cualquier nodo para exportar solo las filas de esa tabla como CSV, o abre JSON to Table para ver los mismos datos como tablas de hoja de cálculo literales.
Ejemplos
Arrays hermanos solo se enlazan con su padre común
Entrada
{ "users": [{ "id": 1, "name": "Alice" }], "posts": [{ "id": 10, "title": "Hi", "userId": 1 }], "comments": [{ "id": 100, "postId": 10, "userId": 1 }] }
Salida
Cuatro nodos: root (1 fila), users, posts y comments — cada uno enlazado directamente con root, ya que users, posts y comments son hermanos y no están anidados entre sí. userId y postId siguen siendo columnas normales de posts/comments, no aristas.
Un array uno-a-muchos genuinamente anidado
Entrada
{"users": [{"id": 1, "name": "Alice", "posts": [{"id": 10, "title": "Hello"}, {"id": 11, "title": "World"}]}]}
Salida
Dos nodos enlazados: users y users.posts, con una flecha de users a users.posts — porque posts está anidado dentro de cada registro de usuario, no es un array hermano bajo la misma raíz.
Errores comunes
- Esperar que un campo como userId o post_id dibuje una línea de relación con otra tabla — las aristas solo provienen de dónde está físicamente anidado un array en el JSON; un campo de aspecto similar en un array hermano es solo una columna plana, no un enlace detectado.
- Asumir que _id y _parentId son campos de tus datos originales — son sintéticos, generados por la herramienta para representar el enlace padre-hijo, exactamente igual que en JSON to Table.
- Proporcionar un array simple de primitivos o un único objeto plano sin arrays anidados y esperar múltiples nodos enlazados — eso produce exactamente un nodo (root o records), porque no hay nada que normalizar en una tabla hija.
- Cambiar al Grafo de Nodos y esperar ver ahí los datos de las filas — esa vista solo muestra recuentos de filas/columnas por nodo; cambia a Esquema ERD con 'Solo Nodos' desactivado para ver el contenido completo de las tablas.
- Arrastrar los nodos a una disposición personalizada y luego pegar un documento JSON distinto — la disposición se restablece a la organización automática por profundidad siempre que cambia el conjunto de tablas detectadas.
Por qué usar esta herramienta
- Reutiliza exactamente la lógica de normalización de JSON to Table, así que el diagrama siempre coincide con lo que el mismo documento produciría como hojas de cálculo — no hay reglas de detección separadas que reconciliar mentalmente.
- Dos disposiciones distintas — una vista detallada de Esquema ERD y un Grafo de Nodos compacto — cubren tanto la lectura atenta de los campos de una tabla como la vista de pájaro de un documento con muchas tablas enlazadas.
- La disposición automática posiciona los nodos por profundidad de anidamiento, y arrastrar, zoom y una exportación a CSV de un clic por nodo están disponibles sin salir del diagrama.
- Se ejecuta íntegramente en el cliente — el documento que visualizas nunca se sube a ninguna parte.
- Un enlace directo a JSON to Table te permite saltar del diagrama a la vista de hoja de cálculo literal de exactamente los mismos datos en un clic.