Към основното съдържание
LibraTool logoLibraTool

Редактор на Mermaid диаграми — безплатно

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

💡 Пишете диаграми със синтаксиса на Mermaid — блок-схеми, секвенчни диаграми, диаграми на Гант, диаграми на класове и други — и ги експортирайте като SVG или PNG. Всичко се изпълнява в браузъра ви: текстът на диаграмата никога не се качва, а двигателят на Mermaid се зарежда от този сайт, а не от външен CDN.

Често срещани употреби

  • Направете блок-схемаСъздайте блок-схема от текст и я експортирайте като изображение.
  • Начертайте диаграма на последователностДиаграмирайте как системите или хората си общуват във времето.
  • Добавете диаграма в READMEСъздайте диаграми, които GitHub естествено показва в вашия README.
  • Направете диаграма на ГантПодредете графика на проекта като диаграма на Гант от текст.
  • Създайте диаграма на класаДиаграмирайте класовете и техните връзки за дизайн на софтуер.

Как работи

Mermaid позволява диаграми на текст и да бъдат изобразени автоматично — страхотни за запазване на диаграми в версия контрол. Това е жив редактор, който рендира докато типирате.

  1. 1
    Двигателя на Mermaid се зарежда
    Библиотеката Mermaid се зарежда от LibraTool при първото използване на инструмента, след което браузърът я кешира.
  2. 2
    Пишете код на диаграма
    Блок-диаграми, последователност диаграми, Gantt диаграми, клас диаграми, кръгови графики и много още — използвайки текст синтаксис на Mermaid.
  3. 3
    Рендира жив
    Кодът ви се анализира и изобразява към SVG в браузъра ви докато типирате, със светлина и тъмни теми.
  4. 4
    Експортирайте SVG или PNG
    Изтегляте диаграма като мащабируема SVG или 2× PNG, за да пуснете в документи, слайдове или README.

Кодът на диаграма ви — който може да описва вътрешни системи — се рендира изцяло в браузъра ви и никога не се качва.

Свързани инструменти

📝

Редактор на Markdown

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

Опитайте
🟦

CSS Grid генератор

Визуално проектирайте CSS мрежа — записи, единици и празнини — и копирайте генерирания CSS и HTML.

Опитайте
🌳

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

Превърнете наредена с отстъпи структура в чисто дърво от папки (├── └──) за README и документация. Изход с Unicode или чист ASCII. Работи изцяло в браузъра ви.

Опитайте

Често задавани въпроси