markmap的使用

markmap 能够在网页中渲染思维导图。

官方文档

在 docusaurus 中使用

安装库

npm

npm install markmap-lib
npm install markmap-view

编写组件

js/src/components/MarkMap/index.js

import React, { useEffect, useRef } from "react";
import { Transformer } from "markmap-lib";
const { Markmap } = require("markmap-view");

const transformer = new Transformer();

const MarkmapRender = (props) => {
    const svg = useRef(null); // useRef 初始化为 null

    useEffect(() => {
        const mm = Markmap.create(svg.current);
        const { root } = transformer.transform(props.value || ""); // 确保 value 存在
        mm.setData(root);
        mm.fit();
    }, [props.value]); // 当 props.value 改变时触发

    return (
        <React.Fragment>
            <svg className="flex-1" ref={svg} style={props.style} />
        </React.Fragment>
    );
};

export default MarkmapRender;

编写mdx文档

textdocs/markmap.md

import MarkmapRender from "/src/components/MarkMap";

<MarkmapRender
  value={`
  # 知识库
  ## Linux
    - Linux命令
    - Linux服务
  ## 前端
    - HTML
    - CSS
    - BOM/DOM
    - Javascript
  ## 上网指南
    - 网站大全
    - 读书清单
  `}
  style={{ width: "100%", height: "300px" }}
/>

效果