Markdown 的好处是专注码字的同时还能兼顾排版,不用像 word 那样文本加个粗都需要移动下鼠标,体验非常好。

它的缺点就是可视化能力很弱,这就降低了信息的传播效率,毕竟人对于图像化内容的接收程度要强于文本。

可视化表达方面,思维导图就很不错。它作为一种图象化工具,通过层级式发散式地组织主题,帮助我们更好的记忆、学习和思考。

但在过去,这两类工具是各自独立的,也就是你写完 Markdown 文本,想要可视化地传达一些重点给读者,就需要重新录入下思维导图,因此比较繁琐,这也是我不怎么用思维导图的原因。

不过最近我发现一款很好用的工具,可以很好的解决上边的问题,在此分享给大家。

今天跟大家分享一个有意思的工具 – MarkmapMarkmap 是一个可以将 markdown 通过思维导图的方式进行可视化的开源工具,是 markdown 和 mindmap 的结合,它解析 markdown 内容并提取其层次结构并呈现交互式思维导图。

 

工具介绍

这款工具叫markmap

markmap 可以将 Markdown 语法的文本通过思维导图的方式进行可视化。以下是官网截图,markmap 这个名字来自 markdown 的前半部分 和 mindmap 的后半部分,slogan 是 Visualize your Markdown with mindmaps 。

 

 

工具使用

在线版

如果你不想安装任何东西,那可以直接浏览器(建议 chrome 浏览器)上访问 https://markmap.js.org/repl 即可仿照官网模板进行转换,如下图。左边录入 Markdown 文本,右边会实时展示出思维导图。

Markdown 语法中的链接,加粗,删除线,斜体,单行代码,代码块,数学公式,转换成思维导图都有相应的视图效果。而且支持下载生成动态化的 html 文件以及 svg 文件。

动态化效果如下图,可以折叠和打开。

 

离线版

如果你想拥有更好的使用体验,并且希望在断网的情况下也能够使用,那我推荐你下面这种方案。

vscode 使用插件

在 Visual Studio Code 上安装 markmap 插件,如下图。

编辑 Markdown 文本,文件名以 .mm.md 结尾即可使用,并且可以点击右下角「export」按钮导出动态的 html 文件。

vscode 使用界面

语法格式

# markmap

## Links

- <https://markmap.js.org/>
- [GitHub](https://github.com/gera2ld/markmap)

## Related

- [coc-markmap](https://github.com/gera2ld/coc-markmap)
- [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap)

## Features

- links
- **inline** ~~text~~ *styles*
- multiline
  text
- `inline code`
-
    ```js
    console.log('code block');
    ```
- Katex - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$

就是 Markdown 语法换了种表现形式,# 表示一级标题,##表示二级标题。### 表示三级标题

导出思维图

在网页中导出 .html 格式和 .svg 格式

在 VS Code 内导出 .html 格式


试用

我们可以直接通过 markmap 的在线网站直接使用该工具,试用地址:https://markmap.js.org/repl/。可以根据官网的语法来进行学习:

# Markmap

## 链接
https://markmap.js.org/>
[GitHub](https://github.com/gera2ld/markmap)

## 相关
[coc-markmap](https://github.com/gera2ld/coc-markmap)
[gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap)

## 特性
links
**inline** ~~text~~ *styles*
multiline
  text
`inline code`
-
    ```js
    console.log('code block');
    ```
Katex - $x = {-b pm sqrt{b^2-4ac} over 2a}$

感觉就是 Markdown 语法换了种表现形式,#表示一级标题,##表示二级标题,###表示三级标题。编写完成后可以将可视化的思维导图导出成交互式的 HTML 或者 svg 图片。

VSCode 插件

更让人喜欢的是该工具还提供了 VSCode 插件,在 VSCode 中搜索 markmap 即可安装该插件,可以直接在 VSCode 中预览 markmap:

markmap 要求思维导图的后缀名为 .mm.md,然后用 VSCode 打开就能编辑啦:

命令行工具

此外我们还可以使用 markmap 命令行工具,比如在本地终端中使用 markmap 命令行,使用如下所示的命令即可:

$ npx markmap-cli markmap.md

当然也可以全局安装它:

$ yarn global add markmap-cli
$ markmap markmap.md

还可以使用 -w 参数来 watch 文件,以便可以编辑 markdown 文件并即时获取更新:

$ markmap -w markmap.md

前端代码

如果你想在前端代码中自行控制使用 markmap,可以先安装 markmap-lib 这个库来转换 markdown 数据:

$ yarn add markmap-lib

使用如下代码可以将 markdown 转换成 markmap 数据对象:

import { Transformer } from 'markmap-lib';

const transformer = new Transformer();

// 1. 转换 makrdown
const { root, features } = transformer.transform(markdown);

// 2. 获取 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(features);

有了 markmap 的数据后我们可以使用 markmap-view 库来进行渲染:

$ yarn add markmap-view

首先创建一个确定宽高的 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 元素:
// load with 
const { markmap } = window;
// or with ESM
import * as markmap from 'markmap-view';

const { Markmap, loadCSS, loadJS } = markmap;

// 1. load assets
if (styles) loadCSS(styles);
if (scripts) loadJS(scripts, { getMarkmap() => markmap });

// 2. create markmap
// `options` is optional, i.e. `undefined` can be passed here
Markmap.create('#markmap', options, root);
The first argument of Markmap.create can also be an actual SVG element, for example:

const svgEl = document.querySelector('#markmap');
Markmap.create(svgEl, options, data);

本期内容就到这里啦~以上内容均可在 方包博客http://fang1688.cn 网站直接搜索名称访问哦。欢迎感兴趣的小伙伴试试,如果本文对您有帮助,也请帮忙点个 赞 + 在看 啦!❤️

欢迎大家加入方包的优派编程学习圈子,和多名小伙伴们一起交流学习,向方包 1 对 1 提问、跟着方包做项目、领取大量编程资源等。Q群891029429欢迎想一起学习进步的小伙伴~

另外方包最近开发了一款工具类的小程序方包工具箱」,功能包括:抖音、小红书、快手去水印,天气预报,小说在线免费阅读(内含上万部热门小说),历史今天,生成图片二维码,图片识别文字,ai伪原创文章,数字摇号抽奖,文字转语音MP3功能...

送福利!关注下方的公众号:优派编程回复资料,即可获得软件app下载资源和python、java等编程学习资料!

   
点击卡片关注「优派编程」
定期分享 it编程干货

 ⬇️ 点击链接阅读原文直达 方包博客

发表评论

您的电子邮箱地址不会被公开。

8 + 1 =