You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
3.4 KiB
107 lines
3.4 KiB
# markmap
|
|
|
|
[](https://gitter.im/gera2ld/markmap?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
|
|
|
Visualize your Markdown as mindmaps.
|
|
|
|
This project is heavily inspired by [dundalek's markmap](https://github.com/dundalek/markmap).
|
|
|
|
👉 [Try it out](https://markmap.js.org/repl).
|
|
|
|
👉 [Read the documentation](https://markmap.js.org/docs) for more detail.
|
|
|
|
## Packages
|
|
|
|
- [markmap-common](https://github.com/markmap/markmap/tree/master/packages/markmap-common)
|
|
|
|
|
|
Common types and utility functions used by markmap packages.
|
|
|
|
- [markmap-lib](https://github.com/gera2ld/markmap/tree/master/packages/markmap-lib)
|
|
|
|
|
|
Transform Markdown to data used by markmap.
|
|
|
|
- [markmap-view](https://github.com/gera2ld/markmap/tree/master/packages/markmap-view)
|
|
|
|
|
|
Render markmap in browser.
|
|
|
|
- [markmap-autoloader](https://github.com/markmap/markmap/tree/master/packages/markmap-autoloader)
|
|
|
|
|
|
Load markmaps automatically in HTML.
|
|
|
|
- [markmap-toolbar](https://github.com/markmap/markmap/tree/master/packages/markmap-toolbar)
|
|
|
|
|
|
Extensible toolbar for markmap.
|
|
|
|
- [markmap-cli](https://github.com/gera2ld/markmap/tree/master/packages/markmap-cli)
|
|
|
|
|
|
Use markmap in command-line.
|
|
|
|
## Related
|
|
|
|
Markmap is also available in:
|
|
|
|
- [VSCode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode) and [Open VSX](https://open-vsx.org/extension/gera2ld/markmap-vscode)
|
|
- Vim / Neovim: [coc-markmap](https://github.com/gera2ld/coc-markmap)  - powered by [coc.nvim](https://github.com/neoclide/coc.nvim)
|
|
- Emacs: [eaf-markmap](https://github.com/emacs-eaf/eaf-markmap) -- powered by [EAF](https://github.com/emacs-eaf/emacs-application-framework)
|
|
|
|
|
|
## Usage
|
|
|
|
### Transform
|
|
|
|
Transform Markdown to markmap data:
|
|
|
|
```js
|
|
import { Transformer } from 'markmap-lib';
|
|
|
|
const transformer = new Transformer();
|
|
|
|
// 1. transform markdown
|
|
const { root, features } = transformer.transform(markdown);
|
|
|
|
// 2. get assets
|
|
// either get assets required by used features
|
|
const { styles, scripts } = transformer.getUsedAssets(features);
|
|
// or get all possible assets that could be used later
|
|
const { styles, scripts } = transformer.getAssets();
|
|
```
|
|
|
|
Now we are ready for rendering a markmap in browser.
|
|
|
|
### Render
|
|
|
|
Create an SVG element with explicit width and height:
|
|
|
|
```html
|
|
<script src="https://cdn.jsdelivr.net/npm/d3@6"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/markmap-view"></script>
|
|
|
|
<svg id="markmap" style="width: 800px; height: 800px"></svg>
|
|
```
|
|
|
|
Render a markmap to the SVG element:
|
|
|
|
```js
|
|
// We got { root } data from transforming, and possible extraneous assets { styles, scripts }.
|
|
|
|
const { Markmap, loadCSS, loadJS } = window.markmap;
|
|
|
|
// 1. load assets
|
|
if (styles) loadCSS(styles);
|
|
if (scripts) loadJS(scripts, { getMarkmap: () => window.markmap });
|
|
|
|
// 2. create markmap
|
|
|
|
Markmap.create('#markmap', null, root);
|
|
|
|
// or pass an SVG element directly
|
|
const svgEl = document.querySelector('#markmap');
|
|
Markmap.create(svgEl, null, data);
|
|
```
|