Diagrams, or mind maps, serve as valuable tools for visually organizing information, enhancing comprehension when explaining content or studying. While ChatGPT can respond with tables and other code formats, it still lacks the capability to generate visual diagrams based on provided topics or content.
This limitation can be overcome by combining ChatGPT’s ability to generate code in a specific format with online tools that convert this code into diagrams. In this article, we will explore the capabilities of markmap.js.org, a web application designed for this purpose.
1. Generating Markdown Code with ChatGPT
Markdown is a lightweight markup language that allows easy text formatting using special characters. Originally designed to facilitate faster and simpler web content creation than directly using HTML, markdown can also format any type of text, regardless of its final destination.
To achieve this, we will provide a prompt instructing ChatGPT to generate the markdown code based on a topic of our choice.
Prompt Example
Prompt: Act as a secondary education teacher in Spain and an expert in generating mind maps in markmap.js format. Generate the markdown code containing the topic of the structure of the atmosphere, with the main characteristics and composition of each layer.
ChatGPT’s Response
markdownCopiar código# Structure of the Atmosphere
- **Atmosphere**
- Layer of gases surrounding the Earth, retained by gravity.
- **Composition**
- **Nitrogen (N2)**: 78%
- **Oxygen (O2)**: 21%
- **Other gases** (argon, carbon dioxide, water vapor, etc.): 1%
- **Layers of the Atmosphere**
- **Troposphere**
- **Altitude**: From the Earth's surface to approximately 8-15 km.
- **Characteristics**:
- Where most weather and meteorological phenomena occur.
- Temperature decreases with altitude.
- **Stratosphere**
- **Altitude**: From 8-15 km to approximately 50 km.
- **Characteristics**:
- Contains the ozone layer, which absorbs ultraviolet radiation from the sun.
- Temperature increases with altitude due to the presence of ozone.
- **Mesosphere**
- **Altitude**: From 50 km to approximately 85 km.
- **Characteristics**:
- Temperature decreases with altitude.
- Where auroras occur.
- **Thermosphere**
- **Altitude**: From 85 km to approximately 600 km.
- **Characteristics**:
- Temperature significantly increases with altitude due to solar radiation absorption.
- Home to space stations.
- **Exosphere**
- **Altitude**: From 600 km to the outer limit of the atmosphere.
- **Characteristics**:
- Density is so low that particles can travel long distances without colliding.
This code is displayed in a dark window, typical for ChatGPT’s markdown responses.
Once ChatGPT has generated the code, we can click “Copy code” at the top right of the dark screen.
Online Course: ChatGPT for Teachers
✅ In this online course, you will learn, through over 3 hours of video content, the main applications and uses of ChatGPT in teaching tasks: class ideas, educational texts, activities and assessment tools, learning units, administrative tasks, and many other applications.
✅ This course is available on Udemy (€19.99) and G-Talent (€20.95), both of which often have coupons, promotions, and discounts!
2. Generating the Diagram on markmap.js.org
The second step in creating the diagram involves taking the copied code to markmap.js.org/repl (or visiting markmap.js.org and clicking “Try it out”).
Upon entering the site, you will see two parallel windows with a generic example: the left window contains markdown text, while the right window displays the generated diagram from that code.
To proceed, delete the existing code in the left window (make sure to erase everything) and paste the code generated by ChatGPT. Once you paste it, the diagram will appear in the right window.
The generated diagram cannot be downloaded directly in a standard image format (jpg, png, etc.). Instead, it can only be downloaded as HTML or SVG. In both cases, you can download it, open it in a browser, and take a screenshot if needed.
Variations
A. Providing Material to ChatGPT for Code Creation
As mentioned earlier, ChatGPT tends to produce fewer errors (or “hallucinations”) if we provide the material it should work with. This allows us to utilize the content we are currently using with our students rather than receiving results based on the AI’s global training data.
In this way, we can include the relevant material in the prompt from which we want ChatGPT to generate the code.
Prompt Example with Wikipedia Text
Prompt: Act as a secondary education teacher in Spain and an expert in generating mind maps in markmap.js format. Using exclusively this material:
TEXTO DEL ARTÍCULO DE LA WIKIPEDIA
Generate the markdown code containing an outline of the content, with the main characteristics and composition of each atmospheric layer.
ChatGPT’s Response
markdownCopiar código# Layers of the Earth's Atmosphere and Temperature
- **Introduction**
- The temperature of the Earth's atmosphere varies with altitude.
- The relationship between altitude and temperature differs depending on the atmospheric layer considered.
- **Atmospheric Temperature Gradient**
- Definition: Variation of temperature with altitude in the atmosphere.
- Each atmospheric layer presents a different temperature gradient.
- **Troposphere**
- **Characteristics**:
- Thickness: From the Earth's surface to approximately 6-20 km altitude.
- Temperature: Decreases with height (Vertical Temperature Gradient of -6.5 °C per km).
- Meteorological phenomena occur here.
- **Tropopause**: Boundary with the stratosphere.
- **Stratosphere**
- **Characteristics**:
- Extent: From 9-18 km to 50 km altitude.
- Temperature: Increases with altitude due to ozone formation.
- Ozonosphere: High concentration of ozone.
- **Stratopause**: Boundary with the mesosphere.
- **Mesosphere**
- **Characteristics**:
- Altitude: From 50 to 80 km.
- Temperature: Very cold (-80 °C).
- Importance due to ionization and chemical reactions.
- **Thermosphere or Ionosphere**
- **Characteristics**:
- Altitude: From 69/90 to 600/800 km.
- Temperature: Increases with altitude.
- Kármán line: Boundary between atmosphere and outer space.
- **Exosphere**
- **Characteristics**:
- Altitude: From 600/800 to 2000/10,000 km.
- Composition: Primarily hydrogen and helium.
- Temperature: Daytime up to 1500 °C, nighttime 0 °C.
- Boundary between the Earth’s atmosphere and interplanetary space.
B. Generating the Outline of Sections and Subsections Before Code
Some individuals might consider that if ChatGPT generates the code directly and we do not understand it, we might lose control over the final content we intend to bring to the markmap web application.
In such cases, it can be beneficial to use an intermediate step where we ask ChatGPT to generate an outline with sections and subsections that we can comprehend and modify at our discretion. Once satisfied, we can instruct ChatGPT to generate the markdown code from the selected outline.
Prompt Example for Outline Generation
Prompt: Act as a secondary education teacher in Spain. Write the outline in sections and subsections for the topic “Composition and Structure of the Atmosphere,” adding specific data about gas percentages and layer heights.
ChatGPT’s Response
Outline: Composition and Structure of the Atmosphere
- Introduction
- Importance of the atmosphere in maintaining life on Earth.
- General description of components and layers.
- Composition of the Atmosphere
- Nitrogen (N2)
- Constitutes approximately 78% of the atmosphere.
- Acts as an inert gas and is essential for life.
- Oxygen (O2)
- Represents around 21% of the atmosphere.
- Vital for the respiration of aerobic organisms.
- Other Gases
- Carbon Dioxide (CO2): About 0.04%.
- Argon: Approximately 0.93%.
- Water Vapor: Variable, generally between 0.1% and 4%.
- Nitrogen (N2)
- Structure of the Atmosphere
- Troposphere
- Extends from the surface up to approximately 8-15 km altitude.
- Temperature decreases with height, averaging -6.5 °C for every 1000 meters.
- Stratosphere
- Ranges from 15 km to about 50 km.
- Contains the ozone layer, which absorbs UV radiation.
- Temperature increases due to ozone absorption of solar radiation.
- Mesosphere
- Spans from 50 km to about 85 km.
- Temperature decreases with height, becoming the coldest layer.
- Thermosphere
- Extends from 85 km to about 600 km.
- Temperature increases significantly, can reach 2000 °C or more.
- Exosphere
- Ranges from 600 km to the edge of space.
- Extremely low density and mainly composed of hydrogen and helium.
- Troposphere
Once we have this outline, we can then prompt ChatGPT to generate the markdown code from it.
Prompt Example for Markdown Code Generation
Prompt: Generate the markdown code for the following outline:
(Insert outline text)
Final Thoughts
Using these two simple tools, we can create visual diagrams that make learning more engaging and fun, enabling students to visualize concepts. In an age where information can be overwhelming, mind maps can simplify and clarify ideas, offering a different perspective on knowledge.
Feel free to explore this method and adapt it for your educational needs. Happy teaching!