Формула LaTeX прямо на холсте

В этом уроке вы освоите инструмент Math — иконка fx на панели инструментов. Вы введёте выражение на LaTeX, увидите, как KaTeX мгновенно отрисовывает его прямо под курсором, зададите цвет и размер, а затем экспортируете результат в SVG или PNG. Готовый файл можно вставить в рисунок к научной статье, слайд, страницу Notion или пост в блоге.

Инструмент Math входит в состав бесконечной доски drawtonomy, поэтому на том же холсте могут находиться полосы движения, транспортные средства и пешеходы — удобно, когда формула должна быть рядом с поясняемой схемой. Но это необязательно: на пустом холсте Math работает и как самостоятельный редактор формул.

1. Выберите инструмент Math

Откройте drawtonomy.com. На нижней панели инструментов нажмите иконку fx — она расположена между инструментами Text (T) и Freehand:

$Инструмент Math (fx) активен на нижней панели инструментов$

Подсказка: если вы предпочитаете клавиатуру, нажмите / — это шортскат в стиле Notion для переключения на инструмент Math.

2. Кликните туда, где должна быть формула

Нажмите в любом месте холста. drawtonomy открывает встроенный редактор прямо на холсте: верхняя половина — поле ввода LaTeX, нижняя — живой предпросмотр KaTeX. В качестве подсказки серым отображается квадратное уравнение.

$Пустой редактор Math — верхняя часть для ввода LaTeX-кода, нижняя — живой предпросмотр KaTeX с примером-заглушкой$

Подсказки клавиатуры внизу — Del: delete · Arrows: move · Esc: deselect — показывают доступные действия, пока редактор открыт.

3. Введите формулу на LaTeX

Попробуйте классику:

E = mc^2

Предпросмотр обновляется на каждый нажатый символ — кнопки «Применить» нет:

$Редактор Math с E = mc^2 в поле ввода и соответствующим рендером KaTeX внизу$

Теперь очистите поле и введите формулу дискриминанта:

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

Команды \frac, \sqrt, \pm и ^ отображаются точно так же, как в статье:

$Редактор Math с формулой квадратного уравнения — дробь, квадратный корень и ± отрисованы в предпросмотре$

Инструмент Math поддерживает полный словарь KaTeX, а также расширение mhchem для химии — полный перечень команд доступен в справочнике Math.

4. Завершите ввод: нажмите Esc

Нажмите Esc (или кликните вне редактора). Текстовое поле исчезает, на холсте остаётся только отрисованная формула, подогнанная под свой размер:

$Подтверждённая формула на холсте — отображается только готовая формула с рамкой выделения$

Синяя рамка — это просто выделение. Кликните на пустое место, чтобы снять его.

Чтобы отредактировать формулу, дважды кликните по ней. Редактор откроется с исходным LaTeX-кодом: drawtonomy хранит источник, а не только готовое изображение, поэтому любую формулу можно изменить в любой момент.

5. Цвет и размер

Выделите формулу и откройте панель Math (LaTeX) в правом верхнем углу:

Color — нажмите на цветной квадрат, чтобы изменить цвет. Доступны чёрный (подходит для печатных статей), оттенки серого, красный, оранжевый, жёлтый, зелёный, синий, фиолетовый. Для корпоративных цветов нажмите More…, чтобы открыть полную палитру.
Size — перетащите ползунок от 8 пикселей (размер сноски) до 200 пикселей (заголовок на постере). Формула масштабируется пропорционально.

Установите красный цвет и размер 60 пикселей:

$Та же формула в красном цвете, размер 60 пикселей — панель Math (LaTeX) показывает выбранный красный цвет и положение ползунка$

6. Экспорт

Когда формула готова, экспортируйте её через Menu → Export:

Формат	Подходит для
SVG	LaTeX (`\includegraphics`), Notion, сайты, слайды. Векторный формат, масштабируется без потерь.
PNG	Платформы, где SVG не поддерживается (Word, некоторые мессенджеры).
PDF	Сборка LaTeX, требующая PDF-иллюстраций. Текст переведён в контуры — без зависимостей от шрифтов.
EPS	Старые цепочки LaTeX (`latex` + `dvips`). Тоже с конвертацией в контуры.
.drawtonomy.svg	Нативный формат drawtonomy. Обычный SVG, который можно снова открыть в drawtonomy и отредактировать LaTeX-источник.

В большинстве случаев хватает SVG и PNG. Для научных статей в LaTeX предпочтительнее PDF — он наиболее предсказуем.

Что ещё умеет инструмент Math

Краткий обзор дополнительных возможностей:

Химические уравнения (mhchem) — \ce{2 H2 + O2 -> 2 H2O} отображается со стрелкой реакции в правильном формате.

$Химическое уравнение mhchem в живом предпросмотре$
Многострочные системы с нумерацией уравнений — оберните блоки в \begin{align} ... \end{align}, чтобы получить нумерацию в стиле статьи. Тела уравнений и метки (1)(2)(3) гарантированно не перекрываются даже при большом размере.

$Уравнения Максвелла в окружении align с номерами (1)–(4)$
Длинные формулы — текстовое поле переносит строки, а панель предпросмотра прокручивается, поэтому даже многострочные выкладки остаются удобными для редактирования.
Cmd+A, затем Delete — выделить все объекты на холсте (включая формулы) и очистить холст.
Перетащить поле ввода — во время редактирования зажмите и перетащите редактор (порог 5 пикселей), чтобы сдвинуть его, не теряя позицию курсора.
Undo / Redo — Cmd+Z / Cmd+Shift+Z. Изменения цвета и размера сохраняются как отдельные шаги отмены; перетаскивание ползунка размера складывается в один шаг.