Markmap combines markdown and mindmap

本文演示通过 markmap 的 auto-loader 直接加载方式，在网页中展示思维导图。 前期准备工作是在pelican主题的模板 html 文件中加入style和markmap-autoloader脚本， 然后在 markdown 文本中加入 class="markmap" 的 div 即可，内容为 markdown 格式。

<div class="markmap">
    <script type="text/template">

---
  markmap:
    maxWidth: 500
  colorFreezeLevel: 2
---

# Title

## Head

    </script>
</div>

展示效果如下，可以通过下方的 toolbar 进行缩放调整。

参考链接

  1. https://markmap.js.org/docs/markmap
  2. https://stackblitz.com/edit/markmap-autoloader?file=index.html