Markmap es una herramienta de código abierto que permite convertir texto en formato Markdown en mapas mentales interactivos. Esta herramienta facilita la visualización de información jerárquica, lo que resulta especialmente útil para organizar ideas, planificar proyectos, estructurar documentos o crear presentaciones visuales.
Características principales:
Basado en Markdown: Utiliza la sintaxis de Markdown, la cual es sencilla de aprender y ampliamente utilizada.
Visualización interactiva: Permite expandir y contraer nodos para facilitar la navegación.
Personalizable: Ajusta colores, fuentes y estilos de línea para adaptar el mapa a tus necesidades.
Multiplataforma: Disponible como aplicación web, extensión para VS Code, CLI (Interfaz de Línea de Comandos) y biblioteca JavaScript.
Exportación flexible: Permite guardar los mapas en formato HTML, SVG o PNG.
La ventaja principal de usar Markdown para mapas mentales, es que permite crear y editar mapas mentales de forma rápida y sencilla usando un editor de texto plano.
Instalación
Funciona tanto como una herramienta en línea o aplicación web, como una biblioteca de JavaScript, y como una extensión de VS Code.
Aplicación web. La manera más sencilla de comenzar es utilizar la aplicación web. En markmap.js.org/repl (No requiere instalación, funciona directamente en el navegador)
Extensión de VS Code. Para usuarios de Visual Studio Code:
Abra VS Code
Ve al panel de extensiones (o presione Ctrl+Shift+X)
Busca «Markmap»
Haga clic en «Instalar» en la extensión «Markmap»
Instalación por línea de comandos. Para usuarios avanzados que prefieren la línea de comandos:
npm install -g markmap-cli
Integración en Proyectos JavaScript. Para desarrolladores que desean integrar Markmap en sus aplicaciones:
npm install markmap-lib
npm (el gestor de paquetes de Node.js)
El concepto central de Markmap es que la *sangría* (indentación) de una línea de texto determina su relación jerárquica en el mapa mental. Un elemento con mayor sangría es un «hijo» del elemento que está encima de él con menos sangría. Markmap utiliza la jerarquía de los encabezados y listas anidadas de Markdown para crear la estructura del mapa:
Los encabezados (#, ##, ###, etc.) se convierten en nodos principales.
# Título principal (nivel 1)
## Subtítulo (nivel 2)
### Subtítulo (nivel 3)
Las listas anidadas (utilizando - o *) crean sub-nodos dentro de los nodos principales.
- Elemento de lista (Nivel 1)
- Sub-elemento (Nivel 2 - 4 espacios de sangría)
- Sub-sub-elemento (Nivel 3 - 8 espacios de sangría)
Texto regular: El texto que no es un encabezado ni parte de una lista se incluye dentro del nodo correspondiente, según la sangría.
Formateo de Texto Markmap admite la mayoría de las características de formato de Markdown:
Negritas: **texto en negritas** o __texto en negritas__
Cursiva: *texto en cursiva* o _texto en cursiva_
Tachado: ~~texto tachado~~
Enlaces: [Texto del enlace](URL)
Imágenes:  (Nota: la compatibilidad con imágenes puede variar según la implementación de Markmap).
Código en línea: `código`
Bloques de código: ```lenguaje
// Tu código aquí
(Nota: la compatibilidad con la sintaxis de resaltado de código puede variar según la implementación).
Latex: fórmulas matemáticas se pueden representar con expresiones en Latex, ya sea en línea con $ ... $ o en bloque con:
$$
...
$$
Caracteres de inicio (para listas): Aunque la sangría es lo principal, Markmap generalmente reconoce los siguientes caracteres al inicio de una línea para crear elementos de lista:
- (guión)
* (asterisco)
+ (signo más)
Estos caracteres se usan junto con la sangría. No es estrictamente necesario usar uno de estos caracteres, pero es una buena práctica y mejora la legibilidad del Markdown. Si no usas un carácter de lista, simplemente deja un espacio en blanco antes del texto.
El mapa mental se generará automáticamente en el panel de visualización.
Zoom: Utiliza la rueda del ratón para acercar o alejar el mapa.
Desplazamiento: Haz clic y arrastra en un espacio vacío para mover todo el mapa.
Expandir/Contraer: Haz clic en los círculos junto a los nodos para expandir o contraer sus sub-nodos.
Reordenar: Para reordenar elementos, edita directamente el texto Markdown y ajusta la sangría.
Cambiar colores y estilos: Markmap permite personalizar la apariencia de sus mapas mentales mediante opciones de configuración:
En la aplicación web disponemos de opciones para ajustar algunos aspectos de la configuración. También podemos establecer una configuración de “opciones JSON” que podemos agregar al principio de su archivo Markdown como el valor de markmap.
---
markmap:
colorFreezeLevel: 2
maxWidth: 300
---
# Mi Mapa Mental
...
Desde la aplicación web:
Cree su mapa mental.
Haga clic en el botón «Exportar».
Seleccione el formato deseado:
HTML (página web interactiva)
SVG (imagen vectorial)
Desde la línea de comandos:
# Exportar a HTML
`markmap -o mapa.html archivo.md`
# Exportar a SVG
‘markmap -o mapa.svg archivo.md’
Integrar Markmap en sitios web
Para incluir un mapa mental en su sitio web:
Exporte el mapa en formato HTML.
Incorpore el código JavaScript necesario:
<script src="[https://cdn.jsdelivr.net/npm/markmap-autoloader](https://cdn.jsdelivr.net/npm/markmap-autoloader)"></script>
<script>
// Cargar mapa mental desde un archivo Markdown
markmap.autoLoader.renderAll(); // O renderiza un elemento específico si es necesario.
</script>
<div id="mapa" style="width: 100%; height: 500px;"></div>
Integración con otras herramientas
Presentaciones: Integra Markmap en diapositivas HTML como Reveal.js.
Documentación: Utiliza Markmap en documentación técnica para visualizar arquitecturas o flujos.
Notas: Integra mapas mentales en aplicaciones de toma de notas que admitan HTML.
Texto Markmap
---
title: markmap
markmap:
colorFreezeLevel: 2
---
## Enlaces
- [Website](https://markmap.js.org/)
- [GitHub](https://github.com/gera2ld/markmap)
## Proyectos relacionados
- [coc-markmap](https://github.com/gera2ld/coc-markmap) para Neovim
-[markmap-vscode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode) para VSCode
- [eaf-markmap](https://github.com/emacs-eaf/eaf-markmap) para Emacs
## Funcionalidades Clave
Tenga en cuenta que si los bloques y las listas aparecen al mismo nivel, las listas serán ignoradas.
### Listas
- **negrita** ~~texto tachado~~ *cursiva* ===Resaltado===
- `inline code`
- [x] casilla verificación
- Katex: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ <!-- markmap: fold -->
- [More Katex Examples](#?d=gist:af76a4c245b302206b16aec503dbe07b:katex.md)
- Un texto muy largo, pero que muy largo de acuerdo con **maxWidth**
- lista ordenada
1. item 1
2. item 2
### Bloques
```js
console.log('Hola, Narrativa híbrida')
```
| Opción | Descripción | Valor por Defecto |
|---------------|-----------------------------------------------|-------------------|
| colorFreezeLevel | Número de niveles para mantener colores fijos | 0 |
| maxWidth | Ancho máximo del texto en un nodo (px) | (sin límite) |
| initialExpandLevel | Niveles a expandir inicialmente | -1 (todos) |

Documentación Oficial
Tutoriales y ejemplos
Comunidad
Etiquetas: Markmap, Mapas Mentales, Markdown, Visualización de Datos, Herramienta de Productividad
José López Ponce, 5/03/2024