Mermaid Editor

Nemokamas mermaid redaktorius internete, vizualus diagramų kūrimas ir kodas kartu

Dauguma mermaid redaktorių duoda tik teksto langelį ir peržiūrą. Šis papildomai duoda ir darbalaukį (canvas): spustelėk, kad pridėtum bloką, tempk rodyklę, grupuok elementus į sritis — o mermaid kodas parašomas pats. Perjunk į kodo skirtuką ir redaguok ranka; darbalaukis seka paskui.

  • Piešia rašant

    Tikras mermaid variklis, perpiešiantis diagramą per kelis šimtus milisekundžių po paskutinio klavišo paspaudimo.

  • Kodas ir darbalaukis sinchronizuoti

    Redaguok bet kurią pusę. Kita pati pasiveja — jokio kopijavimo tarp dviejų įrankių.

  • 14 mazgų formų

    Stačiakampis, suapvalintas, piliulė, apskritimas, rombas, duomenų bazė, šešiakampis ir kitos — po vieną spustelėjimą.

  • Nemokamai, be registracijos

    Be bandomojo laikotarpio ir vandens ženklo — redaktorius atsidaro iš karto. Prisijunkite tik jei norite daugiau nei vienos diagramos.

Darbalaukis, o ne vien teksto langelis

Vizualus skirtukas — tikras redaktorius virš atvaizduotos diagramos: spustelėk mazgą, kad jį pažymėtum, dukart spustelėk, kad pervadintum vietoje, tempk bet kur, kad slinktum vaizdą.

  • Statyk spustelėdamasPridėk bloką, nukreipk rodyklę į kitą, užrašyk rodyklės etiketę. Jokio sintaksės mokymosi prieš pradedant.

  • Pasirink formąKeturiolika mermaid flowchart formų — sprendimų rombai, duomenų bazių cilindrai, subrutinos — viename pasirinkiklyje.

  • Nuspalvink bet kąAštuoni šablonai plius spalvų pasirinkiklis, taikomi vienam mazgui arba visai sričiai.

Mermaid kodas, kuris lieka tavo

Teksto skirtukas — tai grynas mermaid, ta pati sintaksė, kurią jau atvaizduoja GitHub, GitLab, Notion ir Obsidian. Čia nėra nieko patentuoto.

  • Rašyk rankaRašyk mermaid tiesiai ir stebėk, kaip jis atvaizduojamas. Šeši paruošti pavyzdžiai, nuo kurių gali pradėti.

  • Veikia abipusiaiĮklijuoti flowchart'ai perskaitomi atgal į darbalaukį — mazgai, formos, spalvos, sritys ir visa kita.

  • Kiekvienas diagramos tipasFlowchart, sequence, class, state, ER, gantt, git graph, pie — peržiūra atvaizduoja viską, ką palaiko mermaid.

Didelės diagramos lieka aiškios

Architektūros diagramos greitai peraugą vieną ekraną. Slinkimas, mastelio keitimas ir grupavimas sukurti būtent tam, o ne kovai su tuo.

  • Sritys ir įdėjimasGrupuok blokus į potipes (subgraph), įdėk sritį į sritį, perkelk visą pošakį vienu judesiu.

  • Mastelis nuo 2% iki 1600%Slink ratuku, kad judėtum vaizdą, ctrl+ratukas — mastelio keitimui, arba centruok vienu mygtuku.

  • Išsaugoma savaimeRedaguojant diagrama automatiškai įrašoma naršyklėje. Prisijungus ji įrašoma jūsų paskyroje ir jus lydi visuose įrenginiuose.

Eksportuok ir dirbk toliau

Nieko neprivalai laikyti čia. Pasiimk paveikslėlį, pasiimk kodą arba Markdown bloką, paruoštą įklijuoti į dokumentą.

  • Jokio mokamo planoKiekviena funkcija, įskaitant eksportą, yra nemokama. Nėra jokio mokamo lygio, į kurį reikėtų kilti.

  • Atvaizduojama jūsų naršyklėjeAtvaizdavimas vyksta jūsų naršyklėje; be paskyros diagrama jos niekada nepalieka, o su paskyra išsaugotas dokumentas jus lydi bet kuriame įrenginyje.

  • SVG, PNG, .mmd, .mdKopijuok SVG kodą, atsisiųsk PNG dvigubos raiškos, išsaugok mermaid kodą arba pasiimk Markdown bloką.

Kaip tai lyginasi su įprastais įrankiais

Diagram-as-code įrankiai verčia rašyti viską ranka. Vilkimo įrankiai duoda paveikslėlį, kurio negali palyginti (diff). Šis atsisako rinktis pusę.

Pradžia

IQ Mermaid: Dukart spustelėk darbalaukį ir atsiranda mazgas. Sintaksės gali išmokti vėliau — arba niekada.

Įprastas įrankis: Pirmiausia skaityk sintaksės aprašą, arba susitaikyk su piešimo įrankiu be jokio teksto atvaizdavimo.

Išvesties formatas

IQ Mermaid: Grynas mermaid — tas pats tekstas, kurį natūraliai atvaizduoja GitHub, GitLab ir Notion.

Įprastas įrankis: Patentuotas failas, kuris atsidaro tik tame įrankyje, kuriame buvo sukurtas.

Redagavimas vėliau

IQ Mermaid: Keisk kodą arba kilnok blokus. Abi kryptys veikia toje pačioje diagramoje.

Įprastas įrankis: Tik viena kryptis: kodu paremti įrankiai neturi darbalaukio, darbalaukiu paremti — neturi kodo.

Kaina

IQ Mermaid: Nemokamai — net el. pašto nereikia.

Įprastas įrankis: Nemokamas planas ribotas iki kelių diagramų, o eksportas ar bendradarbiavimas — už prenumeratos.

Kur saugomi duomenys

IQ Mermaid: Jūsų naršyklėje arba paskyroje, jei norite, kad jus lydėtų bet kuriame įrenginyje.

Įprastas įrankis: Paskyra kažkieno serveryje, prie kurios prisegtos tavo diagramos.

Mermaid redaktoriaus klausimai

Norint pradėti, užtenka atidaryti puslapį.

Kas yra mermaid?

Mermaid — tai teksto sintaksė diagramoms: keliomis eilutėmis aprašai mazgus ir rodykles, o atvaizdavimo variklis nupiešia paveikslėlį. GitHub, GitLab, Notion ir Obsidian atvaizduoja jį Markdown viduje, tad mermaid blokas lieka skaitomas pull request'e ar wiki puslapyje.

Ar šis mermaid redaktorius tikrai nemokamas?

Taip. Visos funkcijos, įskaitant eksportą į SVG ir PNG, nemokamos, o redaktorių galite naudoti nieko nekurdami. Pasirinktinė nemokama paskyra prideda daugiau išsaugotų diagramų ir sinchronizavimą tarp įrenginių — mokamo plano nėra ir nieko neapribojame.

Ar reikia mokėti mermaid sintaksę?

Ne. Pradėk nuo vizualaus skirtuko: dukart spustelėk darbalaukį, kad pridėtum bloką, pažymėk jį ir nubrėžk rodyklę į kitą. Mermaid kodas sugeneruojamas už tave, ir gali jį perskaityti bet kada, jei nori išmokti sintaksę.

Kokie diagramų tipai palaikomi?

Kodo skirtukas atvaizduoja viską, ką palaiko mermaid — flowchart, sequence, class, state, entity relationship, gantt, git graph, pie ir daugiau. Vizualus darbalaukis redaguoja būtent flowchart'us, o tai yra dauguma diagramų.

Ar galiu eksportuoti į PNG ar SVG?

Taip. Nukopijuok SVG kodą į iškarpinę, atsisiųsk SVG failą arba atsisiųsk PNG, atvaizduotą dvigubos raiškos skaidrėms ir dokumentams. Taip pat gali išsaugoti mermaid kodą kaip .mmd arba kaip Markdown bloką.

Kur saugoma mano diagrama?

Be paskyros vienintelė diagrama saugoma naršyklėje, tad ji bus ten, kai grįšite tame pačiame įrenginyje. Prisijungus ji saugoma paskyroje ir gali jus lydėti kitame įrenginyje. Eksportuokite šaltinį, jei norite savo kopijos.

Ar galiu įklijuoti jau turimą mermaid diagramą?

Taip. Įklijuok ją į kodo skirtuką; flowchart perskaitomas atgal į vizualų darbalaukį su nepakitusiais mazgais, formomis, spalvomis ir sritimis. Kiti diagramų tipai atvaizduojami peržiūroje, bet lieka tik kodo pavidalu.

Ar veikia neprisijungus prie interneto?

Atvaizdavimas vyksta tik jūsų naršyklėje, todėl įkėlus puslapį redaktorius veikia ir be ryšio.

Atverk redaktorių. Nemokamai — be registracijos.

Tuščias darbalaukis, kodo skirtukas ir visos eksporto galimybės — nemokamai, naršyklėje, dabar.