markmap-view
Render a markmap from transformed data.
Installation
$ npm install markmap-view
Usage
Create an SVG element with explicit width and height:
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/markmap-view"></script>
<svg id="markmap" style="width: 800px; height: 800px"></svg>
Assuming we have already got { root }
node and assets { styles, scripts }
from markmap-lib.
There are two ways to import markmap-view
:
// load with <script>
const { markmap } = window;
const { Markmap, loadCSS, loadJS } = markmap;
// or as ESM
import { Markmap, loadCSS, loadJS } from 'markmap-view';
Now we can render a markmap to the SVG element:
// 1. load assets
if (styles) loadCSS(styles);
if (scripts) loadJS(scripts, { getMarkmap: () => markmap });
// 2. create markmap
// `options` is optional, i.e. `undefined` can be passed here
Markmap.create('#markmap', options, root); // -> returns a Markmap instance
The first argument of Markmap.create
can also be an actual SVG element, for example:
const svgEl = document.querySelector('#markmap');
Markmap.create(svgEl, options, data); // -> returns a Markmap instance