Mermaid-редактор онлайн: діаграми просто в Markdown

З Mermaid кілька рядків тексту перетворюються на діаграму. Markdown Preview Editor працює як Mermaid-редактор із живим переглядом: ви пишете код діаграми в Markdown-документі, а перегляд малює її під час набору. На відміну від окремої програми для діаграм, тут діаграма живе разом із текстом навколо неї, тож технічний опис, README чи план уроку лишаються в одному файлі.

Що таке діаграма Mermaid?

Діаграма Mermaid — це схема, описана звичайним текстом. Ви не перетягуєте блоки й стрілки, а пишете рядки на кшталт A --> B, і Mermaid сам розміщує елементи. Підтримуються блок-схеми, діаграми послідовностей, діаграми Ганта, діаграми станів і класів, кругові діаграми, ментальні карти та інше.

Оскільки діаграма — це текст, її легко змінювати, зберігати в системі контролю версій і бачити зміни в diff. GitHub, GitLab, Obsidian і багато інструментів для документації відображають Mermaid, тож той самий код працює скрізь.

Як намалювати діаграму

1. Відкрийте редактор. Перейдіть в онлайн-редактор.
2. Додайте блок Mermaid. Наберіть три зворотні апострофи й слово mermaid або вставте шаблон кнопкою Діаграма Mermaid у рядку Розширений редактор на панелі інструментів.
3. Опишіть діаграму. Перегляд праворуч перемальовує її під час набору, тож пропущену стрілку чи дужку видно одразу.
4. Збережіть або поділіться. Збережіть документ як .md, експортуйте в HTML або надрукуйте в PDF — діаграми потраплять і туди.

Ось перша блок-схема:

markdown```mermaid
flowchart LR
  A[Ідея] --> B{Чи варто?}
  B -- так --> C[Робимо]
  B -- ні --> D[Відкладаємо]
```

Які діаграми можна малювати

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

Чому варто спробувати

• Живий перегляд. Діаграма оновлюється під час набору, а синтаксичні помилки видно одразу.
• Текст і діаграми разом. Пояснення, формули й блок-схема — в одному Markdown-файлі.
• Приватність. Діаграми малюються у вашому браузері. Ваш код не надсилається на сервер.
• Безкоштовно й з відкритим кодом. Без акаунта й без обмежень на кількість діаграм.

Обмеження

• Окремо завантажити одну діаграму як PNG чи SVG не можна. Діаграми експортуються як частина документа — в HTML і в PDF. Якщо потрібне окреме зображення, його можна експортувати офіційними інструментами Mermaid.
• Можливості власних тем і стилів для окремих вузлів обмежені: діаграми мають охайний стандартний вигляд, що відповідає світлій або темній темі.
• Діаграми пишуться кодом; візуального редагування перетягуванням немає.

Хочете переглянути готовий Markdown-файл із діаграмами? Скористайтеся переглядом .md-файлів або поверніться на головну сторінку Markdown-редактора.