У цій статті
Чому Mermaid — це інструмент створення діаграм для розробників
Технічна документація часто спирається на діаграми для пояснення архітектури системи, робочих процесів та потоків даних. Традиційні інструменти діаграмування вимагають перетягування фігур на полотні та експорту зображень, які важко контролювати версіями. Mermaid використовує інший підхід — ви описуєте діаграму простим текстовим синтаксисом, а рендерер створює чистий SVG, який може існувати поруч з вашим кодом у файлах Markdown, вікі та запитах на злиття.
Оскільки діаграми Mermaid — це звичайний текст, їх легко переглядати в дифах, зберігати в Git та автоматично перегенеровувати. Це робить їх ідеальними для документації, яка повинна розвиватися разом із кодовою базою. Інструмент попереднього перегляду в реальному часі дозволяє ітеративно працювати над синтаксисом діаграми, бачачи відрендерений результат під час введення, замість очікування етапу збірки або окремого застосунку.
Як використовувати інструмент попереднього перегляду Mermaid
Попередній перегляд Mermaid від CheckTown миттєво відображає код вашої діаграми, щоб ви могли проєктувати та налагоджувати діаграми, не залишаючи браузер.
- Введіть або вставте синтаксис Mermaid у редактор — попередній перегляд оновлюється в реальному часі при зміні коду
- Інструмент підтримує блок-схеми, діаграми послідовності, діаграми класів, діаграми станів, діаграми сутність-зв'язок, діаграми Ганта, кругові діаграми та інші
- Синтаксичні помилки виділяються з чіткими повідомленнями, щоб ви могли точно визначити та виправити проблеми негайно, замість здогадок про те, що пішло не так
- Експортуйте відрендерену діаграму як SVG або PNG для використання в презентаціях, документації або трекерах завдань
Спробуйте безкоштовно — реєстрація не потрібна
Відкрити попередній перегляд Mermaid →Найкращі практики для діаграм Mermaid
Кілька правил допоможуть зберегти ваші діаграми Mermaid читабельними та зручними для підтримки в міру зростання їх складності.
- Давайте вузлам описові ідентифікатори та мітки — використовуйте змістовні назви, такі як userService та authDB, замість загальних A та B, щоб вихідний код читався як документація
- Тримайте діаграми зосередженими на одній концепції — розділіть складну систему на кілька менших діаграм замість того, щоб утискувати все в одну нечитабельну схему
- Використовуйте підграфи для групування пов'язаних вузлів — це додає візуальну структуру та полегшує орієнтацію у великих діаграмах з першого погляду
Поширені запитання
Які типи діаграм Mermaid підтримуються?
Попередній перегляд підтримує всі основні типи діаграм Mermaid, включаючи блок-схеми, діаграми послідовності, діаграми класів, діаграми станів, діаграми сутність-зв'язок, діаграми Ганта, кругові діаграми, карти подорожей та діаграми вимог. Рендерер підтримується в актуальному стані відповідно до останніх випусків Mermaid.js.
Чи можу я вбудувати згенеровану діаграму в GitHub або GitLab?
Так. GitHub та GitLab обидва нативно відображають блоки коду Mermaid у файлах Markdown. Ви можете скопіювати синтаксис з редактора безпосередньо в огороджений блок коду у вашому README або вікі-сторінці. Інструмент попереднього перегляду корисний для ітеративної роботи над синтаксисом перед комітом у репозиторій.
Чи є обмеження на розмір діаграм?
Жорсткого обмеження на кількість символів немає. Проте надзвичайно великі діаграми з сотнями вузлів можуть повільно відображатися в браузері. Якщо ваша діаграма стає громіздкою, розгляньте можливість розділення її на менші зосереджені діаграми, кожна з яких описує одну частину системи.