Generating Your First Mind Map

To get started with Mind Map Wizard and leverage its AI capabilities, follow these straightforward steps. This guide will walk you through the process from entering your topic to viewing your interactive mind map, explaining what happens behind the scenes.

Step 1: Enter Your Topic

The first step is to tell the AI what you want a mind map about.

1. Locate the Input Field: On the Mind Map Wizard homepage, you'll find a prominent input field, often labeled with a suggestion like "Generate a Mind Map with AI" or "What do you want to discover?". This corresponds to the HTML element with the ID prompt.
2. Type Your Subject: Enter any topic, concept, or question you wish to visualize as a mind map. For example, "The history of artificial intelligence" or "Benefits of meditation".
3. Initiate Generation:
   • Click the "Generate Mind Map" button (HTML element generate-mindmap-btn).
   • Alternatively, press Enter on your keyboard while the input field is focused.

The user interaction for this step is handled by event listeners attached to the generate-mindmap-btn and the prompt input field, as defined in the initializeMainButtons function within scripts/new.js.

Step 2: AI Processing

Once you've submitted your topic, Mind Map Wizard's artificial intelligence engine takes over.

1. API Key Validation:
   • Before sending your request to the AI, the system checks if you have an OpenRouter API key configured. This is done by calling getStoredApiKey() in scripts/new.js.
   • If no API key is found, a popup will automatically appear, prompting you to enter your key. This popup is managed by the showApiKeyPopup function in scripts/new.js. For detailed instructions on setting up and managing your API key, please refer to the [AI Model Configuration and API Keys] page.
   • If an API key is present, the process continues.
2. Request to AI Provider:
   • Your topic is sent as part of a POST request to the OpenRouter.ai API endpoint (https://openrouter.ai/api/v1/chat/completions).
   • The request includes a specific system prompt designed to guide the AI in generating a well-structured mind map in Markdown format. This prompt ensures the output is comprehensive, fact-rich, and adheres to hierarchical and content requirements. You can review the exact system prompt in the [AI Model Configuration and API Keys] page.
   • The AI model used for generation is determined by your selection in the model selector, retrieved via getSelectedModel() in scripts/new.js.
   • During this process, a loading animation (loading-animation in HTML) will be displayed to indicate that the AI is at work. The core logic for orchestrating this AI request is encapsulated within the generateMindmap function in scripts/new.js.
3. LLM Analysis:
   • The AI (Large Language Model) analyzes your input topic, processes the system prompt, and generates a structured outline. This outline focuses on key concepts and provides concrete details, avoiding generic phrases.
   • The AI's response is expected in a JSON format containing a markdown field.
4. Markdown Formatting:
   • Upon receiving the AI's response, the application processes the raw Markdown text to ensure it's clean and consistently formatted. The formatMarkdown function in scripts/mmw.js handles this, addressing any potential formatting inconsistencies, extracting the topic, and normalizing the Markdown to be readily usable by the mind map renderer.

Step 3: View Your Mind Map

Finally, the generated Markdown content is transformed into an interactive mind map on your screen.

1. SVG Rendering:
   • The cleaned Markdown is passed to the Markmap library, which renders it as an interactive Scalable Vector Graphic (SVG). This rendering is managed by the renderMindmap function in scripts/mmw.js.
   • The waitForMarkmap function ensures that the Markmap library is fully loaded before attempting to render the mind map, preventing rendering errors.
   • The renderMindmapInternal function then creates the Markmap instance, attaching it to the mindmap container element.
2. Interactive Display:
   • The loading animation disappears, and your new mind map is displayed.
   • You can now interact with it: zoom in and out, pan across the canvas, and collapse/expand branches to explore the topic.
   • A toolbar provides quick access to common actions like zooming.

Your newly generated mind map is also automatically saved to your local browser history for future reference. This local storage mechanism is managed by the saveMindmapToHistory function in scripts/new.js, and ensures your mind maps remain private and fast to access. You can learn more about this in the [Local Data Storage and Privacy] page. The URL in your browser will also be updated to include a unique ID for the mind map, allowing you to easily share or bookmark it, handled by the updateUrlWithId function in scripts/new.js.