markmap-view

Renderizar un markmap a partir de datos transformados.

Instalación

$ npm install markmap-view

O cargar desde CDN:

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/markmap-view"></script>

Uso

Crear un elemento SVG con ancho y alto explícitos:

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

Asumiendo que ya tenemos el nodo { root } y los recursos { styles, scripts } de markmap-lib.

Hay dos maneras de importar markmap-view:

// cargar con <script>
const { markmap } = window;
const { Markmap, loadCSS, loadJS } = markmap;

// o como ESM
import * as markmap from 'markmap-view';
import { Markmap, loadCSS, loadJS } from 'markmap-view';

Ahora podemos renderizar un markmap al elemento SVG:

// 1. cargar recursos
if (styles) loadCSS(styles);
if (scripts) {
	loadJS(scripts, {
		// Para que los plugins accedan al módulo `markmap`
		getMarkmap: () => markmap,
	});
}

// 2. crear markmap
// `options` es opcional, es decir, se puede pasar `undefined` aquí
Markmap.create('#markmap', options, root); // -> devuelve una instancia Markmap

El primer argumento de Markmap.create también puede ser un elemento SVG real, por ejemplo:

const svgEl = document.querySelector('#markmap');
Markmap.create(svgEl, options, data); // -> devuelve una instancia Markmap