【导语】：将 Markdown 文档转为直观可视化的思维导图。

简介

Markmap 是 markdown 和 mindmap 的组合。它解析 markdown 内容并提取其内在层次结构，呈现出交互式的思维导图 mindmap，这就是 markmap。

Markmap 蕴含 3 个软件包：

  • markmap-lib，用于解析 markdown 构造并转换为 markmap 可用的数据
$ yarn add markmap-lib
  • markmap-view，用于在浏览器上渲染 markmap
$ yarn add markmap-view
  • markmap-cli，markmap 的命令行工具
$ yarn global add markmap-cli

除了在浏览器上应用，Markmap 还在以下编辑器中提供了插件应用：

  • VSCode

https://marketplace.visualstu...

  • Vim/Neovim，由 coc.nvim 提供反对

https://github.com/gera2ld/co...

我的项目地址是：

https://github.com/gera2ld/ma...

用法

数据解析

以下例子将 markdown 构造解析为 markmap 数据，为下一步的浏览器渲染做好筹备：

import { Transformer } from 'markmap-lib';const transformer = new Transformer();// 1. transform markdownconst { root, features } = transformer.transform(markdown);// 2. get assets// either get assets required by used featuresconst { styles, scripts } = transformer.getUsedAssets(features);// or get all possible assets that could be used laterconst { styles, scripts } = transformer.getAssets();

渲染

创立一个具备确定高度和宽度的 svg 元素：

<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>

将 markmap 数据渲染到 svg 元素中：

// We got { root } data from transforming, and possible extraneous assets { styles, scripts }.const { Markmap, loadCSS, loadJS } = window.markmap;// 1. load assetsif (styles) loadCSS(styles);if (scripts) loadJS(scripts, { getMarkmap: () => window.markmap });// 2. create markmapMarkmap.create('#markmap', null, root);// or pass an SVG element directlyconst svgEl = document.querySelector('#markmap');Markmap.create(svgEl, null, data);
开源前哨 日常分享热门、乏味和实用的开源我的项目。参加保护 10万+ Star 的开源技术资源库，包含：Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。