【导语】:将 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 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();
渲染
创立一个具备确定高度和宽度的 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 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);
开源前哨
日常分享热门、乏味和实用的开源我的项目。参加保护 10 万 + Star 的开源技术资源库,包含:Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。