Diagrama conceptual o de proceso · Illustration diagram / annotated diagram
Diagrama de ilustración
Un diagrama de ilustración conecta partes de un objeto, documento o interfaz con anotaciones explicativas. Sirve para comprender su anatomía y función. El tamaño dibujado puede ser esquemático: no representa una medida salvo que haya una escala.
También: ilustración anotada, diagrama anotado, anatomía.
- Qué permite ver
- Organizar ideas y conceptos
- Clave de lectura
- Partes de un objeto y la función de cada una.
El ejemplo en vivo
Anatomía de una ficha de contenido
Esquema anotado · partes de una página · sin magnitudes
PDF guarda la vista del gráfico; SVG conserva la imagen vectorial y TSV contiene los datos. Este ejemplo usa datos simulados o un esquema hipotético.
{"slug":"diagrama_de_ilustracion","title":"Anatomía de una ficha de contenido","unit":"Esquema anotado · partes de una página · sin magnitudes","reading":"Las anotaciones conectan cada parte de la ficha con su función. Los tamaños son esquemáticos y no describen la maqueta final.","headers":["Parte","Función"],"rows":[["Título","Identificar la pregunta"],["Resumen","Dar una respuesta inicial"],["Desarrollo","Explicar con evidencia"],["Fuentes","Permitir verificar"]],"geometry":"<rect class=\"vx-map-cell\" x=\"220\" y=\"20\" width=\"175\" height=\"275\" rx=\"8\"/><rect class=\"vx-b\" x=\"240\" y=\"43\" width=\"135\" height=\"22\" rx=\"3\"/><rect class=\"vx-a\" x=\"240\" y=\"84\" width=\"135\" height=\"43\" rx=\"3\"/><rect class=\"vx-c\" x=\"240\" y=\"150\" width=\"135\" height=\"4\" rx=\"0\"/><rect class=\"vx-c\" x=\"240\" y=\"166\" width=\"110\" height=\"4\" rx=\"0\"/><rect class=\"vx-c\" x=\"240\" y=\"182\" width=\"135\" height=\"4\" rx=\"0\"/><rect class=\"vx-c\" x=\"240\" y=\"198\" width=\"110\" height=\"4\" rx=\"0\"/><rect class=\"vx-c\" x=\"240\" y=\"214\" width=\"135\" height=\"4\" rx=\"0\"/><rect class=\"vx-b\" x=\"240\" y=\"252\" width=\"95\" height=\"15\" rx=\"3\"/><line class=\"vx-stroke\" x1=\"220\" y1=\"55\" x2=\"145\" y2=\"55\" stroke-width=\"2\"/><line class=\"vx-stroke\" x1=\"395\" y1=\"105\" x2=\"460\" y2=\"105\" stroke-width=\"2\"/><line class=\"vx-stroke\" x1=\"220\" y1=\"185\" x2=\"145\" y2=\"185\" stroke-width=\"2\"/><line class=\"vx-stroke\" x1=\"395\" y1=\"260\" x2=\"460\" y2=\"260\" stroke-width=\"2\"/>","labels":[{"x":85,"y":55,"text":"Título","kind":""},{"x":510,"y":105,"text":"Resumen","kind":""},{"x":85,"y":185,"text":"Desarrollo","kind":""},{"x":510,"y":260,"text":"Fuentes","kind":""}],"legend":[],"note":"Cada anotación necesita una relación clara con lo representado.","kind":"Ejemplo conceptual"}Esquema hipotético para explicar la representación; no documenta un caso real.
Consultar pasos y relaciones
| Parte | Función |
|---|---|
| Título | Identificar la pregunta |
| Resumen | Dar una respuesta inicial |
| Desarrollo | Explicar con evidencia |
| Fuentes | Permitir verificar |
Qué preguntas ayuda a responder
- ¿Qué función cumple cada parte de una ficha de contenido?
- ¿Dónde debe mirar una persona para entender una interfaz?
Qué datos necesitás
Un objeto identificable, sus partes y anotaciones verificables. No exige datos numéricos. Definí qué detalles se simplifican y usá conectores que no apunten a dos partes posibles.
El ejemplo es una ficha hipotética con Título, Resumen, Desarrollo y Fuentes. Las proporciones son ilustrativas y no documentan el diseño final del sitio ni un resultado de usabilidad.
Cómo leerlo
Seguí cada conector desde el elemento hacia su función. El título identifica la pregunta; las fuentes permiten verificar. La posición y longitud de los conectores solo ayudan a ubicar la anotación.
La tabla conserva las mismas parejas parte–función. Es la alternativa de lectura cuando el esquema visual no resulta suficiente o no puede verse.
Cuándo elegirlo y cuándo buscar otra opción
Para onboarding, documentación de componentes y guías de lectura de un dashboard. Una anotación debe responder una duda concreta; priorizá las partes que la audiencia necesita reconocer.
Para explicar un orden de ejecución, usá flujo o línea de tiempo. Para comparar tamaños o posiciones medidos, conservá una escala y elegí un gráfico cuantitativo apropiado.
Errores y malas interpretaciones
- Atribuir eficacia a un componente solo porque el diagrama describe su propósito.
- Ocultar anotaciones esenciales detrás de hover.
- Interpretar el área de cada bloque como tiempo de lectura o importancia.
Alternativas para comparar
- Diagrama de flujo. Explica decisiones y secuencia, no la anatomía de una pieza.
- Mapa de ideas. Organiza preguntas abiertas en torno a un concepto.
- Línea de tiempo. Sitúa hitos sobre el tiempo.
En dashboards, informes y presentaciones
En una guía de dashboards, puede explicar encabezado, período, filtros y fuente antes de interpretar un KPI. Mantené las anotaciones en texto y vinculá cada una con una parte visible; el dibujo debe ayudar a usar el producto.
Fuentes y alcance de la revisión
Se consultaron las secciones pertinentes de estas fuentes para la definición, codificación o método indicado. Los ejemplos, cálculos aplicados y textos de esta ficha pertenecen al proyecto.