【亲测免费】 Markmap 使用与搭建教程

2026-01-17 09:04:12作者：明树来

1. 项目目录结构及介绍

Markmap 的目录结构如下：

.
├── editorconfig            # 编辑器配置文件
├── eslintignore            # ESLint 忽略文件列表
├── eslintrc.js             # ESLint 配置文件
├── gitignore               # Git 忽略文件列表
├── npmrc                   # NPM 配置文件
├── LICENSE                 # 开源许可证文件
├── README.md               # 项目简介
├── babel.config.js         # Babel 配置文件
├── lerna.json              # Lerna 多包管理配置
├── package.json            # 项目主包依赖
├── pnpm-lock.yaml          # PNPM 锁定文件
├── pnpm-workspace.yaml     # 工作区配置
├── postcss.config.cjs      # PostCSS 配置文件
├── tsconfig.json           # TypeScript 配置文件
├── typedoc.base.json       # TypeDoc 基础配置文件
├── typedoc.json            # TypeDoc 主要配置文件
└── uno-config.ts           # UnoCSS 配置文件
└── util.mjs                # 公共工具函数

这些文件主要涉及项目构建、代码质量控制、依赖管理和自定义配置。

2. 项目的启动文件介绍

在 Markmap 项目中，没有一个明确的“启动文件”来运行应用程序，因为这是一个库项目，而不是一个可以直接执行的应用。通常，开发者会导入 markmap-js 包中的功能来在他们的项目中使用 Markmap。例如，你可以通过以下方式在 Node.js 环境中使用它：

const { createMarkmap } = require('markmap-js');
// 使用 createMarkmap 函数创建你的 Mindmap

对于前端应用，可以将 Markmap 库引入到 HTML 文件并通过 JavaScript 调用来展示思维导图：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="path/to/markmap.min.js"></script>
</head>
<body>
    <!-- 在此处放置你的 Markdown 内容 -->
    <div id="mindmap"></div>
    <script>
        const mindmapElement = document.getElementById('mindmap');
        // 根据实际 Markdown 数据创建 Markmap
        const data = /* Your Markdown content */;
        const markmapInstance = new Markmap(mindmapElement, {
            data,
        });
    </script>
</body>
</html>

3. 项目的配置文件介绍

Markmap 的核心配置大多位于 typedoc.json 和 tsconfig.json 文件中，它们主要用于文档生成和 TypeScript 编译。

typedoc.json：TypeDoc 是一个用于从 TypeScript 代码生成文档的工具。此配置文件包含了如何生成文档的参数，如输出目录、排除某些文件等。

{
  "entryPoints": ["src/index.ts"],
  "out": "./docs",
  "mode": "modules",
  "hideBreadcrumbs": true,
  "excludePrivate": true,
  "plugin": [
    "@markmap/typedoc-plugin"
  ],
  "theme": {
    "name": "default",
    "lightTheme": false
  },
  "externalPattern": "**/node_modules/*",
}

tsconfig.json：这个文件是 TypeScript 编译器的配置，它指定了类型检查规则、编译选项以及编译的入口点。

{
  "compilerOptions": {
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "target": "esnext",
    "downlevelIterators": true,
    "noEmit": true,
    "isolatedModules": true,
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "*": ["*"]
    }
  },
  "include": ["src/**/*", "*.d.ts"],
  "exclude": ["**/*.spec.ts", "__tests__", "dist", "node_modules"]
}