Awesome Open Source
Awesome Open Source

markmap

Join the chat at https://gitter.im/gera2ld/markmap

Visualize your Markdown as mindmaps.

This project is heavily inspired by dundalek's markmap.

👉 Try it out.

👉 Read the documentation for more detail.

Packages

Related

Markmap is also available in:

Usage

Transform

Transform Markdown to markmap data:

import { Transformer } from 'markmap-lib';

const transformer = new Transformer();

// 1. transform markdown
const { root, features } = transformer.transform(markdown);

// 2. get assets
// either get assets required by used features
const { styles, scripts } = transformer.getUsedAssets(features);
// or get all possible assets that could be used later
const { styles, scripts } = transformer.getAssets();

Now we are ready for rendering a markmap in browser.

Render

Create an SVG element with explicit width and height:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/markmap-view"></script>

<svg id="markmap" style="width: 800px; height: 800px"></svg>

Render a markmap to the SVG element:

// We got { root } data from transforming, and possible extraneous assets { styles, scripts }.

const { Markmap, loadCSS, loadJS } = window.markmap;

// 1. load assets
if (styles) loadCSS(styles);
if (scripts) loadJS(scripts, { getMarkmap: () => window.markmap });

// 2. create markmap

Markmap.create('#markmap', null, root);

// or pass an SVG element directly
const svgEl = document.querySelector('#markmap');
Markmap.create(svgEl, null, data);
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (268,309
Mindmap (407
Markmap (11