Cómo hacer diagramas con ChatGPT y Markmap
25 de marzo de 2024por Profesor Productivo
Los diagramas o mapas mentales son una herramienta muy interesante para organizar la información de forma visual que nos facilite su comprensión a la hora de explicar ciertos contenidos o estudiarlos. Aunque ChatGPT es capaz de responder con tablas y otros formatos de código, aún no es capaz de generar diagramas visuales sobre el tema o contenido que le proporcionemos.
Esto puede solucionarse con la unión de la capacidad de ChatGPT para generar código con un formato específico y las herramientas online que permiten convertir estos códigos en un diagrama. En este artículo exploraremos las posibilidades de la web markmap.js.org, que tiene esta funcionalidad específica.
ATENCIÓN: Este artículo se basa en la información proporcionada por Sergio Ibáñez Laborda, a quien agradecemos compartir esta combinación de herramientas para la creación de diagramas visuales.
1. Generación del código markdown con ChatGPT
El lenguaje markdown es un lenguaje que permite dar formato a un texto de manera sencilla utilizando ciertos caracteres especiales. Fue diseñado originalmente para crear contenido web más rápido y fácil que usando HTML directamente. Si bien su uso principal es para contenido web, también se puede emplear markdown para formatear cualquier tipo de texto, independientemente de su destino final.
ATENCIÓN: No es necesario que sepas escribir este lenguaje ni que entiendas cómo funciona, simplemente vamos a aprovechar que ChatGPT puede escribirlo con las indicaciones que le pasemos.
Para ello, le daremos un prompt con estas indicaciones para que nos genere el código markdown a partir de un tema de nuestra elección.
PROMPT
Actúa como un profesor de educación secundaria en España y experto en la generación de mapas mentales
en formato markmap.js.
Genera el código markdown que contenga el tema de la estructura de la atmósfera, con las principales características y composición de cada una de las capas.
ChatGPT nos generará un texto con el lenguaje (o código) markdown dentro de una ventana oscura que es la habitual cuanto redacta este tipo de respuestas.
RESPUESTA DE CHATGPT
# Estructura de la Atmósfera
- **Atmósfera**
- Capa de gases que rodea la Tierra, retenida por la gravedad.
- **Composición**
- **Nitrógeno (N2)**: 78%
- **Oxígeno (O2)**: 21%
- **Otros gases** (argon, dióxido de carbono, vapor de agua, etc.): 1%
- **Capas de la Atmósfera**
- **Troposfera**
- **Altitud**: Desde la superficie terrestre hasta aproximadamente 8-15 km.
- **Características**:
- Donde ocurre la mayor parte del clima y los fenómenos meteorológicos.
- La temperatura disminuye con la altitud.
- **Estratosfera**
- **Altitud**: Desde 8-15 km hasta aproximadamente 50 km.
- **Características**:
- Contiene la capa de ozono, que absorbe la radiación ultravioleta del sol.
- La temperatura aumenta con la altitud debido a la presencia del ozono.
- **Mesosfera**
- **Altitud**: Desde 50 km hasta aproximadamente 85 km.
- **Características**:
- La temperatura disminuye con la altitud.
- Donde ocurren las auroras.
- **Termosfera**
- **Altitud**: Desde 85 km hasta aproximadamente 600 km.
- **Características**:
- La temperatura aumenta significativamente con la altitud debido a la absorción de radiación solar.
- Donde se encuentran las estaciones espaciales.
- **Exosfera**
- **Altitud**: Desde 600 km hasta el límite exterior de la atmósfera.
- **Características**:
- La densidad es tan baja que las partículas pueden viajar largas distancias sin colisionar.
Esta es una captura de pantalla de la respuesta de ChatGPT en la ventana de código:
Cuando haya terminado de generar el código, nos iremos a la parte superior derecha de la pantalla negra y haremos clic en «Copy code«
CURSO EN UDEMY: CHAT GPT PARA PROFESORES
En este curso que he creado en la plataforma Udemy se explican, a lo largo de más de 2 horas de videos, las principales aplicaciones y usos de la Inteligencia Artificial de Chat GPT en las tareas docentes: ideas para clases, textos educativos, actividades e instrumentos de evaluación, unidades didácticas, tareas administrativas, etc.
El precio del curso es de 19,99€ (aunque Udemy tiene frecuentes promociones y descuentos )
2. Generación del diagrama en markmap.js.org
El segundo paso de la creación del diagrama consiste en llevar el código que hemos copiado a la web markmap.js.org/repl (o entrar en la web markmap.js.org y hacer clic en «Try it out«).
Al entrar en la web veremos dos ventanas en paralelo con un ejemplo genérico: en la izquierda hay texto en formato markdown y en la derecha veremos el diagrama que se produce con este código.
Lo único que tenemos que hacer es borrar el código de la ventana izquierda (asegúrate de borrar TODO el código que allí se encuentra) y pegar en esta ventana el que había generado ChatGPT. En cuanto lo peguemos, aparecerá el diagrama en la ventana derecha.
El diagrama generado no se puede descargar directamente en un formato estándar de imagen (jpg, png, etc.) sino que sólo lo podemos descargar como HTML o SVG. En ambos casos, podremos descargarlo y abrirlo con el navegador y hacer una captura de pantalla si así lo necesitamos.
Variaciones
A. Proporcionar el material a ChatGPT para crear el código
Como hemos señalado anteriormente, ChatGPT comete menos errores (alucinaciones) si le proporcionamos el material con el que queremos que trabaje. Además, esto nos permite usar los materiales que efectivamente estamos trabajando con nuestros estudiantes, en lugar de obtener resultados del entrenamiento global de esta IA.
De esa forma, podemos incluir el en prompt el texto a partir del cual queremos que produzca el código.
Vamos a ver un ejemplo insertando en el prompt el contenido del apartado del artículo de la wikipedia que habla de las capas de la atmósfera terrestre y la temperatura.
PROMPT
Actúa como un profesor de educación secundaria en España y experto en la generación de mapas mentales
en formato markmap.js.
A partir exclusivamente de este material:
"TEXTO DEL ARTÍCULO DE LA WIKIPEDIA"
Genera el código markdown que contenga un esquema del contenido, con las principales características y composición de cada una de las capas.
RESPUESTA DE CHATGPT
# Capas de la atmósfera terrestre y la temperatura
- **Introducción**
- La temperatura de la atmósfera terrestre varía con la altitud.
- La relación entre la altitud y la temperatura es distinta dependiendo de la capa atmosférica considerada.
- **Gradiente Térmico Atmosférico**
- Definición: Variación de la temperatura con la altitud en la atmósfera.
- Cada capa atmosférica presenta un gradiente térmico diferente.
- **Troposfera**
- **Características**:
- Espesor: Desde la superficie terrestre hasta aproximadamente 6-20 km de altitud.
- Temperatura: Desciende con la altura (Gradiente Térmico Vertical de -6,5 °C cada km).
- Fenómenos meteorológicos.
- **Tropopausa**: Límite con la estratosfera.
- **Estratosfera**
- **Características**:
- Extensión: Desde 9-18 km hasta 50 km de altitud.
- Temperatura: Aumenta con la altitud debido a la formación de ozono.
- Ozonosfera: Concentración alta de ozono.
- **Estratopausa**: Límite con la mesosfera.
- **Mesosfera**
- **Características**:
- Altitud: Desde 50 hasta 80 km.
- Temperatura: Muy fría (-80 °C).
- Importancia por la ionización y reacciones químicas.
- **Termosfera o Ionosfera**
- **Características**:
- Altitud: Desde 69/90 hasta 600/800 km.
- Temperatura: Aumenta con la altitud.
- Línea de Kármán: Límite entre atmósfera y espacio exterior.
- **Exosfera**
- **Características**:
- Altitud: Desde 600/800 hasta 2000/10 000 km.
- Composición: Principalmente hidrógeno y helio.
- Temperatura: Diurna hasta 1500 °C, nocturna 0 °C.
- Límite entre atmósfera terrestre y espacio interplanetario.
Este es el diagrama que genera este código:
RECURSOS SOCIOEDUCATIVOS 