Mermaid Editor

Mermaid едитор онлајн, визуел и код на једном месту

Већина mermaid едитора даје само текстуално поље и преглед. Овај нуди и платно: кликните да додате блок, повуците стрелицу, груписати елементе у област — а mermaid код се пише сам. Пребаците се на картицу кода и уредите га ручно — платно ће пратити измене.

  • Рендерује се док куцате

    Прави mermaid механизам поново исцртава дијаграм неколико стотина милисекунди након последњег тастера.

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

    Уредите било коју страну — друга сама прати измене, без копирања између два алата.

  • 14 облика чворова

    Правоугаоник, заобљени, пилула, круг, ромб, база података, шестоугао и остали — сваки у један клик.

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

    Без пробног периода и воденог жига — уређивач се отвара одмах. Пријавите се само ако желите више од једног дијаграма.

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

Визуелна картица је прави едитор изнад приказаног дијаграма: кликните чвор да га изаберете, двоструко кликните да га преименујете на лицу места, превуците било где да померите платно.

  • Градите кликовимаДодајте блок, усмерите стрелицу ка другом, означите стрелицу. Нема синтаксе коју треба знати пре него што почнете.

  • Изаберите обликЧетрнаест облика flowchart дијаграма у mermaid-у — ромбови одлука, цилиндри база података, потпрограми — из једног бирача.

  • Обојите било штаОсам готових боја плус бирач боја, примењени на један чвор или на целу област.

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 код, преузмите PNG у 2x резолуцији, сачувајте mermaid изворни код или узмите Markdown блок.

Како се пореди са уобичајеним опцијама

Алати типа „дијаграм као код” траже да све пишете ручно. Алати типа превуци-и-испусти дају слику коју не можете упоредити кроз diff. Овај одбија да бира страну.

Почетак рада

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-у или на wiki страници.

Да ли је овај mermaid едитор заиста бесплатан?

Да. Све функције, укључујући извоз у SVG и PNG, су бесплатне и уређивач можете користити без да ишта креирате. Опциони бесплатни налог додаје више сачуваних дијаграма и синхронизацију између уређаја — плаћеног плана нема и ништа није ускраћено.

Да ли морам да знам mermaid синтаксу?

Не. Почните на визуелној картици: двоструко кликните на платно да додате блок, изаберите га и повуците стрелицу до другог. Mermaid код се генерише сам, а можете га прочитати кад год пожелите да научите синтаксу.

Који типови дијаграма су подржани?

Картица кода приказује све што mermaid подржава — flowchart, sequence, class, state, entity relationship, gantt, git graph, pie и још тога. Визуелно платно уређује конкретно flowchart дијаграме, а то су највећи део свих дијаграма.

Могу ли да извезем у PNG или SVG?

Да. Копирајте SVG код у клипборд, преузмите SVG фајл или преузмите PNG рендерован у 2x резолуцији за презентације и документе. Такође можете сачувати mermaid изворни код као .mmd или као Markdown блок.

Где се чува мој дијаграм?

Без налога, ваш једини дијаграм се чува у прегледачу, па је тамо кад се вратите на исти уређај. Ако се пријавите, чува се на вашем налогу и може вас пратити на други уређај. Извезите извор ако желите сопствену копију.

Могу ли да налепим постојећи mermaid дијаграм?

Да. Налепите га у картицу кода; flowchart се рашчлањује назад на визуелно платно са свим чворовима, облицима, бојама и подграфовима нетакнутим. Остали типови дијаграма се приказују у прегледу, али остају само код.

Да ли ради офлајн?

Рендеровање се у потпуности дешава у прегледачу, па након учитавања уређивач ради и без везе.

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

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