Organigrama

Estructura jerárquica de una organización.

Definición

Un organigrama dibuja a cada persona en una tarjeta con su nombre y su cargo, colgada de quien depende. Se lee de arriba abajo, siguiendo la cadena de mando y contando niveles. Se usa para presentar equipos, estructuras de una empresa o cambios de organización.

Editar con tus datos SVG Spec JSON

Datos: label · category · series · y · parent
Buena para: Enseñar de quién depende cada persona y cuántos niveles hay hasta arriba.
Evítala cuando: Cuando la organización tiene decenas de personas por nivel: las tarjetas no caben a lo ancho.
Se lee bien: Entre 3 y 15 elementos; dibuja hasta 15
Datos que faltan: Dibuja el valor ausente como cero.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`label` · opcional	string	La CLAVE del nodo, la que `parent` tiene que citar. Un solo alias: la columna se llama «id» o, si no hay ninguna así, se coge la primera de texto. Sin ella (y sin la de nombre) `fromExportRows` devuelve nodos y enlaces vacíos; si sólo falta ésta, se fabrica «node-0», «node-1»… y ninguna línea de reporte podrá apuntar a ellos.
`category` · opcional	string	El nombre de la persona, en la tarjeta.
`series` · opcional	string	El cargo, bajo el nombre.
`y` · opcional	number	El NIVEL, 0 arriba. No se deduce del padre: se lee tal cual, así que una jerarquía coherente en `parent` pero con niveles mal puestos se dibuja mal sin protestar. Ausente ⇒ 0, es decir, todos raíz.
`parent` · opcional	string	De quién cuelga, citando el `id` de otra fila. MEDIDO Y GRAVE: la referencia NO se valida — `TreeLayout.tsx:87` hace `nodeById.get(lk.sourceId)!` con aserción de no-nulo—, así que un padre que no exista entre las filas revienta el render con «Cannot read properties of undefined (reading nx)». Vacío = raíz, y eso sí es legítimo.

Tamaños

Ancha por necesidad

Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.

A menos de 480 px el motor se niega y explica por qué: Relational tree: word exceeds level slot Frontend. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.

Cuándo usarla

Tres preguntas antes de elegirla

¿Es una cadena de mando de personas?

Si es una jerarquía de ideas o de componentes, un árbol conceptual la enseña sin cargos.

Sí: quédate con organigrama

No: usa Árbol jerárquico

¿Son pocos niveles y pocas personas?

Si la estructura es grande, una lista con sangrías aguanta muchos más nodos.

Sí: quédate con organigrama

No: usa Árbol con sangrías

¿Importa de quién depende cada uno y no qué hace?

Si la pregunta es quién responde de cada tarea, hace falta una matriz de responsabilidades.

Sí: quédate con organigrama

No: usa Matriz RACI

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('treelayout');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →

Dudas

¿Qué aparece en cada tarjeta?

El nombre de la persona y, debajo, su cargo.

¿Cómo indico de quién depende cada uno?

Con una columna de dependencia que cita el identificador de otra fila. La referencia tiene que existir.

¿El nivel se calcula solo?

No. Se lee de su propia columna, con 0 arriba, así que debe cuadrar con las dependencias.

¿Qué hace si faltan datos?

Dibuja el valor ausente como cero. Si un hueco no es un cero en tus datos, rellénalo o elimina la fila antes de dibujar.

¿Cómo se ve en el móvil?

A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.

Relacionadas

Otras formas de responder «cómo funciona algo»

Guía para elegir: cómo funciona algo →