remark-markmap

A remark plugin to insert mindmap in markdown. Simply insert a code block in markdown to render the mindmap.

More preview in this blog.

Depend on markmap. Inspired by hexo-markmap.

Installation

pnpm install remark-markmap

npm install remark-markmap

yarn add remark-markmap

Options

Plugin Options

{
  darkThemeCssSelector: '.dark'
}

darkThemeCssSelector : Used to specify the CSS selector for the dark theme.

Frontmatter Options

The frontmatter integrates style and jsonOptions.

id: markmap-example
style: |
  #${id} {
    height: 300px;
    width: 100%;
  }
  @media (min-width: 1280px) {
    #${id} {
      height: 600px;
    }
  }
options:
  colorFreezeLevel: 2

style : Used to define custom CSS styles for the mindmap.
The ${id} placeholder can be used in the style field. During rendering, it will be replaced with the actual ID of the markmap-wrap, ensuring each mindmap element on the page has unique styles and behaviors.
options : Correspond to the IMarkmapJSONOptions in the markmap project. For more details, please refer to jsonOptions.

Usage

Say our document contains: example.md

some text...

````markmap
---
id: markmap-example
style: |
  #${id} { height: 300px; width: 100%; }
options:
  colorFreezeLevel: 2
---
- links
- **inline** ~~text~~ *styles*
- multiline
  text
- `inline code`
- ```js
  console.log('code block');
  console.log('code block');
  ```
- KaTeX - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
````

some text...

Use the remark-markmap plugin in example.js:

import { read } from 'to-vfile'
import { remark } from 'remark'
import remarkMarkmap from 'remark-markmap'

const file = await remark()
  .use(remarkMarkmap)
  .process(await read('example.md'))

console.log(String(file));

Then you can get the renderd html.

Example

See example branch

Or clone example branch

git clone -b example https://github.com/coderxi1/remark-markmap remark-markmap-example

Preview Page