Схемы Mermaid онлайн
Пишете код Mermaid или двигаете блоки на холсте. Блок-схема, последовательность, классы, Гант и майндкарта. Готовый рисунок — PNG, SVG или HTML.
Как писать код и рисовать блок-схемы, последовательность, Гант и другие виды
Нужен только файл, без редактора
Если код Mermaid уже готов и нужен только файл — откройте конвертер.
Зачем этот инструмент
Студия понимает flowchart, sequence, class, ER, state, диаграмму Ганта и майндкарту. Шаблоны подставляют рабочий пример, кнопка «Обучение» разбирает, как писать каждый тип. На холсте удобнее всего блок-схема; остальные виды проще править в коде.
Поле «Название» задаёт имя в «Списке схем». Текст запоминается в этом браузере сам, до двадцати набросков. Кнопка «Сохранить» скачивает файл: PNG для чата и слайда, SVG для сайта, HTML если нужна одна страница. Сервер текст диаграммы не видит.
Как пользоваться
- Откройте студию: слева код Mermaid, справа холст. Нужен один вид — переключите на «Код» или «Холст».
- Возьмите шаблон, откройте «Обучение» или вставьте свой код. Новая схема — в «Списке схем», имя — в поле «Название».
- Поправьте подписи и связи на холсте либо в тексте Mermaid.
- Нажмите «Сохранить» или Ctrl+S: скачайте PNG, SVG или HTML либо скопируйте картинку или код.
Ограничения
- Сложные диаграммы и редкий синтаксис Mermaid зависят от движка в браузере и могут не отрисоваться.
- Холст сильнее всего заточен под flowchart. Для Ганта, круговой и майндкарты удобнее код.
- Экспорт PNG — растр с белым фоном. Для сайта берите SVG.
- «Список схем» живёт только в этом браузере. Очистка данных сайта удалит наброски. Между устройствами они не синхронизируются.
Частые вопросы
Что такое Mermaid?
Язык схем текстом. Вы описываете блоки и стрелки строками, а редактор рисует диаграмму. На FileON это блок-схема, последовательность, классы, связи таблиц, состояния, Гант и майндкарта.
Что такое редактор Mermaid на FileON?
Студия в браузере: код Mermaid слева, холст справа. Несколько схем лежат в списке этого браузера, готовый рисунок скачивается как SVG, HTML или PNG.
Можно ли править схему мышкой, а не только кодом?
Да. По умолчанию открыта студия. На холсте — выделение, связь, блок, отмена. Дублирование и удаление — клавиши D и Del или панель на блоке. Эти клавиши работают и на русской раскладке. Как писать разные диаграммы — кнопка «Обучение».
Как сохранить схему Mermaid картинкой?
Кнопка «Сохранить» или Ctrl+S: скачать PNG или скопировать картинку. Для сайта лучше SVG — он остаётся чётким при любом масштабе. Имя файла берётся из поля «Название».
Где хранятся мои схемы и как их назвать?
В «Списке схем» этого браузера, до двадцати штук. Имя пишется в поле «Название» рядом со списком. Текст запоминается сам. Сервер FileON схемы не получает. Другой компьютер или очистка данных сайта набор не увидит — для архива скачайте файл.
Как нарисовать блок-схему Mermaid без программы?
Откройте эту страницу, возьмите шаблон блок-схемы или вставьте свой код Mermaid. Блоки и стрелки правятся на холсте. Картинку скачиваете кнопкой «Сохранить».
Схема уходит на сервер?
Нет. Код Mermaid, холст и список схем живут во вкладке. Сервер не получает текст диаграммы.
Как дублировать или удалить блок на холсте?
Выделите блок и откройте панель на нём — там «Дублировать» и «Удалить». С клавиатуры: D и Delete, в том числе на русской раскладке.