Skip to content

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:

markdown
```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/Ctrl and 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:

MarkdownRole
# Heading 1Root node
## Heading 2First-level branch
### Heading 3Second-level branch
#### Heading 4+Deeper branches

Rich Content in Nodes

Nodes can contain inline Markdown:

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

ActionHow
PanScroll or click and drag
ZoomCmd/Ctrl + scroll
Collapse nodeClick the circle at a branch point
Expand nodeClick the circle again
Fit to viewClick 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:

ThemeBackground
LightWhite background
DarkDark 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:

FeatureMarkmapMermaid Mindmap
Input formatStandard MarkdownMermaid DSL
InteractivityPan, zoom, collapseStatic image
Rich contentLinks, bold, code, listsText only
Best forLarge, interactive treesSimple 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