PlantUML описывает диаграмму текстом: участники, классы, шаги — а раскладку, стрелки и отступы рисует сам. Такие диаграммы легко править, сравнивать по версиям и хранить рядом с документацией.
Как начать
- Откройте песочницу PlantUML.
- Выберите шаблон: Файл → Примеры — диаграммы последовательности, вариантов использования, классов, активности, состояний, компонентов, ER-диаграмма и интеллект-карта.
- Правьте код слева — диаграмма справа перерисовывается через мгновение после остановки ввода.
Работа с холстом
- Колесо мыши — масштаб, перетаскивание — сдвиг; кнопки справа внизу — масштаб и «вписать в окно».
- Щелчок по элементу диаграммы переводит к строке кода, которая его описывает, а элементы строки под курсором подсвечиваются на диаграмме.
- Ссылки
[[https://… текст]]на диаграмме кликабельны и открываются в новой вкладке. - Если в коде ошибка, она подсвечивается в строке, а справа остаётся последняя удачная версия диаграммы.
Экспорт
Файл → Скачать: код PlantUML (.puml), изображение SVG (масштабируется без потери качества — лучший вариант для документации) или PNG.
Стандартная библиотека и ограничения
- Подключения из стандартной библиотеки PlantUML работают:
!include <C4/C4_Container>,<aws/common>,<tupadr3/font-awesome/server>и другие — см. «C4-диаграммы в PlantUML». - Загрузка по сетевому адресу (
!include https://…) и чтение файлов сервера запрещены из соображений безопасности — редактор подскажет использовать стандартную библиотеку. - Диаграммы рисуются на сервере; при очень частых запросах сервер может попросить немного подождать.
Где ещё рисуется PlantUML
В редакторах Markdown и AsciiDoc блоки ```plantuml и [plantuml] рисуются прямо в предпросмотре — диаграммы можно держать внутри документации.
Вопросы и ответы
Нужно ли устанавливать Java и Graphviz, как для локального PlantUML? Нет, диаграммы рисует сервер — достаточно браузера.
Можно ли сделать тёмную диаграмму? Холст подстраивается под тему сайта; для своей палитры используйте skinparam или темы PlantUML (!theme plain, !theme cerulean и другие встроенные).
Есть ли подсказки при наборе? Синтаксис подсвечивается; на тарифах «Макс» и выше можно включить ИИ-подсказки — продолжение кода появляется серым текстом, Tab принимает его.
Как хранить диаграммы вместе с документацией? Сохраните диаграмму в проект рядом с документами или вставьте код блоком ```plantuml прямо в Markdown-документ.