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, so must load those files first. -->
<script src="//unpkg.com/d3@3/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 devTODO
- [ ] Stop d3 resizing
- [ ] To find another light weight mindmap render engine