Онлайн mermaid редактор, визуално и код на едно място

Повечето mermaid редактори ви дават текстово поле и преглед. Този дава и платно: кликнете, за да добавите блок, влачете стрелка, групирайте нещата в области — а mermaid кодът се пише сам. Превключете към раздела за код и го редактирайте на ръка; платното следва промените.

  • Изобразява се докато пишете

    Истинският mermaid двигател, преизчертан няколкостотин милисекунди след последното ви натискане на клавиш.

  • Код и платно в синхрон

    Редактирайте всяка от двете страни. Другата се обновява — без копиране между два инструмента.

  • 14 форми на възел

    Правоъгълник, заоблен, хапче, кръг, ромб, база данни, шестоъгълник и още — по едно кликване.

  • Безплатно и без регистрация

    Без пробен период и без воден знак — редакторът се отваря веднага. Влезте само ако искате повече от една схема.

Платно, а не само текстово поле

Визуалният раздел е истински редактор върху изобразената диаграма: кликнете върху възел, за да го изберете, двойно кликване за преименуване на място, влачене навсякъде за преместване на изгледа.

  • Изграждайте с кликДобавете блок, насочете стрелка към друг, добавете етикет на стрелката. Без синтаксис за учене преди да започнете.

  • Изберете формаЧетиринадесет форми за mermaid flowchart — ромбове за решения, цилиндри за база данни, подпроцедури — от един избор.

  • Оцветете каквото искатеОсем готови палитри плюс избор на цвят, приложими за отделен възел или за цяла област.

Mermaid код, който остава ваш

Текстовият раздел е чист mermaid — същият синтаксис, който GitHub, GitLab, Notion и Obsidian вече изобразяват. Нищо тук не е собствен формат.

  • Пишете на ръкаВъведете mermaid директно и гледайте как се изобразява. Шест готови примера, от които да тръгнете.

  • Двупосочна връзкаFlowchart диаграми, които поставите, се разчитат обратно върху платното — възли, форми, цветове, подграфи и всичко останало.

  • Всеки вид диаграмаFlowchart, sequence, class, state, ER, gantt, git graph, pie — прегледът изобразява всичко, поддържано от mermaid.

Големите диаграми остават четими

Диаграмите на архитектура бързо надрастват един екран. Преместване, мащабиране и групиране са създадени точно за това, вместо да пречат.

  • Области и вложеностГрупирайте блокове в подграфи, вложете област в друга, преместете цяло поддърво с едно движение.

  • Мащаб от 2% до 1600%Превъртете за преместване, ctrl + превъртане за мащаб, или центрирайте наново с един бутон.

  • Записва се докато работитеСхемата ви се запазва автоматично в браузъра, докато редактирате. Ако влезете, тя се запазва в акаунта ви и ви следва на всяко устройство.

Изнесете и продължете напред

Нищо не е заключено. Вземете картината, вземете изходния код, или вземете Markdown блок, готов за поставяне в документ.

  • Без платена версияВсяка функция, включително износ, е безплатна. Няма платен план за надграждане.

  • Отрисва се в браузъра виРендирането става в браузъра ви; без акаунт схемата изобщо не го напуска, а с акаунт запазеният документ ви следва на всяко устройство.

  • SVG, PNG, .mmd, .mdКопирайте SVG markup, изтеглете PNG в 2x, запазете mermaid изходния код, или вземете Markdown блок.

Как се сравнява с обичайните варианти

Инструментите за диаграми чрез код изискват всичко да се пише на ръка. Инструментите за влачене и пускане дават картина, която не можете да сравните версия срещу версия. Този не избира страна.

Първи стъпки

IQ Mermaid: Двойно кликнете върху платното и се появява възел. Синтаксисът може да се научи по-късно, или никога.

Обичайният инструмент: Първо прочетете справочника по синтаксис, или приемете инструмент за рисуване без никакво текстово представяне.

Изходният формат

IQ Mermaid: Чист mermaid — същият текст, който GitHub, GitLab и Notion изобразяват нативно.

Обичайният инструмент: Собствен файлов формат, който се отваря само в инструмента, който го е създал.

Редактиране по-късно

IQ Mermaid: Променете кода или преместете блоковете. И двете посоки работят върху една и съща диаграма.

Обичайният инструмент: Само една посока: инструментите на базата на код нямат платно, инструментите на базата на платно нямат изходен код.

Цена

IQ Mermaid: Безплатно — дори без имейл.

Обичайният инструмент: Безплатен план, ограничен до няколко диаграми, с износ или съвместна работа зад абонамент.

Къде се съхраняват данните

IQ Mermaid: В браузъра ви или в акаунта ви, ако искате да ви следва на всяко устройство.

Обичайният инструмент: Акаунт на нечий сървър, с прикачени към него диаграми.

Въпроси за mermaid редактора

За начало е достатъчно да отворите страницата.

Какво е mermaid?

Mermaid е текстов синтаксис за диаграми: описвате възли и стрелки в няколко реда, а рендерер рисува картината. GitHub, GitLab, Notion и Obsidian го изобразяват в Markdown, така че mermaid блок остава четим в pull request или уики страница.

Наистина ли този mermaid редактор е безплатен?

Да. Всички функции, включително експортът към SVG и PNG, са безплатни и можете да използвате редактора, без да създавате каквото и да е. Незадължителен безплатен акаунт добавя още запазени схеми и синхронизация между устройства — няма платен план и нищо не е задържано.

Нужно ли е да знам синтаксиса на mermaid?

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

Кои видове диаграми се поддържат?

Разделът за код изобразява всичко, което mermaid поддържа — flowchart, sequence, class, state, entity relationship, gantt, git graph, pie и още. Визуалното платно редактира конкретно flowchart диаграми, а те са повечето от диаграмите изобщо.

Мога ли да изнеса към PNG или SVG?

Да. Копирайте SVG markup в клипборда, изтеглете SVG файл, или изтеглете PNG, изобразен в 2x за презентации и документи. Можете също да запазите mermaid изходния код като .mmd или като Markdown блок.

Къде се съхранява моята диаграма?

Без акаунт единствената ви схема се пази в браузъра, така че е там, когато се върнете на същото устройство. Ако влезете, тя се пази в акаунта ви и може да ви следва на друго устройство. Експортирайте източника, ако искате собствено копие.

Мога ли да поставя вече съществуваща mermaid диаграма?

Да. Поставете я в раздела за код; flowchart се разчита обратно върху визуалното платно с непокътнати възли, форми, цветове и подграфи. Другите видове диаграми се изобразяват в прегледа, но остават само код.

Работи ли офлайн?

Рендерирането става изцяло в браузъра, така че след зареждане редакторът работи и без връзка.

Отворете редактора. Безплатно — без регистрация.

Празно платно, раздел за код и всяка опция за износ — безплатно, в браузъра ви, точно сега.