开源工具将 Markdown 转为脑图,还支持 VSCode 和 Vim

【导语】:将 Markdown 文档转为直观可视化的思维导图。
简介
Markmap 是 markdown 和 mindmap 的组合。它解析 markdown 内容并提取其内在层次结构,呈现出交互式的思维导图 mindmap,这就是 markmap。
开源工具将 Markdown 转为脑图,还支持 VSCode 和 Vim
文章图片

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

【开源工具将 Markdown 转为脑图,还支持 VSCode 和 Vim】除了在浏览器上使用,Markmap 还在以下编辑器中提供了插件使用:
  • VSCode
https://marketplace.visualstu...
开源工具将 Markdown 转为脑图,还支持 VSCode 和 Vim
文章图片

  • 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 元素:

将 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 markmapMarkmap.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 等。

    推荐阅读