這段程序使看到了好的東西,又沒有零錢的產物
還是老師讓畫思維導圖我不想畫還想白嫖的想法
用時20分鐘
就拿這個來作為例子 https://mm.edrawsoft.cn/template/286842

1. 找到一個突破點

我看了網絡,沒有接口,沒辦法偷懶
思維導圖是canvas渲染的,我也懶得找數據從哪里來的,所以就只有大綱了

function getOutline(node) {
    let info = {child: []};
    info.title = $(node).children(".ed-outline-title").find("span").text();
    $(node).children(".ed-outline").each(function (index, ele) {
        info.child.push(getOutline(ele));
    });
    return info;
}
// 運行
// 里面是jquery的css選擇器,選擇的是大綱的節點
getOutline($("#app > div > div > div:nth-child(4) > div.ed-outline.ed-outline--top").get(0))

這會生成一個Json

{
	"child": [
		{
			"child": [
				{
					"child": [],
					"title": "沒有孩子的三級"
				},
						{
					"child": [],
					"title": "沒有孩子的三級"
				}
			],
			"title": "有孩子的二級"
		},
				{
			"child": [],
			"title": "沒有孩子的二級"
		}
	],
	"title": "一級"
}

有了json,怎么轉化為思維導圖呢?
用markmap!

2. json轉markdown生成思維導圖

先做json轉markdown,很簡單

function toMarkdown(data, depth=0) {
    let markdownStr = "";
    data.title = data.title.replace(/[(\r\n)(\n)]/g,"<br/>");
	if(data.title=="") {
		// 有的標題不對勁,會干擾markmap的生成
		data.title = "&nbsp;";
	}
    markdownStr +=  "    ".repeat(depth)+"- "+data.title+"\n";
    for (let i in data.child) {
        markdownStr += toMarkdown(data.child[i], depth+1);
    }
    return markdownStr;
}

在markdown里,換行能引起各種各樣的錯誤,所以我將每一層的文字的換行符替換成<br/>

接下來是生成思維導圖
試用: https://markmap.js.org/repl
源碼: https://github.com/markmap/markmap
把剛才的那一段示例生成為markdown

- 一級
    - 有孩子的二級
        - 沒有孩子的三級
        - 沒有孩子的三級
    - 沒有孩子的二級

打開網址,將markdown填入文本框

非常完美,這樣子給老師交差就方便了
好了完整代碼放到這里, 要是有變化我也不管啦, 我已經和老師交差了

(function () {
    function getOutline(node) {
        let info = {child: []};
        info.title = $(node).children(".ed-outline-title").find("span").text();
        $(node).children(".ed-outline").each(function (index, ele) {
            info.child.push(getOutline(ele));
        });
        return info;
    }
    function toMarkdown(data, depth=0) {
        let markdownStr = "";
        data.title = data.title.replace(/[(\r\n)(\n)]/g,"<br/>");
		if(data.title=="") {
			// 有的標題不對勁,會干擾markmap的生成
			data.title = "&nbsp;";
		}
        markdownStr +=  "    ".repeat(depth)+"- "+data.title+"\n";
        for (let i in data.child) {
            markdownStr += toMarkdown(data.child[i], depth+1);
        }
        return markdownStr;
    }
    let outlineBox = $("#app > div > div > div:nth-child(4) > div.ed-outline.ed-outline--top").get(0);
    let copyBtn = $(`<button style="position:absolute;">復制思維導圖markdown</button>`);
    copyBtn.css({
        "top": $(outlineBox).offset().top+"px",
        "right": "0px"
    });
    copyBtn.click(function () {
        navigator.clipboard.writeText(toMarkdown(getOutline(outlineBox)));
    });
    $("body").append(copyBtn);
})();

閱讀了源碼,發現有更簡單的方法

這是一個Object,里面存著所有的東西
window.__NUXT__.state["active-work"]
大綱請看對象的下的outlines
svg文件和預覽圖請看對象下的config
更加詳細的信息看workInfo
還有評論等等的都在這個里面
還有,workInfo里有一個鏈接,我總感覺可以直接下載到emmx文件
我已經被學校燃盡了,以后有緣我再研究