[Introduction]: Convert Markdown documents into intuitive and visual mind maps.
Introduction
Markmap is a combination of markdown and mindmap. It parses markdown content and extracts its inner hierarchy, presenting an interactive mind map mindmap, which is markmap.
Markmap contains 3 packages:
- markmap-lib, for parsing markdown structure and converting to data usable by markmap
$ yarn add markmap-lib- markmap-view, for rendering markmaps on the browser
$ yarn add markmap-view- markmap-cli, the command line tool for markmap
$ yarn global add markmap-cliIn addition to use on browsers, Markmap also provides plug-in use in the following editors:
- VSCode
https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode
- Vim/Neovim, powered by coc.nvim
https://github.com/gera2ld/coc-markmap
The project address is:
https://github.com/gera2ld/markmap
usage
data analysis
The following example parses the markdown structure into markmap data in preparation for the next browser rendering:
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();render
Create an svg element with a certain height and width:
<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 the markmap data into an 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);
开源前哨Daily sharing of popular, interesting and useful open source projects. Participate in the maintenance of 100,000+ Star open source technology resource libraries, including: Python, Java, C/C++, Go, JS, CSS, Node.js, PHP, .NET, etc.