Markmap Examples

Code Block Form

Basic Usage

Use markmap code blocks to insert Markdown file content:

Custom Configuration Examples

Basic Configuration

Advanced Configuration

Dark Mode Adaptation

Component Form

Basic Usage

Use component form to specify Markdown file path and read Markdown file content:

showToolbar is an optional parameter. By default, the toolbar is not shown. Add the showToolbar parameter to display the toolbar.

<!-- Specify path to read specified file (supports relative and absolute paths) -->
<PreviewMarkmapPath path="./Vue.md" />

<!-- No path specified, reads current file -->
<PreviewMarkmapPath showToolbar />

Component Usage with Configuration

You can also add configuration in the referenced Markdown file:

## <!-- Add configuration in the referenced file -->

showToolbar: true
markmap:
color: ["#e74c3c", "#3498db", "#2ecc71", "#f1c40f", "#9b59b6"]
initialExpandLevel: 2
maxWidth: 450
duration: 350

---

# Component Test

## Frontend Frameworks

### React

#### Hooks

#### Context

### Vue

#### Composition API

#### Options API

## Build Tools

### Webpack

### Vite

### Rollup

## Databases

### SQL

#### PostgreSQL

#### MySQL

### NoSQL

#### MongoDB

#### Redis

Configuration Options Details

Basic Options

Option	Type	Default	Description
showToolbar	boolean	true	Whether to show the toolbar
color	string[]	d3.schemeCategory10	Array of node colors
initialExpandLevel	number	-1	Initial expansion level, -1 means expand all levels
maxWidth	number	0	Maximum width of nodes, 0 means no limit
duration	number	500	Animation duration (milliseconds)

Layout Options

Option	Type	Default	Description
spacingHorizontal	number	80	Horizontal spacing
spacingVertical	number	5	Vertical spacing
paddingX	number	2	X-axis padding

Interaction Options

Option	Type	Default	Description
zoom	boolean	true	Whether to allow zooming
pan	boolean	true	Whether to allow panning
autoFit	boolean	false	Whether to automatically fit the container
fitRatio	number	1	Fit ratio

Advanced Options

Option	Type	Default	Description
colorFreezeLevel	number	0	Color freeze level
toggleRecursively	boolean	false	Whether to toggle recursively
scrollForPan	boolean	false	Whether to scroll for panning
maxInitialScale	number	1	Maximum initial scale
lineWidth	number	1	Width of lines between nodes

Usage Tips

1. Color Configuration: Color arrays will cycle if the number of nodes exceeds the number of colors
2. Expansion Levels: initialExpandLevel: -1 means expand all levels, 0 means only expand the root node
3. Performance Optimization: Too many nodes or complex configurations may affect rendering performance
4. Responsive Design: Mind maps automatically adapt to container size
5. Theme Adaptation: Supports VitePress light/dark theme switching

For more configuration options, please refer to the Markmap Official Documentation.