Mindmap Plugin for VS Code

A VS Code extension that converts Markdown files to mindmaps and allows switching between them.

Features

• Convert Markdown to Mindmap: Automatically render Markdown files as mindmaps if they contain the mindmap-plugin: markdown YAML property.
• Switch Between Views: Easily toggle between Markdown and mindmap views.
• Create Mindmaps: Right-click in the explorer to create new mindmap files (which are actually Markdown files with the required YAML property).
• Custom Editor: Uses a custom editor for rendering mindmaps.

Installation

1. Download the extension package from the VS Code Marketplace or build it locally.
2. Install the extension in VS Code.

Usage

Creating a New Mindmap

1. Right-click in the VS Code explorer.
2. Select "New Mindmap" from the context menu.
3. Enter a name for your mindmap (it will be saved as a .md file).
4. The new mindmap will open in the mindmap editor.

Opening Existing Files as Mindmaps

1. Automatic: Files containing the mindmap-plugin: markdown YAML property will automatically open as mindmaps.
2. Manual: Right-click any Markdown file in the explorer and select "Open as Mindmap".

Switching Between Views

• In the mindmap editor toolbar, click "Switch to Markdown" to open the file in the standard Markdown editor.
• In the Markdown editor, right-click and select "Open as Mindmap" to switch back to the mindmap view.

Markdown Format

Mindmap files are standard Markdown files with a YAML front matter containing the mindmap-plugin: markdown property:

---
mindmap-plugin: markdown
---

# Main Topic

## Subtopic 1

### Sub-subtopic 1.1

### Sub-subtopic 1.2

## Subtopic 2

Implementing Your Mindmap Rendering Logic

The extension provides the basic framework, but you need to implement your own mindmap rendering logic. Here's where to add it:

1. In src/webview/webview.ts, find the renderMindmap function.
2. Replace the placeholder code with your own mindmap rendering implementation.
3. You can use any JavaScript/TypeScript mindmap library or build your own.

Building the Extension

# Install dependencies
npm install

# Build the extension (compresses and obfuscates code)
npm run package

# Development build (watch mode)
npm run dev

Project Structure

mindmap-plugin/
├── src/
│   ├── extension/          # Main extension code (Node.js)
│   │   └── extension.ts    # Extension activation and commands
│   └── webview/            # Webview code (browser)
│       ├── webview.html    # Webview UI
│       └── webview.ts      # Webview logic
├── media/                  # Static assets
├── out/                    # Compiled output
├── package.json            # Extension configuration
├── tsconfig.json           # TypeScript configuration
└── webpack.config.js       # Webpack configuration

Extension Settings

Currently, there are no configurable settings for this extension.

Known Issues

• [List any known issues here]

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.