Mermaid Editor

Редактор діаграм Mermaid онлайн, візуально та кодом в одному місці

Більшість редакторів mermaid дають лише текстове поле і попередній перегляд. Цей ще й дає полотно: клацніть, щоб додати блок, перетягніть стрілку, згрупуйте елементи в області — і код mermaid напишеться сам. Перемкніться на вкладку коду й редагуйте вручну — полотно підлаштується.

  • Малює під час набору

    Справжній рушій mermaid перемальовує діаграму за кілька сотень мілісекунд після останнього натискання клавіші.

  • Код і полотно синхронізовані

    Редагуйте будь-яку сторону — інша підхопить зміни сама, без копіювання між двома інструментами.

  • 14 форм вузлів

    Прямокутник, заокруглений, пігулка, коло, ромб, база даних, шестикутник та інші — кожна в один клік.

  • Безкоштовно і без реєстрації

    Без пробного періоду й водяного знака — редактор відкривається одразу. Входьте лише якщо потрібно більше однієї схеми.

Полотно, а не просто текстове поле

Вкладка «Візуально» — це справжній редактор поверх відображеної діаграми: клацніть на вузол, щоб вибрати його, двічі клацніть, щоб перейменувати на місці, тягніть будь-де, щоб панорамувати.

  • Будуйте клікамиДодайте блок, спрямуйте стрілку на інший, підпишіть стрілку. Жодного синтаксису вчити перед початком не треба.

  • Виберіть формуЧотирнадцять форм для flowchart у mermaid — ромби рішень, циліндри баз даних, підпрограми — в одному селекторі.

  • Розфарбуйте будь-щоВісім готових пресетів плюс палітра кольорів — застосуйте до одного вузла або до цілої області.

Код Mermaid, який залишається вашим

Вкладка тексту — це звичайний mermaid, той самий синтаксис, який вже відображають GitHub, GitLab, Notion та Obsidian. Тут немає жодного закритого формату.

  • Пишіть вручнуВведіть mermaid напряму й дивіться, як він відображається. Шість готових прикладів для старту.

  • Працює в обидва бокиВставлені flowchart-діаграми розбираються назад на полотно — вузли, форми, кольори, підграфи, все разом.

  • Будь-який тип діаграмиFlowchart, sequence, class, state, ER, gantt, git graph, pie — попередній перегляд відображає все, що підтримує mermaid.

Великі діаграми лишаються читабельними

Архітектурні діаграми швидко переростають один екран. Панорамування, масштаб і групування створені саме для цього, а не всупереч цьому.

  • Області та вкладеністьГрупуйте блоки в підграфи, вкладайте область в область, переміщуйте цілу гілку одним жестом.

  • Масштаб від 2% до 1600%Прокручуйте, щоб панорамувати, ctrl+прокрутка — щоб масштабувати, або відцентруйте одним натисканням кнопки.

  • Зберігається на льотуСхема автоматично зберігається у браузері під час редагування. Якщо увійдете, вона зберігатиметься в акаунті й буде доступна на будь-якому пристрої.

Експортуйте й рухайтесь далі

Нічого не прив'язує вас. Заберіть картинку, заберіть вихідний код або готовий блок Markdown для вставки в документ.

  • Без платного доступуУсі функції, включно з експортом, безкоштовні. Немає платного тарифу, на який довелося б переходити.

  • Відображається у вашому браузеріВідображення відбувається у вашому браузері: без акаунта схема його не залишає, а з акаунтом збережений документ доступний на будь-якому пристрої.

  • SVG, PNG, .mmd, .mdСкопіюйте розмітку SVG, завантажте PNG у 2x, збережіть вихідний код mermaid або заберіть блок Markdown.

Як це виглядає порівняно з звичними варіантами

Інструменти «діаграма як код» змушують писати все вручну. Інструменти drag-and-drop дають картинку, яку не можна порівняти по діфу. Цей інструмент відмовляється обирати сторону.

Початок роботи

IQ Mermaid: Двічі клацніть на полотні — і з'явиться вузол. Синтаксис можна вивчити пізніше, або й ніколи.

Типовий інструмент: Спершу читайте довідник із синтаксису, або миріться з інструментом малювання без текстового представлення взагалі.

Формат результату

IQ Mermaid: Звичайний mermaid — той самий текст, який нативно відображають GitHub, GitLab і Notion.

Типовий інструмент: Закритий файл, який відкривається лише в інструменті, що його створив.

Редагування пізніше

IQ Mermaid: Змінюйте код або переміщуйте блоки. Обидва напрями працюють з однією й тією ж діаграмою.

Типовий інструмент: Лише один напрям: інструменти на основі коду не мають полотна, інструменти на основі полотна не мають вихідного коду.

Ціна

IQ Mermaid: Безкоштовно — навіть e-mail не потрібен.

Типовий інструмент: Безкоштовний тариф обмежений кількома діаграмами, а експорт чи спільна робота — за підпискою.

Де зберігаються дані

IQ Mermaid: У вашому браузері — або в акаунті, якщо хочете відкривати схему на будь-якому пристрої.

Типовий інструмент: Акаунт на чужому сервері, до якого прив'язані ваші діаграми.

Питання про редактор Mermaid

Щоб почати, достатньо відкрити сторінку.

Що таке mermaid?

Mermaid — це текстовий синтаксис для діаграм: ви описуєте вузли та стрілки кількома рядками, а рендерер малює зображення. GitHub, GitLab, Notion та Obsidian відображають його прямо в Markdown, тож блок mermaid лишається читабельним у pull request чи на сторінці вікі.

Цей редактор mermaid справді безкоштовний?

Так. Усі функції, зокрема експорт у SVG і PNG, безкоштовні, і редактором можна користуватися взагалі нічого не створюючи. Необов'язковий безкоштовний акаунт додає більше збережених схем і синхронізацію між пристроями — платних тарифів немає, нічого не приховано за оплатою.

Чи потрібно знати синтаксис mermaid?

Ні. Почніть із вкладки «Візуально»: двічі клацніть на полотні, щоб додати блок, виберіть його й намалюйте стрілку до іншого. Код mermaid генерується автоматично, і ви можете читати його, коли захочете вивчити синтаксис.

Які типи діаграм підтримуються?

Вкладка коду відображає все, що підтримує mermaid — flowchart, sequence, class, state, entity relationship, gantt, git graph, pie та інше. Візуальне полотно редагує саме flowchart, а це більшість діаграм.

Чи можу я експортувати у PNG або SVG?

Так. Скопіюйте розмітку SVG у буфер обміну, завантажте файл SVG, або завантажте PNG у 2x для слайдів і документів. Також можна зберегти вихідний код mermaid як .mmd або як блок Markdown.

Де зберігається моя діаграма?

Без акаунта єдина схема зберігається у вашому браузері й залишається там, коли ви повернетеся на тому самому пристрої. Якщо увійти, вона збережеться в акаунт і зможе відкриватися на іншому пристрої. Експортуйте вихідний код, якщо хочете власну копію.

Чи можу я вставити наявну діаграму mermaid?

Так. Вставте її на вкладку коду; flowchart розбирається назад на візуальне полотно зі збереженням вузлів, форм, кольорів і підграфів. Інші типи діаграм відображаються в попередньому перегляді, але залишаються лише кодом.

Чи працює це офлайн?

Рендеринг повністю відбувається у браузері, тому після завантаження редактор працює і без підключення.

Відкрийте редактор. Безкоштовно — без реєстрації.

Порожнє полотно, вкладка коду і всі варіанти експорту — безкоштовно, у вашому браузері, просто зараз.