markmap-view

Renderize um markmap a partir de dados transformados.

Instalação

$ npm install markmap-view

Ou carregue a partir do CDN:

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

Uso

Crie um elemento SVG com largura e altura explícitas:

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

Supondo que já temos o nó { root } e os ativos { styles, scripts } de markmap-lib.

Há duas maneiras de importar markmap-view:

// carregar com <script>
const { markmap } = window;
const { Markmap, loadCSS, loadJS } = markmap;

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

Agora podemos renderizar um markmap no elemento SVG:

// 1. carregar ativos
if (styles) loadCSS(styles);
if (scripts) {
	loadJS(scripts, {
		// Para plugins acessarem o módulo `markmap`
		getMarkmap: () => markmap,
	});
}

// 2. criar markmap
// `options` é opcional, ou seja, `undefined` pode ser passado aqui
Markmap.create('#markmap', options, root); // -> retorna uma instância do Markmap

O primeiro argumento de Markmap.create também pode ser um elemento SVG real, por exemplo:

const svgEl = document.querySelector('#markmap');
Markmap.create(svgEl, options, data); // -> retorna uma instância do Markmap