markmap

What is markmap?

Markmap is a combination of Markdown and mindmap. It is compatible Markdown syntax and extracts its intrinsic hierarchical structure and renders an interactive mindmap, also known as markmap.

The structure syntax is as follows:

Type	Syntax	Example
Level 1 Heading	# ...	# I'm title 1
Level 2 Heading	## ...	## I'm title 2
Level 3 Heading	### ...	### I'm title 3
Level 4 Heading	#### ...	#### I'm title 4
Level 5 Heading	##### ...	##### I'm title 5
Level 6 Heading	###### ...	###### I'm title 6
List items	- ...	# I'm list - I'm item 1 - I'm item 2

The easiest way to use it is to load your Markdown content into the 👉 try it out page.

You can also try it in:

• command-line: see markmap-cli
• Vim / Neovim: see coc-markmap

Programmatic Usage

Basically we use markmap-lib to preprocess Markdown into structured data, then render the data into interactive SVG with markmap-view.

See the relevant packages for more details.

Demos

• markmap with React: https://stackblitz.com/edit/markmap-react?file=src%2Fmarkmap-hooks.tsx
• markmap with Vue: https://stackblitz.com/edit/markmap-vue?file=src/app.vue
• markmap auto-loader: https://stackblitz.com/edit/markmap-autoloader?file=index.html

Support

See faq for answers to your questions. If you still need help, feel free to ask in GitHub Discussions.

Credits

• This project is heavily inspired by dundalek's markmap.