Skip to main content
View plugin on GitHub
See starters using this

gatsby-remark-markmap

Visualize code blocks in Markdown files using markmap.

Demo

Input:

Render Markdown as mindmap:

```markdown
<!-- render-as-markmap -->

# Food
## Fruits
- easy to eat
  - apple
  - banana
- not so easy
  - grapes
## Vegetables
- cabbage
- tomato
```

Output:

markmap

Installation

$ yarn add gatsby-remark-markmap

Usage

In your gatsby-config.js:

plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        // Note that `gatsby-remark-markmap` must be put before other plugins
        // that handle code blocks, e.g. `gatsby-remark-prismjs`
        {
          resolve: 'gatsby-remark-markmap',
          options: {
            // Pass options to markmap here
            markmap: {
              nodeFont: '12px sans-serif',
              nodeHeight: 16,
            },
          },
        },
        'gatsby-remark-prismjs',
      ],
    },
  },
]

Additional options can be passed to markmap by options.markmap.

Note: if nodeFont is changed, you will also need to update font of .gatsby-markmap in your CSS, because nodeFont is used to measure size of texts, but not to affect how they look in the page.

Add a comment at the beginning of your Markdown code block:

```markdown
<!-- render-as-markmap -->

put your Markdown here
```