尝试在博客中插入可思维导图。由各种原因已放弃。

<h1 id="heading">【弃案】在博客中插入思维导图</h1>
首先检索了常见的可交互思维导图功能：
<ul>
<li>可放大、缩小</li>
<li>点击节点可折叠</li>
<li>支持多种格式的数据导入（如 Markdown、JSON……）</li>
</ul>
从这些中选取了两个较为不错的思维导图选择：
<ul>
<li><a href="https://markmap.js.org/">markmap</a></li>
<li><a href="https://naotu.baidu.com/">kityminder</a></li>
</ul>
前者基于 d3.js 渲染，支持右向拓展的思维导图。色彩丰富，支持 Markdown 输入，社区较为活跃。 
后者则是百度脑图的引擎，相比较之下可能不太好看，但是功能强大，使用百度内部的 kity 渲染，但官方已弃坑。
<h2 id="heading-1">博客渲染思路</h2>
无论是前端 Markdown 渲染还是后端 Markdown 渲染，原理上都只是将渲染内容原封不动渲染为 HTML（使用特定标签标记），而后页面前端检索所有该标签，并重新渲染该标签内容。
以前端 Markdown 渲染使用的 markdown-it 为例，只需要实现一个针对代码块的监听插件即可，它会将对应的内容渲染至<code>&lt;div class=&quot;mindmap-svg&quot;&gt;</code>。（在这里使用列表来支持多种触发标签，为了处理后续可能存在的多种输入格式（如输入 Markdown 渲染思维导图或直接输入 JSON 渲染思维导图）
<pre style="background-color:#fff">const mindmapPlugin = (md) =&gt; {
 const temp = md.renderer.rules.fence.bind(md.renderer.rules);

 md.renderer.rules.fence = (tokens, idx, options, env, slf) =&gt; {
 const token = tokens[idx];
 const { ids = [&#39;mindmap&#39;] } = options;

 if (ids.indexOf(token.info) !== -1) {
 try {
 const data = token.content.trim();
 return `&lt;div class=&#34;mindmap-svg&#34; type=&#34;${token.info}&#34;&gt;${data}&lt;/div&gt;`;
 } catch (ex) {
 return `&lt;pre&gt;${ex}&lt;/pre&gt;`;
 }
 }

 return temp(tokens, idx, options, env, slf);
 };
};

export { mindmapPlugin };

</pre>接下来只需要在渲染页面的时候，检索所有的<code>mindmap-svg</code>类即可
<pre style="background-color:#fff">resetMindMap() {
 const mindmaps = document.getElementsByClassName(&#39;mindmap-svg&#39;);
 for (var i = 0; i &lt; mindmaps.length; ++i) {
 try {
 const mindmap = mindmaps[i];
 if (!mindmap.getAttribute(&#39;rendered&#39;)) {
 const text = mindmap.innerHTML;
 console.log(mindmap);
 console.log(text);
 mindmap.setAttribute(&#39;rendered&#39;, &#39;1&#39;);
 ReactDOM.render(&lt;MindMap markdown={text} width=&#34;100%&#34; height=&#34;50vh&#34; /&gt;, mindmap);
 }
 } catch (e) {
 console.error(e);
 }
 }
}
</pre><h2 id="markmap-">markmap 组件</h2>
官方推荐的是前端引入 d3.js 和 markmap-view.js，不过在这里直接从依赖里引入也只是让包稍微大了一点而已。同时解决了可能存在的引入顺序问题。（如果判断是否存在思维导图标签再引入 d3.js，可能会存在引入问题）
<pre style="background-color:#fff">import React from &#39;react&#39;;
import Head from &#39;next/head&#39;;

import { ComponentProps } from &#39;@/utils/component&#39;;

import { transform } from &#39;markmap-lib&#39;;
import { Markmap } from &#39;markmap-view&#39;;

export declare type MindMapProps = ComponentProps&lt;{
 markdown?: string;
 width?: React.ReactText;
 height?: React.ReactText;
}&gt;;

export function MarkMap(props: MindMapProps) {
 const { markdown = &#39;&#39;, ...restProps } = props;
 const ref = React.useRef&lt;SVGSVGElement&gt;();
 React.useEffect(() =&gt; {
 try {
 const { root, features } = transform(markdown.trim());
 var el = Markmap.create(ref.current, { autoFit: false }, root);
 } catch (e) {
 console.error(e);
 }
 return () =&gt; {
 el.styleNode.interrupt();
 el.g.interrupt();
 el.svg.interrupt();
 };
 }, [markdown]);
 return &lt;svg ref={ref} {...restProps}&gt;&lt;/svg&gt;;
}
</pre>整体思路就是渲染出一个<code>&lt;svg&gt;</code>标签，在渲染结束后初始化 <code>Markmap</code> 对象，并绑定上述的标签。在组件销毁时，对内部的标签进行处理。
尽管看上去没有问题，但是在销毁时，d3.js 本身的动画等待并未结束，因此可能会发生组件已销毁，但是动画还在持续，导致找不到对应的组件的错误。尽管有人提到可以使用<code>.interrupt()</code>解决，但是测试似乎仍然不太有效（不过也有可能是函数组件的问题，如果换成对象组件，可能会有更为严格的组件生命周期） 
相关讨论见 <a href="https://github.com/d3/d3-timer/issues/32">d3/d3-timer#32 Saving handle to call cancelAnimationFrame is required. #32</a>
整体来说，除去上述可能会报错的问题外，这个组件体验还是很不错的，如果后续有精力可以尝试进一步想办法解决。
<h2 id="kityminder">kityminder</h2>
作为百度的良心产品，百度脑图支持的功能可以说是非常不错了（相对于其他的前端思维导图渲染）。不过默认不支持滑轮缩放，因此需要自己去实现（这里自己监听了下滚轮操作，效果勉强能用）
由于这时一个上古项目，而且本身是要求浏览器引入的，因此导入的 NodeJS 包仍然需要从<code>window</code>上获取对应的变量。剩下的操作与之前的类似。只是不太确定为什么会存在<code>ref.current=undefined</code>的情况。
<pre style="background-color:#fff">
export function KityMinder(props: MindMapProps) {
 const { markdown = &#39;&#39;, ...restProps } = props;
 const ref = React.useRef&lt;HTMLDivElement&gt;();

 const minder = React.useMemo(() =&gt; {
 var kityminder = (window as any).kityminder;
 if (!kityminder) {
 require(&#39;kity&#39;);
 require(&#39;kityminder-core&#39;);
 kityminder = (window as any).kityminder;
 }
 if (!!ref.current) {
 ref.current.innerHTML = &#39;&#39;;
 var minder = new kityminder.Minder({ renderTo: ref.current });
 } else {
 var minder = new kityminder.Minder();
 }
 return minder;
 }, []);
 React.useEffect(() =&gt; {
 minder.renderTo(ref.current);
 }, [ref]);
 React.useEffect(() =&gt; {
 try {
 minder.importData(&#39;markdown&#39;, markdown);
 minder.disable();
 minder.execCommand(&#39;hand&#39;);
 minder.on(&#39;mousewheel&#39;, (e) =&gt; {
 const minder = e.minder;
 if (e.originEvent.wheelDelta &gt; 0) {
 minder.zoom(e.minder.getPaper().getViewPort().zoom * 100 + 5);
 } else {
 minder.zoom(Math.max(1, e.minder.getPaper().getViewPort().zoom * 100 - 5));
 }
 e.preventDefault();
 return false;
 });
 (window as any).mm = minder;
 } catch (e) {
 console.error(e);
 }
 }, [minder, markdown]);
 return &lt;div ref={ref} {...restProps}&gt;&lt;/div&gt;;
}

export default KityMinder;
</pre>这个组件实现下来，起码没有奇怪的报错，但是由于其本身并没有实现放大缩小、触摸移动，可能需要较多的工作量处理这些东西。
<h2 id="heading-2">总结</h2>
当然，最终导致我放弃这两个的原因是，他们都会减慢渲染速度。由于 JS 本身单线程，他们的渲染耗时将会直接导致编辑框打不进去字。或许是时候把分块渲染提入日程，不过暂时没有较好的实现思路。