Capas apiladas
Niveles que se apoyan unos en otros.
Definición
Las capas apiladas dibujan de dos a siete bloques iguales, uno sobre otro, con su nombre a la izquierda y una nota a la derecha. Se leen en un solo orden: cada capa se apoya en la de debajo. Sirven para explicar una arquitectura, un modelo de servicio o cualquier cosa hecha de niveles.
- Datos
- capa · cuerpo · nota · rol
- Buena para
- Explicar de qué niveles está hecha una cosa y en qué orden se apoyan.
- Evítala cuando
- Cuando una capa es más importante o más grande que otra: todos los bloques miden lo mismo a propósito.
- Se lee bien
- Entre 2 y 7 elementos; dibuja hasta 12
- Datos que faltan
- No usa valores que puedan faltar.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
capa · opcional | string | El rótulo, fuera del bloque y a la izquierda. Medido: sin él el bloque sigue dibujado. |
cuerpo · opcional | string | El contenido breve, dentro del bloque. |
nota · opcional | string | La anotación lateral de la derecha, unida por una guía fina. Medido: sin la columna desaparecen la banda y sus guías (7→4 marcas). |
rol · opcional | string | neutro · foco · alerta · ausente · favorable. `ausente` marca la capa NO CONSTRUIDA: sin relleno, contorno discontinuo, tinta apagada. |
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 sus rótulos no caben sin pisarse o recortarse, y el motor no la publica así. 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
¿Las capas se apoyan unas en otras y no se contienen?
Si unas cosas están dentro de otras, el anidamiento conceptual lo dibuja sin contar bordes.
Sí: quédate con capas apiladas
No: usa Anidamiento conceptual
¿Todas las capas están igual de a la vista?
Si hay una frontera entre lo que se ve y lo que queda oculto, el iceberg la traza.
Sí: quédate con capas apiladas
No: usa Iceberg
¿Basta con una sola vista de la pila?
Si describes un sistema de software que hay que ver a distintos niveles de detalle, el diagrama C4 está hecho para eso.
Sí: quédate con capas apiladas
No: usa Diagrama C4
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('concept-layers');
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
¿Por qué todas las capas miden lo mismo?
Para que la forma no insinúe que una pesa más que otra. Solo se lee el orden.
¿Qué es una capa ausente?
La que no está construida: sin relleno, contorno discontinuo y tinta apagada.
¿Para qué sirve la nota lateral?
Para añadir un matiz a cada capa, unido por una guía fina. Si no hay notas, la banda de la derecha desaparece.
¿Qué hace si faltan datos?
No usa valores que puedan faltar.
¿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»
Matriz de adyacenciaquién se conecta con quién en una red
Diagrama de arcosconexiones entre nodos ordenados en una línea
Diagrama de pajaritacausas y consecuencias de un riesgo central
Columnas enfrentadascontrastar dos o más posturas
Rejilla con casilla vacíaver qué combinación falta
Diagrama de Ishikawacausas posibles de un problema por familias