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
Common types and utility functions used by markmap packages.
-
Transform Markdown to data used by markmap.
-
Render markmap in browser.
-
Load markmaps automatically in HTML.
-
Extensible toolbar for markmap.
-
Use markmap in command-line.
Related
Markmap is also available in:
- VSCode and Open VSX
- Vim / Neovim: coc-markmap
- powered by coc.nvim
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/d3@6"></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);