Markmap Mindmaps
VMark supports Markmap for creating interactive mindmap trees directly in your Markdown documents. Unlike Mermaid's static mindmap diagram type, Markmap uses plain Markdown headings as input and provides interactive pan/zoom/collapse.
Inserting a Mindmap
Using Menu
Menu: Insert > Mindmap
Keyboard shortcut: Alt + Shift + Cmd + K (macOS) / Alt + Shift + Ctrl + K (Windows/Linux)
Using a Code Block
Type a fenced code block with the markmap language identifier:
```markmap
# Mindmap
## Branch A
### Topic 1
### Topic 2
## Branch B
### Topic 3
### Topic 4
```Using MCP Tool
Call insert_markmap from your AI coding assistant with the code parameter containing Markdown headings.
Editing Modes
Rich Text Mode (WYSIWYG)
In WYSIWYG mode, Markmap mindmaps are rendered as interactive SVG trees. You can:
- Pan by scrolling or clicking and dragging
- Zoom by holding
Cmd/Ctrland scrolling - Collapse/expand nodes by clicking the circle at each branch
- Fit the view using the fit button (top-right corner on hover)
- Double-click the mindmap to edit the source
Source Mode with Live Preview
In Source mode, a floating preview panel appears when your cursor is inside a markmap code block, updating as you type.
Input Format
Markmap uses standard Markdown as input. Headings define the tree hierarchy:
| Markdown | Role |
|---|---|
# Heading 1 | Root node |
## Heading 2 | First-level branch |
### Heading 3 | Second-level branch |
#### Heading 4+ | Deeper branches |
Rich Content in Nodes
Nodes can contain inline Markdown:
```markmap
# Project Plan
## Research
### Read **important** papers
### Review [existing tools](https://example.com)
## Implementation
### Write `core` module
### Add tests
- Unit tests
- Integration tests
## Documentation
### API reference
### User guide
```List items under a heading become child nodes of that heading.
Interactive Features
| Action | How |
|---|---|
| Pan | Scroll or click and drag |
| Zoom | Cmd/Ctrl + scroll |
| Collapse node | Click the circle at a branch point |
| Expand node | Click the circle again |
| Fit to view | Click the fit button (top-right on hover) |
Theme Integration
Markmap mindmaps automatically adapt to VMark's current theme (light or dark mode). Branch colors adjust for readability in both themes.
Export as PNG
Hover over a rendered mindmap in WYSIWYG mode to reveal an export button. Click it to choose a theme:
| Theme | Background |
|---|---|
| Light | White background |
| Dark | Dark background |
The mindmap is exported as a 2x resolution PNG via the system save dialog.
Tips
Markmap vs Mermaid Mindmap
VMark supports both Markmap and Mermaid's mindmap diagram type:
| Feature | Markmap | Mermaid Mindmap |
|---|---|---|
| Input format | Standard Markdown | Mermaid DSL |
| Interactivity | Pan, zoom, collapse | Static image |
| Rich content | Links, bold, code, lists | Text only |
| Best for | Large, interactive trees | Simple static diagrams |
Use Markmap when you want interactivity or already have Markdown content. Use Mermaid mindmap when you need it alongside other Mermaid diagrams.
Learning More
- Markmap Documentation — Official reference
- Markmap Playground — Interactive playground to test mindmaps