Перейти до основного вмісту
LibraTool logoLibraTool

Редактор діаграм Mermaid — безкоштовно

Створюйте блок-схеми, діаграми послідовності, діаграми Ганта та інше у синтаксисі Mermaid із живим попереднім переглядом. Експортуйте як SVG або PNG. Повністю у вашому браузері.

💡 Створюйте діаграми синтаксисом Mermaid — блок-схеми, діаграми послідовності, діаграми Ганта, діаграми класів та інші — і експортуйте їх у SVG чи PNG. Усе працює у вашому браузері: текст діаграми ніколи не вивантажується, а рушій Mermaid постачається з цього сайту, а не зі сторонньої CDN.

Типові застосування

  • Створіть Блок-схемуСтворіть блок-схему з тексту та експортуйте її як зображення.
  • Намалюйте Діаграму ПослідовностіДіаграма того, як системи або люди взаємодіють з часом.
  • Додайте Діаграму до READMEСтворіть діаграми, які GitHub рендерить нативно у вашому README.
  • Побудуйте Діаграму ГантаВстановіть часову шкалу проекту як діаграму Ганта з тексту.
  • Створіть Діаграму КласуДіаграма класів та їх взаємозв'язків для дизайну програмного забезпечення.

Як це працює

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

  1. 1
    Модуль Mermaid завантажується
    Бібліотека Mermaid завантажується з LibraTool під час першого використання інструмента, а потім браузер кешує її.
  2. 2
    Ви пишете код діаграми
    Блок-схеми, діаграми послідовності, діаграми Ганта, діаграми класів, кругові діаграми та інше — використовуючи текстовий синтаксис Mermaid.
  3. 3
    Вона відображається наживо
    Ваш код аналізується й рендериться в SVG у вашому браузері під час введення, зі світлою та темною темами.
  4. 4
    Експортуйте SVG чи PNG
    Завантажте діаграму як масштабований SVG або PNG 2×, щоб вставити в документи, слайди чи README.

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

Схожі інструменти

📝

Редактор Markdown

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

Спробувати
🟦

Генератор CSS Grid

Візуально розробіть CSS grid — доріжки, одиниці та проміжки — та скопіюйте згенеровані CSS і HTML.

Спробувати
🌳

Генератор ASCII-дерева

Перетворіть список із відступами на чисте дерево папок (├── └──) для README та документації. Виведення Unicode або звичайного ASCII. Повністю у вашому браузері.

Спробувати

Часті запитання