Перайсці да асноўнага зместу
LibraTool logoLibraTool

Рэдактар дыяграм Mermaid — бясплатна

Пішыце блок-схемы, дыяграмы паслядоўнасці, дыяграмы Ганта і іншае ў сінтаксісе Mermaid з жывым прагляданнем. Экспартуйце ў SVG або PNG. Працуе цалкам у вашым браўзеры.

💡 Пішыце дыяграмы на сінтаксісе Mermaid — блок-схемы, дыяграмы паслядоўнасці, дыяграмы Ганта, дыяграмы класаў і іншае — і экспартуйце ў SVG або PNG. Усё працуе ў вашым браўзеры: тэкст дыяграмы ніколі не адпраўляецца на сервер, а рухавік Mermaid загружаецца з гэтага сайта, а не са старонняга CDN.

Тыповыя выкарыстанні

  • Зрабіце блок-схемуСтварыце блок-схему з тэкста і экспартуйце яе як выяву.
  • Нарысуйце дыяграму паслядоўнасціДыяграміруйце, як сістэмы ці людзі ўзаемадзейнічаюць на працягу часу.
  • Дадайце дыяграму да READMEСтварыце дыяграмы, якія GitHub наўпака выкарыстоўвае у вашым README.
  • Пабудуйце дыяграму ГанттаВыклаліце шкалу часу праекта як дыяграму Гантта з тэкста.
  • Стварыце дыяграму класаДыяграміруйце классы і іх адносіны для дызайна праграмнага забеспячэння.

Як гэта працуе

Mermaid адпускаў вам пісаць дыяграмы як тэкст і мець яны рэндэрваны аўтаматычна — велічны для заступленне дыяграмаў ў версійны кантроль. Гэта ж'ёта рэдактар, якая рэндэрвае, пакуль вы пішаце.

  1. 1
    Модуль Mermaid загружаецца
    Бібліятэка Mermaid загружаецца з LibraTool пры першым выкарыстанні інструмента, а потым браўзер кэшуе яе.
  2. 2
    Вы пішаце дыяграма код
    Flowcharts, sequence дыяграмы, Gantt дыяграмы, class дыяграмы, pie дыяграмы і больш — выкарыстоўваючы Mermaid тэкставы сінтакс.
  3. 3
    Гэта рэндэрвана ж'ётая
    Ваш код парсіцца і рэндэрвана ў SVG у вашым браўзеры пакуль вы пішаце, з светлым і цёмным тэмамі.
  4. 4
    Экспортуйце SVG ці PNG
    Загрузіце дыяграма як масштабаваны SVG ці 2× PNG, каб адкінуць ў дакс, прэзентацыя, ці README.

Код вашай дыяграмы — які можа апісваць унутраныя сістэмы — рэндэрыцца цалкам у вашым браўзеры і ніколі не загружаецца.

Звязаныя інструменты

📝

Рэдактар Markdown

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

Паспрабуйце
🟦

Генератар CSS Grid

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

Паспрабуйце
🌳

Генератар дрэва ASCII

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

Паспрабуйце

Часта задаюць пытанні