Markmap

image

使用Markmap生成思维导图

我们将从安装开始，一步步完成整个过程。

1- 步骤一：安装Markmap

首先，你需要在项目中安装Markmap库。可以使用npm或yarn进行安装：

npm install markmap-lib

或

yarn add markmap-lib

2- 步骤二：创建HTML文件

创建一个新的HTML文件，例如index.html，并在文件中添加基本的HTML结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Markmap 示例</title>
</head>
<body>
  <svg width="800" height="600"></svg>
  <script type="module" src="main.js"></script>
</body>
</html>

3- 步骤三：创建JavaScript文件

创建一个新的JavaScript文件，例如main.js，并在文件中引入Markmap库：

import { Transformer } from 'markmap-lib';
import { Markmap } from 'markmap-view';

document.addEventListener('DOMContentLoaded', () => {
  const markdown = '# 你的Markdown内容\n\n## 子标题\n\n一些文本内容';
  const transformer = new Transformer();
  const { root, features } = transformer.transform(markdown);

  const svg = document.querySelector('svg');
  Markmap.create(svg, null, root);
});

4- 步骤四：运行项目

确保你的项目目录结构如下：

your-project/
├── index.html
├── main.js
├── node_modules/
└── package.json

然后，在项目根目录下启动一个本地服务器。例如，你可以使用http-server：

npx http-server

打开浏览器，访问http://localhost:8080（端口号可能会有所不同），你应该能看到生成的思维导图。

5- 详细解释

5.1- 1. 安装Markmap

通过npm或yarn安装Markmap库，这是一个必要的步骤，因为我们需要使用它提供的API来转换和渲染Markdown内容。

5.2- 2. 创建HTML文件

在HTML文件中，我们定义了一个SVG元素用于渲染思维导图，并引入了一个JavaScript文件main.js。

5.3- 3. 创建JavaScript文件

在JavaScript文件中，我们首先引入了Markmap的两个主要模块：Transformer和Markmap。然后，我们监听DOMContentLoaded事件，确保在DOM完全加载后执行代码。

  • 转换Markdown：使用Transformer类将Markdown文本转换为思维导图的数据结构。
  • 渲染思维导图：使用Markmap.create方法将转换后的数据结构渲染为SVG格式的思维导图。

5.4- 4. 运行项目

通过启动一个本地服务器，我们可以在浏览器中查看生成的思维导图。

6- 适用于大型文档的优化

如果你需要处理大型文档，可以考虑以下优化方法：

  • 分段处理：将大型文档分成多个小段，分别生成思维导图，然后合并展示。
  • 懒加载：只在用户滚动到特定部分时才加载对应的思维导图。

以下是一个处理大型文档的示例代码：

import { Transformer } from 'markmap-lib';
import { Markmap } from 'markmap-view';

document.addEventListener('DOMContentLoaded', () => {
  const markdownSections = [
    '# 第一部分\n\n## 子标题1\n\n一些文本内容',
    '# 第二部分\n\n## 子标题2\n\n更多文本内容',
    // 更多部分...
  ];

  markdownSections.forEach((markdown, index) => {
    const transformer = new Transformer();
    const { root } = transformer.transform(markdown);

    const svg = document.createElement('svg');
    svg.setAttribute('width', '800');
    svg.setAttribute('height', '600');
    document.body.appendChild(svg);

    Markmap.create(svg, null, root);
  });
});

通过以上步骤和优化建议，你可以成功使用Markmap生成思维导图，并有效处理大型文档的需求。