[Introducción]: convierta documentos de Markdown en mapas mentales intuitivos y visuales.
Introducción
Markmap es una combinación de Markdown y Mindmap. Analiza el contenido de Markdown y extrae su jerarquía interna, presentando un mapa mental de mapa mental interactivo, que es un mapa de marcas.
Markmap contiene 3 paquetes:
- markmap-lib, para analizar la estructura de rebajas y convertirlas en datos utilizables por markmap
$ yarn add markmap-lib- markmap-view, para renderizar mapas de marcas en el navegador
$ yarn add markmap-view- markmap-cli, la herramienta de línea de comandos para markmap
$ yarn global add markmap-cliAdemás del uso en los navegadores, Markmap también proporciona el uso de complementos en los siguientes editores:
- Código VSC
https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode
- Vim/Neovim, impulsado por coc.nvim
https://github.com/gera2ld/coc-markmap
La dirección del proyecto es:
https://github.com/gera2ld/markmap
uso
análisis de los datos
El siguiente ejemplo analiza la estructura de rebajas en datos de mapa de marcas en preparación para la próxima representación del navegador:
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();hacer
Cree un elemento svg con una cierta altura y anchura:
<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>Renderice los datos del mapa de marcas en un elemento svg:
// 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);
开源前哨Intercambio diario de proyectos de código abierto populares, interesantes y útiles. Participe en el mantenimiento de más de 100 000 bibliotecas de recursos de tecnología de código abierto de Star, que incluyen: Python, Java, C/C++, Go, JS, CSS, Node.js, PHP, .NET, etc.