Markmap: Visualiza tus Documentos Markdown como Mindmaps Interactivos

¿Qué es Markmap?

Markmap es una poderosa librería JavaScript que transforma documentos Markdown en mindmaps (mapas mentales) interactivos y visualmente atractivos. La biblioteca combina la simplicidad de Markdown con la expresividad de los diagramas mentales, permitiendo crear visualizaciones jerárquicas de información de manera intuitiva.

La palabra "markmap" es una fusión de markdown + mindmap, y fue desarrollada por gera2ld como un proyecto open source que ha revolucionado la forma en que visualizamos contenido estructurado.

Características Principales

Interactividad Completa

Zoom in/out con la rueda del ratón
Desplazamiento arrastrando el fondo
Expandir/colapsar nodos haciendo clic
Animaciones suaves durante las transiciones

Facilidad de Uso

Sintaxis Markdown estándar
Integración mediante CDN sin instalación
Compatibilidad con múltiples frameworks
Soporte para temas y estilos personalizables

Características Avanzadas

Soporte para LaTeX/KaTeX
Renderizado de código con syntax highlighting
Enlaces e imágenes embebidas
Exportación a SVG e imágenes

Arquitectura de Markmap

Markmap está compuesto por varios paquetes modulares que trabajan en conjunto:

markmap-lib

Transforma el contenido Markdown en una estructura de datos que markmap puede renderizar. Este paquete contiene el Transformer que analiza el Markdown y extrae su estructura jerárquica.

markmap-view

Renderiza el mindmap desde los datos transformados. Utiliza D3.js para crear visualizaciones SVG interactivas y dinámicas.

markmap-autoloader

Permite cargar markmaps automáticamente en páginas HTML sin necesidad de código JavaScript adicional.

Ejemplos Interactivos

Integración en HTML Normal

La forma más sencilla de usar Markmap es mediante el autoloader:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo Markmap</title>
</head>
<body>
    <div class="markmap">
        <script type="text/template">
# Tecnologías Web Modernas

## Frontend
### Frameworks
- React
- Vue.js
- Angular
- Svelte

## Backend
### Node.js
- Express
- NestJS
- Fastify
        </script>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@latest"></script>
</body>
</html>

Integración en .NET Blazor

Para Blazor, necesitas crear un componente personalizado y usar JavaScript Interop:

// Componente Blazor
<MarkmapViewer 
    Markdown="@markdownContent" 
    Height="700px"
    Options="@markmapOptions" />

@code {
    private string markdownContent = @"
# Desarrollo en .NET

## Blazor
### Blazor Server
- SignalR
- State Management

### Blazor WebAssembly
- Client-side
- PWA Support
";

    private MarkmapOptions markmapOptions = new MarkmapOptions
    {
        Duration = 800,
        MaxWidth = 300,
        ColorFreezeLevel = 2
    };
}

Historia de la Inteligencia Artificial

Un ejemplo completo con contenido extenso:

Integración en HTML

Para mayor control, puedes usar los paquetes principales directamente:

// Obtener referencias a las librerías
const { Transformer } = window.markmap;
const { Markmap, loadCSS, loadJS } = window.markmap;

// Contenido Markdown
const markdown = `# Tu contenido aquí`;

// Transformar Markdown
const transformer = new Transformer();
const { root, features } = transformer.transform(markdown);
const assets = transformer.getUsedAssets(features);

// Cargar assets CSS/JS si es necesario
if (assets.styles) loadCSS(assets.styles);
if (assets.scripts) {
    loadJS(assets.scripts, {
        getMarkmap: () => window.markmap,
    });
}

// Crear el mindmap
Markmap.create('#mindmap', {
    duration: 500,
    maxWidth: 300,
    colorFreezeLevel: 2
}, root);

Opciones de Configuración Avanzadas

Markmap ofrece múltiples opciones de configuración mediante frontmatter YAML:

---
markmap:
  color:
    - "#2196F3"
    - "#4CAF50"
    - "#FF9800"
  colorFreezeLevel: 2
  duration: 800
  maxWidth: 300
  initialExpandLevel: 2
  zoom: true
  pan: true
---

# Tu contenido aquí

Opción	Tipo	Default	Descripción
`color`	`string[]`	d3.schemeCategory10	Colores para ramas y círculos
`colorFreezeLevel`	`number`	0	Nivel donde congelar colores (0 = sin congelar)
`duration`	`number`	500	Duración de animaciones en ms
`maxWidth`	`number`	0	Ancho máximo de contenido de nodos (0 = sin límite)
`initialExpandLevel`	`number`	-1	Nivel máximo expandido inicialmente (-1 = todos)

Markmap