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.
-
Transform Markdown to data used by markmap.
-
Render markmap in browser.
-
Use markmap in command-line.
Markmap is also available in:
- VSCode and Open VSX
- Vim / Neovim: coc-markmap NPM - powered by coc.nvim
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.
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);