Cómo hacer diagramas con ChatGPT y Markmap


(⏱️ Tiempo de lectura: 8:30 minutos)

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.

Imagen generada con IA. Una profesora en clase dibujando un diagrama complejo en la pizarra.

⚠️​ 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:

Captura de pantalla de la respuesta de ChatGPT con el código markdown

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.


Imagen generada con IA. Un profesoa en clase dibujando un diagrama complejo en la pizarra.

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:



B. Generar el esquema de apartados y subapartados antes que el código

Algunas personas podrán pensar que si ChatGPT genera directamente el código y no entendemos este código, podemos perder el control del contenido final que vamos a llevar a la web markmap.

Por ello, en estos casos puede resultar interesante usar un paso intermedio pidiéndole a ChatGPT que genere un esquema con apartados y subapartados que podamos comprender y modificar a nuestro gusto y, cuando estemos satisfechos, pasarle la orden de que genere el código markdown a partir del esquema seleccionado.

Como hemos dicho, es un proceso un poco más lento pero permite más control sobre el resultado final.

PROMPT 1: REDACCIÓN DEL ESQUEMA

Actúa como profesor de educación secundaria en España. 
Escribe el esquema en apartados y subapartados del tema de "Composición y estructura de la atmósfera", añadiendo datos concretos de porcentajes de gases y alturas de las capas
RESPUESTA DE CHATGPT

Composición y Estructura de la Atmósfera

Introducción

-Importancia de la atmósfera en el mantenimiento de la vida en la Tierra.
-Descripción general de los componentes y capas.

Composición de la Atmósfera

-Nitrógeno (N2)
     Constituye aproximadamente el 78% de la atmósfera.
     Funciona como un gas inerte y es esencial para la vida.
-Oxígeno (O2)
     Representa cerca del 21% de la atmósfera.
     Vital para la respiración de organismos aeróbicos.
-Otros Gases
     Dióxido de carbono (CO2): Alrededor del 0,04%.
     Argón: Cerca del 0,93%.
    Vapor de agua: Variable, generalmente entre el 0,1% y el 4%.

Estructura de la Atmósfera

-Troposfera
   Se extiende desde la superficie hasta aproximadamente 8-15 km de altitud.
   La temperatura disminuye con la altura, con un promedio de -6,5°C por cada 1000 metros.

-Estratosfera
   Va desde los 15 km hasta unos 50 km de altura.
   La temperatura aumenta con la altitud debido a la presencia de ozono, alcanzando unos -3°C.

-Mesosfera
   Desde los 50 km hasta aproximadamente 80 km de altitud.
   Es la capa más fría, con temperaturas que pueden descender hasta -80°C.

-Termosfera
   Se extiende desde los 80 km hasta aproximadamente 600 km de altura.
   Aquí es donde se encuentran las estaciones espaciales.

-Exosfera
   Comienza alrededor de los 600 km y se extiende hasta el límite con el espacio exterior, a unos 10 000 km.
   Contiene principalmente partículas de helio e hidrógeno, y su densidad es extremadamente baja.

Conclusiones

-Recapitulación de la importancia de comprender la composición y estructura de la atmósfera para entender los fenómenos climáticos y proteger el medio ambiente.
-Énfasis en la necesidad de preservar el equilibrio atmosférico para el bienestar de todos los seres vivos.

Cuando tengamos un esquema que nos gusta, le pedimos que lo transforme en código markdown:

PROMPT 2: GENERACIÓN DEL CÓDIGO MARKDOWN

Ahora transforma este esquema en un código markdown para crear un diagrama
RESPUESTA DE CHATGPT

# Composición y Estructura de la Atmósfera

## Introducción
- Importancia de la atmósfera en el mantenimiento de la vida en la Tierra.
- Descripción general de los componentes y capas.

## Composición de la Atmósfera
### Nitrógeno (N2)
- Constituye aproximadamente el 78% de la atmósfera.
- Funciona como un gas inerte y es esencial para la vida.
### Oxígeno (O2)
- Representa cerca del 21% de la atmósfera.
- Vital para la respiración de organismos aeróbicos.
### Otros Gases
- Dióxido de carbono (CO2): Alrededor del 0,04%.
- Argón: Cerca del 0,93%.
- Vapor de agua: Variable, generalmente entre el 0,1% y el 4%.

## Estructura de la Atmósfera
### Troposfera
- Se extiende desde la superficie hasta aproximadamente 8-15 km de altitud.
- La temperatura disminuye con la altura, con un promedio de -6,5°C por cada 1000 metros.
### Estratosfera
- Va desde los 15 km hasta unos 50 km de altura.
- La temperatura aumenta con la altitud debido a la presencia de ozono, alcanzando unos -3°C.
### Mesosfera
- Desde los 50 km hasta aproximadamente 80 km de altitud.
- Es la capa más fría, con temperaturas que pueden descender hasta -80°C.
### Termosfera
- Se extiende desde los 80 km hasta aproximadamente 600 km de altura.
- Aquí es donde se encuentran las estaciones espaciales.
### Exosfera
- Comienza alrededor de los 600 km y se extiende hasta el límite con el espacio exterior, a unos 10 000 km.
- Contiene principalmente partículas de helio e hidrógeno, y su densidad es extremadamente baja.

## Conclusiones
- Recapitulación de la importancia de comprender la composición y estructura de la atmósfera para entender los fenómenos climáticos y proteger el medio ambiente.
- Énfasis en la necesidad de preservar el equilibrio atmosférico para el bienestar de todos los seres vivos.

Y este es el diagrama que sale a partir de dicho código:


Como has visto, esta combinación de ChatGPT+Markmap es una buena solución a la generación de diagramas a partir de un tema o de un contenido.

Si usas este procedimiento o conoces alguna otra forma de crear diagramas, te agradeceríamos que nos lo contaras en los comentarios o en redes sociales.

Instagram
YouTube

twitter
Facebook

⚠️  Los enlaces de esta página y de toda la web pueden contener código de afiliados de Amazon o de otras empresas. Esto significa que recibimos una comisión por cada compra de producto o servicio sin que cambie el precio de venta para el comprador.

Deja un comentario

  • Responsable: Guillermo Antón Pardo
  • Finalidad: Gestionar y responder a tus comentarios
  • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos de este formulario, así como el derecho a presentar una reclamación ante una autoridad de control
  • Información adicional: En nuestra página con la Política de Privacidad encontrarás más información sobre la recopilación y uso de tu información por parte de Profesor Productivo.