Редактор діаграм Mermaid

Редагуйте локально та переглядайте в суворому безпечному режимі блок-схеми, діаграми послідовностей та інші діаграми Mermaid; можна завантажити SVG або PNG.

Локальна обробка в браузері
Цю сторінку перевірено за відкритим каталогом; після ввімкнення JavaScript можна користуватися повною функціональністю.
Посібник з використання

Як користуватися редактором діаграм Mermaid

Вихідний код діаграми аналізується та відтворюється лише в поточному браузері й не завантажується; засіб відтворення використовує суворий безпечний режим.

  1. Введіть вихідний код діаграми

    Вставте код Mermaid обсягом не більше 128 KiB і виберіть стандартну, нейтральну, лісову або темну тему.

  2. Відобразити та виправити

    Натисніть кнопку рендерингу, щоб переглянути ізольований попередній перегляд; синтаксичні помилки відображатимуть місце або відомості про розбір, щоб ви могли повернутися до вихідного коду й виправити їх.

  3. Завантажити діаграму

    Після підтвердження міток і з’єднань експортуйте безпечно очищений SVG або PNG.

Обмеження та зауваження

  • Підтримується лише версія синтаксису Mermaid, закріплена на цей момент у складі сайту; експериментальні функції, застарілий синтаксис і сторонні розширення можуть бути несумісними.
  • Суворий режим безпеки обмежує теги HTML, callback-функції натискання, зовнішні посилання та користувацькі скрипти, тому деякі розширені взаємодії не відображатимуться.
  • Для вихідного коду, кількості операторів, лексем, вузлів ланцюжка, кількості з’єднань і результату після рендерингу SVG встановлено безпечні верхні межі; експорт PNG також обмежений розміром полотна.

Поширені запитання

Чому команда click не запускається?

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

Що з SVG і PNG обрати?

SVG підходить для подальшого редагування та масштабування без втрат; PNG краще підходить для документів або соціальних платформ, які не підтримують SVG.

Чи зберігається діаграма автоматично?

Ні. Вихідний код зберігається лише в пам’яті поточної сторінки; перед виходом скопіюйте або завантажте його.

Відгук про сторінкуВиявили проблему або маєте пропозиції щодо покращення?
Функцію зворотного зв’язку потрібно використовувати в онлайн-версії

Будь ласка, увімкніть JavaScript в онлайн-версії, а потім надішліть; локальні функції поточного інструмента або прикладу не будуть зачеплені.

Перейти до онлайн-версії, щоб залишити відгук