Render a markmap from transformed data.


$ yarn add markmap-view


Create an SVG element with explicit width and height:

<script src=""></script>
<script src=""></script>

<svg id="markmap" style="width: 800px; height: 800px"></svg>

We already got { root } node and assets { styles, scripts } from markmap-lib.

Now we can render a markmap to the SVG element:

// load with <script>
const { markmap } = window;
// or with ESM
import * as markmap from 'markmap-view';

const { Markmap, loadCSS, loadJS } = markmap;

// 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);

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);