Visor y editor de Markdown con Mermaid

Documento Markdown

Escribe, pega o abre un archivo Markdown y mira la vista previa al instante, como en GitHub: tablas, listas de tareas, notas al pie, alertas, diagramas Mermaid, fórmulas LaTeX y código resaltado. Después puedes descargarlo como HTML o guardarlo en PDF. Todo se procesa en tu navegador.

Índice

Scroll sincronizado

Respetar saltos de línea

---
title: "Documento de ejemplo"
tags: [markdown, mermaid, katex]
---

# Documento de ejemplo

Edita este texto y mira el resultado al instante. Admite **negrita**, *cursiva*, ~~tachado~~, `código`, enlaces como https://ittools.tech y notas al pie[^1].

> [!NOTE]
> Las alertas de GitHub también funcionan: prueba con TIP, IMPORTANT, WARNING o CAUTION.

## Tareas y tablas

- [x] Escribir el README
- [ ] Añadir un diagrama

| HTTP | Endpoint | Status |
|:-------|:-----|-------:|
| `GET` | `/api/users` | 200 |
| `POST` | `/api/users` | 201 |
| `DELETE` | `/api/users/42` | 204 |

```typescript
async function getUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) throw new Error(response.statusText);
  return response.json();
}
```

## Diagramas y fórmulas

```mermaid
sequenceDiagram
    participant C as App
    participant A as API
    participant D as DB
    C->>A: GET /api/users/42
    A->>D: SELECT * FROM users WHERE id = 42
    D-->>A: row
    A-->>C: 200 OK (JSON)
```

```mermaid
flowchart LR
    A[Commit] --> B{Tests OK?}
    B -- ✓ --> C[Build]
    B -- ✗ --> D[Fix]
    D --> A
    C --> E[Deploy]
```

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

Euler: $e^{i\pi} + 1 = 0$

</details>

[^1]: Todo se procesa en tu navegador; el documento no se envía a ningún servidor.

0 palabras · 0 líneas · 0 min de lectura

Cómo funciona

Markdown es el formato de los README, la documentación técnica, las wikis y las notas de casi cualquier herramienta de desarrollo, pero cada plataforma le añade sus propias extensiones. Este visor sigue GitHub Flavored Markdown (GFM), que es la variante más usada: además de lo básico, dibuja tablas, listas de tareas, tachado, enlaces automáticos, notas al pie y las alertas NOTE, TIP, IMPORTANT, WARNING y CAUTION.

Los bloques de código marcados como mermaid se convierten en diagramas (flujo, secuencia, clases, estados, entidad-relación, Gantt, Git y más), las fórmulas entre signos $ se dibujan con KaTeX y el resto del código se resalta según el lenguaje indicado. Si el documento empieza con un bloque YAML entre líneas ---, como los de Jekyll, Hugo o Docusaurus, se muestra como una tabla aparte.

El documento no sale de tu navegador. El HTML que contenga se limpia antes de mostrarlo, así que abrir un README de terceros no ejecuta scripts, y las bibliotecas de diagramas y fórmulas solo se descargan si el documento las usa.

Ejemplos

```mermaid
flowchart LR
  A[Commit] --> B[Build] --> C[Deploy]
```

Commit → Build → DeployUn bloque de código con el lenguaje mermaid se dibuja como diagrama. Si tiene un error de sintaxis, el código queda visible con el mensaje de Mermaid debajo.

## Getting Started
## API v2.0 (beta)
## Getting Started

#getting-started · #api-v20-beta · #getting-started-1Los encabezados reciben el mismo id que les da GitHub: minúsculas, espacios cambiados por guiones, sin signos de puntuación y con un número al final si se repiten. Así un enlace [texto](#getting-started) funciona igual aquí y en el repositorio.

Line one
Line two

<p>Line one
Line two</p>  →  <p>Line one<br>Line two</p>

En Markdown estándar un salto de línea simple no corta el párrafo; hay que dejar una línea en blanco o terminar la línea con dos espacios. Los comentarios e issues de GitHub sí lo respetan: para verlo así, activa Respetar saltos de línea.

> [!WARNING]
> Breaking change in v3.

⚠ Warning — Breaking change in v3.Una cita que empieza con [!NOTE], [!TIP], [!IMPORTANT], [!WARNING] o [!CAUTION] se muestra como alerta de color, igual que en GitHub. En plataformas que no las admiten se ve como una cita normal.

Casos de uso

Revisar cómo va a quedar un README o un CHANGELOG antes de subirlo al repositorio.
Leer un archivo .md descargado sin instalar un editor: se abre con el botón o arrastrándolo.
Probar diagramas Mermaid de arquitectura, flujos o secuencias y corregir la sintaxis con la vista previa en vivo.
Convertir documentación en una página HTML autónoma o en un PDF para compartirla con quien no usa Git.
Escribir apuntes o documentación técnica con fórmulas matemáticas en notación LaTeX.
Ver el texto en Markdown que devuelve un asistente de IA con su formato, tablas y bloques de código.

Preguntas frecuentes

¿Qué tipos de diagramas Mermaid se pueden dibujar?

Todos los que trae Mermaid: flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, sankey, xychart, block, architecture y kanban, entre otros. Los diagramas usan colores claros u oscuros según el tema del sitio y se dibujan en modo estricto: el texto de las etiquetas no puede inyectar HTML ni ejecutar código al hacer clic.

¿Cómo escribo una fórmula matemática?

Entre signos $ para una fórmula en línea, como $a^2 + b^2 = c^2$, y entre $$ o en un bloque de código con el lenguaje math para una fórmula centrada en su propia línea. La sintaxis es la de LaTeX que admite KaTeX. Para escribir un signo $ literal, como en un precio, antepón una barra invertida; de todos modos, "$5 y $10" no se toma como fórmula porque el segundo $ tiene un espacio antes y un número después.

¿Puedo usar HTML dentro del Markdown?

Sí, como en GitHub: etiquetas como details y summary para secciones desplegables, kbd para teclas, sub y sup, img con tamaño o p con align. Antes de mostrarlo se quitan los scripts, los atributos de eventos como onclick, los enlaces javascript: y las etiquetas style y form, así que un documento de terceros no puede ejecutar código ni cambiar el resto de la página.

¿Cómo lo paso a PDF?

Con Exportar e Imprimir o guardar en PDF se abre el diálogo de impresión solo con el documento, sin la interfaz del sitio, y ahí eliges Guardar como PDF. Las tablas, los bloques de código y los diagramas se evitan cortar entre páginas. Si prefieres un archivo para publicar, Descargar .html genera una página autónoma con los estilos incluidos.

¿Por qué no se ve una imagen con ruta relativa?

Porque el visor no tiene acceso a las otras carpetas del repositorio: una ruta como ./docs/logo.png solo existe en tu disco o en GitHub. Las imágenes con dirección completa, que empiezan por https://, se muestran sin problema.