Схемы · студия · несколько в браузере
Редактор схем Mermaid онлайн
Слева код, справа холст. Несколько схем остаются в этом браузере. Сохранить — PNG, SVG, HTML или копия в буфер.
Как писать код и рисовать блок-схемы, последовательность, Гант и другие виды
Нужен только файл, без редактора
Отдельные конвертеры, если схему уже написали и хотите сразу получить файл.
Слева код, справа холст. Несколько схем остаются в этом браузере. Сохранить — PNG, SVG, HTML или копия в буфер.
Зачем этот инструмент
Mermaid — это схемы текстом: блок-схема, последовательность, классы, ER, Гант, майндкарта. На FileON можно набрать код, взять шаблон или подвигать блоки мышкой. Это страница для запросов «редактор mermaid онлайн» и «схема mermaid в картинку», а не ещё одна песочница без экспорта.
Визуальный режим синхронизирует холст с кодом: двойной клик меняет подпись, «Связать» рисует стрелку, шаблоны подставляют рабочий пример. Кнопка «Обучение» разбирает, как писать разные типы диаграмм, не только жесты холста.
Готовую схему забираете кнопкой «Сохранить»: векторный SVG для сайта, HTML-страница или PNG для слайда и чата. Несколько набросков лежат в локальном хранилище браузера — сервер их не видит.
Как пользоваться
- Откройте студию: слева код, справа холст. Нужен один вид — переключите на «Код» или «Холст».
- Возьмите шаблон, откройте «Обучение» или вставьте свой flowchart. Новая схема — в «Мои схемы».
- Поправьте подписи и связи на холсте либо в тексте.
- Нажмите «Сохранить»: скачайте PNG, SVG или HTML либо скопируйте картинку или код.
Ограничения
- Сложные диаграммы и тяжёлые темы Mermaid зависят от движка в браузере: редкий синтаксис может не отрисоваться.
- Визуальный холст сильнее всего заточен под flowchart. Для Ганта, круговой и майндкарты удобнее код.
- Экспорт PNG — растр с белым фоном. Для сайта берите SVG.
- «Мои схемы» живут только в этом браузере. Очистка данных сайта их удалит. Между устройствами они не синхронизируются.
Частые вопросы
Что такое редактор Mermaid на FileON?
Это локальная студия: вы пишете схему текстом или правите её на холсте, храните несколько набросков в браузере и скачиваете SVG, HTML или PNG. Файл никуда не загружается.
Можно ли править схему мышкой, а не только кодом?
Да. По умолчанию открыта студия: код слева, холст справа. На холсте — выделение, связь, блок, отмена. Дублирование и удаление — с клавиатуры (D и Del) или во всплывающей панели на блоке. Как писать разные диаграммы — кнопка «Обучение».
Как сохранить схему Mermaid картинкой?
Кнопка «Сохранить» сверху студии: скачать PNG или скопировать картинку в буфер. Для сайта лучше SVG — он остаётся чётким при любом масштабе.
Где хранятся мои схемы?
В локальном хранилище этого браузера, до двадцати штук. Сервер FileON их не получает. Другой компьютер или очистка данных сайта набор не увидит — для архива скачайте файл.
Схема уходит на сервер?
Нет. Код, холст и библиотека живут во вкладке. Сервер не получает текст диаграммы.
Как дублировать или удалить блок на холсте?
Выделите блок и откройте всплывающую панель на нём — там «Дублировать» и «Удалить». С клавиатуры: D и Delete.