Editor de ecuaciones LaTeX en línea

Esta lección cubre la herramienta Math — el icono fx de la barra de herramientas. Aprenderás a escribir una expresión LaTeX, ver cómo KaTeX la renderiza en tiempo real bajo el cursor, ajustar color y tamaño, y exportar el resultado como SVG o PNG. El archivo exportado encaja directamente en una figura de artículo, una diapositiva, una página de Notion o un post de blog.

La herramienta Math forma parte de la pizarra infinita de drawtonomy, así que el mismo lienzo puede contener también carriles, vehículos y peatones — útil cuando una ecuación necesita acompañar al diagrama que explica. Pero no hace falta usar nada de eso: la herramienta Math funciona igualmente sobre un lienzo en blanco como editor de fórmulas independiente.

1. Selecciona la herramienta Math

Abre drawtonomy.com. En la barra inferior, haz clic en el icono fx — está entre las herramientas Text (T) y Freehand:

$La herramienta Math (fx) aparece activa en la barra de herramientas inferior$

Consejo: si prefieres el teclado, pulsa / — el mismo atajo estilo Notion para la herramienta Math.

2. Haz clic donde quieres colocar la ecuación

Haz clic en cualquier punto del lienzo. drawtonomy abre un editor en línea en ese lugar. La mitad superior es el campo de texto LaTeX; la mitad inferior, la previsualización en vivo con KaTeX. Un marcador de posición muestra la fórmula cuadrática como ejemplo.

$Editor Math vacío — parte superior con el campo LaTeX, parte inferior con la previsualización en vivo y un ejemplo de marcador de posición$

Los atajos de teclado que aparecen en la parte inferior — Del: delete · Arrows: move · Esc: deselect — indican lo que puedes hacer mientras el editor está abierto.

3. Escribe LaTeX

Escribe una expresión real. Empieza por la clásica:

E = mc^2

Mientras escribes, el panel inferior se actualiza al instante. No hay botón de «renderizar» — cada tecla refresca la previsualización:

$Editor Math con E = mc^2 en el campo de entrada y el renderizado KaTeX correspondiente abajo$

Ahora prueba algo más elaborado. Borra el campo y escribe la fórmula cuadrática:

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

\frac, \sqrt, \pm y ^ se renderizan exactamente igual que en un artículo impreso:

$Editor Math con la fórmula cuadrática — fracción, raíz cuadrada y ± renderizados en la previsualización$

La herramienta Math admite todo el vocabulario de KaTeX, además de la extensión mhchem para química — consulta la referencia de Math para el catálogo completo.

4. Confirma: pulsa Esc

Pulsa Esc (o haz clic fuera del editor) para terminar la edición. El campo de texto desaparece y solo queda la ecuación renderizada en el lienzo, ajustada al tamaño del contenido:

$Ecuación confirmada en el lienzo — solo se muestra la fórmula renderizada, con un recuadro de selección alrededor$

El contorno azul es simplemente el recuadro de selección. Haz clic en un área vacía para deseleccionar.

Para volver a editar, haz doble clic sobre la ecuación. El editor se reabre con el código LaTeX original — drawtonomy guarda la fuente, no solo la imagen renderizada, por lo que cada ecuación queda editable de forma permanente.

5. Color y tamaño

Con la ecuación seleccionada, abre el panel Math (LaTeX) en la esquina superior derecha:

Color — haz clic en cualquier muestra para cambiar el color (negro apto para impresión, grises, rojo/naranja/amarillo/verde/azul/morado). Para tonos específicos de marca, haz clic en More… para abrir la paleta completa.
Size — arrastra el control deslizante de 8 px (tamaño de nota al pie) a 200 px (titular de cartel). Toda la ecuación escala proporcionalmente.

Pon el color en rojo y el tamaño en 60 px:

$La misma ecuación en rojo a 60 px, con el panel Math (LaTeX) mostrando la muestra de color rojo seleccionada y el deslizador a 60 px$

6. Exportar

Cuando la ecuación tenga el aspecto deseado, expórtala desde Menu → Export:

Formato	Mejor para
SVG	LaTeX (`\includegraphics`), Notion, sitios web, diapositivas. Vectorial, escala sin pérdida.
PNG	Entornos donde SVG no es compatible (Word, algunas aplicaciones de mensajería).
PDF	Proyectos LaTeX que requieren figuras en PDF. El texto se convierte en trazados, sin dependencias de fuentes.
EPS	Cadenas LaTeX antiguas (`latex` + `dvips`). También convierte a trazados.
.drawtonomy.svg	Formato nativo de drawtonomy. Un SVG estándar que puedes reabrir en drawtonomy para editar el código LaTeX.

Para el uso diario, SVG y PNG cubren casi todo. Para artículos LaTeX, PDF es la opción más predecible.

Qué más puede hacer la herramienta Math

Un recorrido rápido por el resto de funciones:

Química (mhchem) — \ce{2 H2 + O2 -> 2 H2O} se renderiza con la flecha de reacción correcta.

$Ecuación de química mhchem en la previsualización en vivo$
Sistemas multilínea con ecuaciones numeradas — encierra los bloques en \begin{align} ... \end{align} para obtener numeración de ecuaciones al estilo de artículo. Los cuerpos de las ecuaciones y las etiquetas (1)(2)(3) nunca se solapan, ni siquiera a tamaños grandes.

$Ecuaciones de Maxwell renderizadas como entorno align con números de ecuación (1)–(4)$
Ecuaciones largas — el campo de texto hace saltos de línea y el panel de previsualización tiene scroll, así que incluso derivaciones de media página siguen siendo editables.
Cmd+A y luego Delete — selecciona todas las formas del lienzo (incluidas las matemáticas) y las borra.
Arrastrar el editor — mientras editas, haz clic y arrastra (umbral de 5 px) para mover el editor sin perder el cursor.
Deshacer / Rehacer — Cmd+Z / Cmd+Shift+Z. Los cambios de color y tamaño son pasos de deshacer individuales; arrastrar el deslizador de tamaño se agrupa en un solo paso.