# remark-markmap

> A remark plugin insert mindmap in markdown.

Latest version **1.1.5** (published 2025-03-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install remark-markmap
pnpm add remark-markmap
yarn add remark-markmap
bun add remark-markmap
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2025-03-30 |
| First published | 2024-12-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 10.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 汐涌及岸 |
| Maintainers | coderxi |
| Keywords | markdown, remark, markmap, mindmap |

## Links

- npm: https://www.npmjs.com/package/remark-markmap
- Repository: https://github.com/coderxi1/remark-markmap
- Homepage: https://github.com/coderxi1/remark-markmap#readme
- Issues: https://github.com/coderxi1/remark-markmap/issues
- npm.io page: https://npm.io/package/remark-markmap

## Dependencies (4)

- [gray-matter](https://npm.io/package/gray-matter.md) ^4.0.3
- [markmap-lib](https://npm.io/package/markmap-lib.md) ^0.18.11
- [markmap-common](https://npm.io/package/markmap-common.md) ^0.18.9
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^5.0.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 1.1.5 (latest) — 2025-03-30
- 1.1.4 — 2025-03-30
- 1.1.3 — 2025-03-30
- 1.1.2 — 2025-03-30
- 1.1.1 — 2025-03-30
- 1.1.0 — 2025-03-30
- 1.0.8 — 2025-02-10
- 1.0.7 — 2025-02-09
- 1.0.6 — 2024-12-29
- 1.0.5 — 2024-12-29
- 1.0.4 — 2024-12-29
- 1.0.3 — 2024-12-29
- 1.0.2 — 2024-12-29
- 1.0.1 — 2024-12-29

## README

[**简体中文**](https://github.com/coderxi1/remark-markmap/blob/master/README.zh.md)

# remark-markmap

[![Version](https://img.shields.io/npm/v/remark-markmap)](https://npm.im/remark-markmap)
[![Version](https://img.shields.io/npm/d18m/remark-markmap)](https://npm.im/remark-markmap)
[![GithubStars](https://img.shields.io/github/stars/coderxi1/remark-markmap?style=flat&logo=github&color=yellow)](https://github.com/coderxi1/remark-markmap)

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

> More preview in [my blog](https://coderxi.com/posts/remark-markmap-doc).

>Depend on [markmap](https://github.com/markmap/markmap). Inspired by [hexo-markmap](https://github.com/maxchang3/hexo-markmap).

## Installation

```sh
pnpm install remark-markmap
```
```sh
npm install remark-markmap
```
```sh
yarn add remark-markmap
```

## Options

### Plugin Options

```js
{
  darkThemeSelector: () => document.documentElement.matches('.dark') || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
}
```
- **`darkThemeSelector`**: A function used to determine whether the current page is in dark mode. It can return either a `string` or a `boolean`. When it returns a `string`, for example `darkThemeSelector: () => '[data-theme="dark"]'`, it means it is equivalent to `document.documentElement.matches('[data-theme="dark"]')`.

### Frontmatter Options

The frontmatter integrates style and jsonOptions(markmap).
```yaml
id: markmap-example
markmap:
  colorFreezeLevel: 2
```

- **`id`** : Set the id to control single markmap-wrap (such as set style)

- **`markmap`/`options`** : Correspond to the [`IMarkmapJSONOptions`](https://markmap.js.org/api/interfaces/markmap-view.IMarkmapJSONOptions.html) in the markmap project. For more details, please refer to [`jsonOptions`](https://markmap.js.org/docs/json-options#option-list).

## Usage

Say our document contains: `example.md`

`````markdown
Some text...

````markmap
---
id: markmap-example
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`:

```javascript
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](https://github.com/coderxi1/remark-markmap/tree/example)

Or clone example branch

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

[**Preview Page**](https://remark.markmap.org)

---
_Source: https://npm.io/package/remark-markmap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._