How to Streamline AI map (Not a Mind Map) Generation with AI

on
How to Streamline AI map (Not a Mind Map) Generation with AI

Recently, I tried this way to use ChatGPT with Gemini 2.5 Flash, and then I realized that I could simplfiy the prompt typing. So, in this blog post, I guide you through how I streamlined this process.

1. Set up a Gemini Gem

First, you need to set up a dedicated AI map generator.

  1. Go to https://gemini.google.com/gems/create.
  2. Type "AI Map Generator" in the Name section and type the custom instruction below in the Instructions section. 
    3. ### Purpose and Aim


- To create a mind map on a given topic.
- To extract key information and organize it into a structured mind map format.
- To provide markdown code compatible with [https://markmap.js.org](https://markmap.js.org) for easy visualization.



### Behaviors and Rules


1.  **Understand the Topic:** Carefully read and comprehend the user's provided topic for the mind map.
2.  **Information Extraction:** Extract essential information from the given prompt. Identify the central idea, main branches, and relevant sub-branches.

''
(topic)
''

3.  **Mind Map Structure:** Develop a hierarchical structure for the mind map, ensuring logical flow from the central idea to sub-branches.
4.  **Markdown Generation:** Write the markdown code for the mind map based on the extracted information and desired structure. Adhere strictly to the `markmap.js.org` markdown syntax.

''
Create a mind map of (topic). List topics as central ideas, main branches, and sub-branches.

Then write the markdown code of this same mind map.
''

5.  **Clarity and Conciseness:** Ensure the markdown output is clear, concise, and easy to understand.
6.  **Error Handling:** If the topic is unclear or too broad, politely ask the user for clarification or a more specific topic.

### Overall Tone:

* Be precise and systematic in your approach.
* Maintain a helpful and efficient demeanor.
* Focus on delivering a clear and well-organized mind map.
* Be analytical and detail-oriented.
  3. Click "Save".

2. Generate an AI map

  1. Type the sample idea below into the textbox to generate one. 
    What is AI Map Generator?
  2. Copy the generated code.
  3. Go to Markmap official editor.
  4. Replace the pre-typed code with the copied code.
  5. Click the button with four corners pointing inwards.
    Highlighted 'Fix window size' button to fit a mind map to the frame's window.
    Source: https://markmap.js.org/repl
  6. Click "Download as SVG" if you want the image version or "Download as interactive HTML" if you want to keep it interactive.
  7. This is the AI map on the sample topic.

Use cases

As a complex thing simplifier

If you have something that you need to explain right now but can't explain it simply, you can create an AI map with this query template. 

Explain (topic) in a simple way as a (elementary school / junior high school / high school) student can understand.

This is the example if a topic is "Machine Learning", and the target is high school student.
Please note that you can target anyone without any prior knowledge, even if your partner isn't a student, because this way, you can make AI's explaination more clearer and easier to them by expressing the level as "(elementary/junior high/high) school student".

As a table of contents

A table of contents is a necessary component of any document that provides the structured overview of its sections and subsections within the document. If you want to add a table of contents in your article or any other document, use this AI map with branches formatted as links to sections or subsections. This is the example of this article. 

[Task]: The table of contents of this HTML file branches out from the central idea "Table of Contents."
[Constraints]:
- Includes all the headings and subheadings formatted as links.
- Don't format headings that have no id, as a link.
- To format each heading and subheading as a link, use [this URL][https://aitimestools.blogspot.com/2025/06/how-to-generate-slide-deck-with.html] and attach `#(the heading or subheading's id)` at the end of the URL.
- Add this code at the beginning of the code.
  ```markdown
---
markmap:
  initialExpandLevel: 1
---
  ```

As a UX/Product Design visualizer

As a UX designer, you can create maps to visualize user journeys, information architecture, and feature dependencies. These structures help align teams quickly, reducing planning time and clarifying navigation paths for smoother product design.

That's it. With this Gem, by just typing your idea, you can generate an AI map in a few seconds.

Comments

Post a Comment