Package Exports

docsify-mindmap
docsify-mindmap/src/docsify-mindmap.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (docsify-mindmap) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

docsify-mindmap

Mind map plugin for docsify.

Usage

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
  </head>
  <body>
    <!-- markmap is based on d3@3, so must load those files first. -->
    <script src="//unpkg.com/d3@3/dist/d3.min.js"></script>
    <script src="//unpkg.com/markmap@0.6.1/lib/d3-flextree.js"></script>
    <script src="//unpkg.com/markmap@0.6.1/lib/view.mindmap.js"></script>
    <link rel="stylesheet" href="//unpkg.com/markmap@0.6.1/style/view.mindmap.css">

    <div id="app"></div>
    <script>
      window.$docsify = {
        mindmap: {
          // https://github.com/dundalek/markmap
          markmap: {
            preset: 'colorful', // or default
            linkShape: 'diagonal' // or bracket
          }
        }
      }
    </script>
    <script src="//unpkg.com/docsify@4/lib/docsify.min.js"></script>
    <script src="//unpkg.com/docsify-mindmap/dist/docsify-mindmap.min.js"></script>
  </body>
</html>

# Plain text

```mindmap
root
  topic1
    subtopic
  topic2
    subtopic
```

# JSON tree format

```mindmap json-tree
{
  "name": "root",
  "children": [
    {
      "name": "topic1",
      "children": [{ "name": "subtopic" }]
    },
    {
      "name": "topic2",
      "children": [{ "name": "subtopic" }]
    }
  ]
}
```

See demo for more format

Dev memo

npm i
npm run dev

TODO

Stop d3 resizing
To find another light weight mindmap render engine
Support markmap-lib