Generación de Markmap (mapas mentales)

Características

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) 

Instrucciones 

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.

Navegación y manipulación

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

...

Exportar el mapa mental

Desde la aplicación web:

1. Cree su mapa mental.

2. Haga clic en el botón «Exportar».

3. 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:

1. Exporte el mapa en formato HTML.

2. 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. 

Ejemplo Markmap con sus funcionalidades

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


Recursos Adicionales

Documentación Oficial

• Sitio web oficial de Markmap

• Repositorio en GitHub

Tutoriales y ejemplos

• Tutorial interactivo

Comunidad

• Problemas en GitHub

• Discusiones

Etiquetas: Markmap, Mapas Mentales, Markdown, Visualización de Datos, Herramienta de Productividad 

José López Ponce, 5/03/2024