Markmap

Markmap 生成的思维导图示例

1. 使用 Markmap 生成思维导图

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

1.1. 步骤一：安装 Markmap

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

npm install markmap-lib

或

yarn add markmap-lib

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

1.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);
});

1.4. 步骤四：运行项目

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

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

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

npx http-server

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

1.5. 详细解释

1.5.1. 安装 Markmap

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

1.5.2. 创建 HTML 文件

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

1.5.3. 创建 JavaScript 文件

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

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

1.5.4. 运行项目

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

1.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.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('width', '800');
    svg.setAttribute('height', '600');
    document.body.appendChild(svg);

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

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