MindMap Pro

MindMap Pro is a VS Code extension that enables you to create and edit mind maps directly within your editor. It functions as a Custom Text Editor for .mindmap files, offering a seamless visual editing experience.

Features

• Visual Mind Map Editor: Create and edit mind maps visually.
• Integrated with VS Code: Works as a Custom Text Editor.
• File-Based: Each mind map is a standalone .mindmap file (JSON format) that you can version control.
• Drag & Drop: Easily rearrange nodes.
• Keyboard Shortcuts: efficient navigation and editing.
• VS Code Theming: (Partial) Inherits some UI elements, but primarily uses a custom clean interface.

Prerequisites

• VS Code: Version 1.80.0 or higher.
• Node.js: Version 16 or higher (for development).
• ovsx: For publishing to Open VSX Registry.

  npm install -g ovsx
  

Installation

From Open VSX Registry

1. Open VS Code.
2. Go to the Extensions view (Ctrl+Shift+X).
3. Search for "MindMap Pro".
4. Click Install.

Manual Installation (Development)

1. Clone the repository:

   git clone <repository_url>
   cd <repository_name>
   

2. Install dependencies:

   npm install
   

3. Build the project:

   npm run build
   

4. Open the folder in VS Code:

   code .
   

5. Press F5 to start the Extension Host window with the extension loaded.

Usage

1. Create a new file: Create a new file with the .mindmap extension (e.g., ideas.mindmap).
2. Open the file: Click on the file in the VS Code Explorer.
3. Start Mapping:
   • Add Child Node: Select a node and press Tab.
   • Add Sibling Node: Select a node and press Enter.
   • Edit Text: Double-click a node or press Space/F2.
   • Move Node: Drag and drop nodes.
   • Navigation: Pan by dragging the background. Zoom with Ctrl + Wheel.
4. Save: Use standard VS Code save shortcuts (Ctrl+S). The file is saved as JSON.

Development

The project consists of two main parts:

1. Extension Host (src/): TypeScript code that interacts with the VS Code API.
2. Webview UI (webview-ui/): A React application that runs inside the editor webview.

Build Scripts

• npm run compile: Compiles the Extension Host TypeScript code.
• npm run compile-web: Builds the React Webview UI.
• npm run build: Runs both of the above.
• npm run watch: Watches for changes in the Extension Host code.

Debugging

1. Open the project in VS Code.
2. Press F5 to launch the Extension Development Host.
3. In the new window, open or create a .mindmap file.
4. Debugging the Webview:
   • Run "Developer: Open Webview Developer Tools" from the Command Palette (Ctrl+Shift+P) in the Extension Development Host window.
   • This opens a Chrome DevTools instance connected to the webview.

Publishing to Open VSX

We use ovsx to publish to the Open VSX Registry.

1. Create an Eclipse Account: Register at eclipse.org.
2. Sign Publisher Agreement: Log in to open-vsx.org and sign the agreement.
3. Create Access Token: Go to Settings -> Access Tokens and generate a new token.
4. Create Namespace:

   npx ovsx create-namespace mindmappro -p <your_token>
   

   (Replace mindmappro with your publisher name if different)
5. Package and Publish:

   npx ovsx publish -p <your_token>
   

Note: Ensure your package.json version is updated before publishing.