Холст для совместной работы
Иногда задачу проще объяснить визуально, показать, как устроен процесс или отметить нужное место на макете, чем долго рассказывать словами.
Для этого в Shtab есть Холст. На нем можно размещать изображения, карточки задач и заметки, рисовать, добавлять текст и соединять элементы между собой.

При этом в холсте могут одновременно работать несколько человек. Все изменения сохраняются автоматически и будут отображаться у участников в реальном времени.
В этой статье расскажем о том, как создать холст и работать с ним.
Как создать холст
Вы можете создать холст отдельным пространством, для этого нажмите на кнопку + Создать в списке проектов, выберите Холст и введите его название.

Но можно также добавить холст в существующий проект, для этого нажмите + в панели вкладок и выберите Холст. В таком случае вкладка автоматически будет называться Холст, но потом это можно изменить.

Как устроен холст
После создания откроется пустой холст. Здесь вы будете размещать изображения, заметки, задачи и схемы.

Сверху находится панель инструментов для добавления и редактирования элементов.

Слева внизу — управление масштабом и кнопки отмены и повтора действия.

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

Для перемещения по холсту лучше всего использовать мышь:
- Левый клик по элементу выделит его для настройки или изменения размера.
- Правый клик откроет контекстное меню элемента. Если нажать на свободное место, откроется меню самого холста.
- Зажмите колесико мыши и перетаскивайте, чтобы перемещаться по холсту. Также можно использовать инструмент Рука или удерживать пробел во время перетаскивания.
- Прокручивайте колесико, чтобы перемещаться по вертикали вверх или вниз.
- Shift + колесико перемещает холст по горизонтали влево или вправо.
- Ctrl + колесико увеличивает или уменьшает масштаб.
Теперь можно добавить первые элементы. Разберем, какие инструменты для этого есть в верхней панели.
Панель инструментов
В верхней панели можно выбрать, что вы хотите добавить на холст.
| Инструмент | Что делает |
|---|---|
| Выделение | Выбирает элемент для настройки и изменения размера |
| Прямоугольник | Добавляет прямоугольную фигуру |
| Ромб | Добавляет ромб |
| Эллипс | Добавляет круглую или овальную фигуру |
| Стрелка | Показывает направление или связь между элементами |
| Линия | Добавляет линию |
| Рисование | Позволяет рисовать от руки |
| Текст | Добавляет надпись |
| Изображение | Позволяет вставить изображение |
| Ластик | Стирает элементы на холсте |
Выбирать инструменты можно кликом или с клавиатуры. Цифры рядом с иконками — их горячие клавиши.
Фигуры, линии и стрелки
Из фигур можно собрать схему процесса: прямоугольниками обозначить шаги, ромбом — вопрос или условие, а стрелками показать, что происходит дальше.

При выборе инструмента слева появляется панель настроек. Чтобы изменить уже добавленный элемент, выберите его инструментом Выделение.

Набор настроек зависит от самого элемента. Для фигур, например, можно изменить цвет обводки и фона, заливку, толщину штриха, стиль обводки, неровность линий и форму краев.
Цвет обводки и фона можно выбрать из палитры, подобрать оттенок или указать шестнадцатеричный код.

Если один элемент перекрывает другой, используйте настройки слоев. Объект можно переместить на один слой выше или ниже, либо сразу на передний или задний план.

Текст
Чтобы добавить текст на холст, нажмите на инструмент Текст, а затем кликните на холсте в том месте, где нужна надпись. Другой способ — дважды кликнуть по свободному месту, когда выбран инструмент выделения.

В настройках слева можно изменить цвет, семейство и размер шрифта, выравнивание и непрозрачность.
Изображения и пометки
Чтобы добавить изображение, выберите соответствующий инструмент в верхней панели.

Разместите на холсте макет или скриншот, а затем обведите нужную область, укажите на нее стрелкой или оставьте текст рядом. Например, на карте можно отметить вход в здание, а на макете страницы — место для нового блока.
Заметки и карточки задач
В правом нижнем углу находятся кнопки добавления заметки и карточки задачи.
Нажмите на +, чтобы создать заметку. В ней удобно оставить вопрос, предложение или короткое пояснение к любым материалам на холсте.

Чтобы добавить карточку задачи, нажмите иконку карточки рядом с плюсом и выберите ее из списка. Это нужно только для добавления контекста в обсуждения, саму задачу из холста открыть не получится, но будет удобно добавить все связанные карточки, чтобы в дальнейшем понимать, что к чему относится на холсте.
Дополнительные инструменты
Нажмите последнюю иконку справа в панели инструментов. Здесь можно добавить фрейм, встроить сайт, включить лазерную указку или перенести схему из Mermaid.

- Фрейм — отдельная область холста для размещения схемы или нескольких связанных элементов.
- Встраивание сайта добавит веб-страницу прямо на холст.
- Лазерная указка позволяет указывать на элементы и участки холста во время совместной работы.
Из Mermaid в Shtab
Mermaid — способ описать схему текстом. Вместо того чтобы вручную добавлять каждый блок и соединять его стрелками, можно задать элементы и связи в коде, а затем перенести готовую схему на холст.
Выберите Из Mermaid в Shtab. В открывшемся окне слева вставьте код в поле Синтаксис Mermaid, а справа появится предпросмотр контента.

Сейчас поддерживаются три типа диаграмм:
- Блок-схемы — для последовательности действий, условий и вариантов развития процесса.
- Диаграммы последовательностей — чтобы показать, кто с кем взаимодействует и в каком порядке.
- Диаграммы классов — для описания структуры классов и связей между ними.
По ссылкам можно посмотреть правила написания и примеры. Остальные типы диаграмм добавляются в Shtab как изображения.
Чтобы добавить схему в холст, нажмите на кнопку Вставить (или Ctrl + Enter).
Горячие клавиши
Выбор инструментов
Буквенные клавиши указаны в английской раскладке. Если для инструмента есть цифровая клавиша, можно использовать ее.
| Действие | Клавиша | |
|---|---|---|
| Выделить элемент для настройки или изменения размера | V или 1 | |
| Включить «Руку» для перемещения по холсту | H | |
| Нарисовать прямоугольник | R или 2 | |
| Нарисовать ромб | D или 3 | |
| Нарисовать эллипс | O или 4 | |
| Нарисовать стрелку | A или 5 | |
| Нарисовать линию | L или 6 | |
| Рисовать от руки | P или 7 | |
| Добавить текст | T или 8 | |
| Добавить изображение | 9 | |
| Включить ластик | E или 0 | |
| Включить инструмент «Фрейм» | F | |
| Включить лазерную указку | K | |
| Взять образец цвета | I |
Работа с объектами
Для действий с отдельными объектами сначала выделите их.
| Действие | Сочетание |
|---|---|
| Копировать | Ctrl + C |
| Вставить | Ctrl + V |
| Вырезать | Ctrl + X |
| Выделить все объекты | Ctrl + A |
| Дублировать выделенные объекты | Ctrl + D |
| Удалить выделенные объекты | Delete |
| Сгруппировать выделенные объекты | Ctrl + G |
| Разгруппировать | Ctrl + Shift + G |
| Переместить на передний план | Ctrl + Shift + ] |
| Переместить на задний план | Ctrl + Shift + [ |
| Отменить последнее действие | Ctrl + Z |
| Повторить отменённое действие | Ctrl + Shift + Z |
| Редактировать текст или метку выбранного элемента | Enter |
Вид и навигация
| Действие | Сочетание |
|---|---|
| Увеличить масштаб | Ctrl + + |
| Уменьшить масштаб | Ctrl + − |
| Сбросить масштаб | Ctrl + 0 |
| Вписать содержимое холста в экран | Shift + 1 |
| Показать или скрыть сетку | Ctrl + ' |
| Переключить режим «Дзен» | Alt + Z |
| Переключить привязку к объектам | Alt + S |
| Открыть поиск на холсте | Ctrl + F |
По любым вопросам будем рады вам помочь в нашей поддержке.