Mermaid Editor

Mermaid tiešsaistes redaktors, vizuāli un kods vienuviet

Lielākā daļa mermaid redaktoru piedāvā tikai teksta lauku un priekšskatījumu. Šis dod arī audeklu: uzklikšķiniet, lai pievienotu bloku, velciet bultu, grupējiet elementus apgabalos — un mermaid kods uzrakstās pats. Pārslēdzieties uz koda cilni un rediģējiet ar roku — audekls seko līdzi.

  • Atveido rakstīšanas laikā

    Īstais mermaid dzinējs, kas pārzīmē dažus simtus milisekunžu pēc jūsu pēdējā taustiņsitiena.

  • Kods un audekls sinhronizējas

    Rediģējiet jebkuru pusi — otra pievienojas automātiski, bez kopēšanas starp diviem rīkiem.

  • 14 mezglu formas

    Taisnstūris, noapaļots, tablete, aplis, rombs, datubāze, sešstūris un pārējie — katrs vienā klikšķī.

  • Bez maksas, bez reģistrācijas

    Bez izmēģinājuma perioda un ūdenszīmes — redaktors atveras uzreiz. Pierakstieties tikai tad, ja vēlaties vairāk nekā vienu diagrammu.

Audekls, ne tikai teksta lauks

Vizuālā cilne ir īsts redaktors tieši virs atveidotās diagrammas: uzklikšķiniet uz mezgla, lai to atlasītu, veiciet dubultklikšķi, lai pārdēvētu uz vietas, velciet jebkur, lai pārvietotu skatu.

  • Būvējiet ar klikšķiPievienojiet bloku, norādiet bultu uz citu, pievienojiet bultai etiķeti. Nav sintakses, kas jāatceras pirms sākuma.

  • Izvēlieties formuČetrpadsmit mermaid plūsmas diagrammas formas — lēmumu rombi, datubāzu cilindri, apakšprogrammas — vienā izvēlnē.

  • Iekrāsojiet jebkoAstoņi sagatavotie varianti plus krāsu izvēle, ko var pielietot vienam mezglam vai visam apgabalam.

Mermaid kods, kas paliek jūsu

Teksta cilne ir tīrs mermaid — tā pati sintakse, ko jau atveido GitHub, GitLab, Notion un Obsidian. Šeit nav neviena patentēta formāta.

  • Rakstiet ar rokuRakstiet mermaid tieši un vērojiet, kā tas atveidojas. Seši gatavi piemēri, no kuriem sākt.

  • Divvirzienu processIelīmētas plūsmas diagrammas tiek atkal atpazītas audeklā — mezgli, formas, krāsas, apakšgrafi un viss pārējais.

  • Visi diagrammu veidiFlowchart, secības, klašu, stāvokļu, ER, gantt, git grafa, apļa diagrammas — priekšskatījums atveido visu, ko atbalsta mermaid.

Lielas diagrammas paliek lasāmas

Arhitektūras diagrammas ātri pārsniedz viena ekrāna izmēru. Pārvietošana, tuvināšana un grupēšana ir izveidotas tieši šim, nevis pret to.

  • Apgabali un ligzdošanaGrupējiet blokus apakšgrafos, ievietojiet vienu apgabalu citā, pārvietojiet visu apakškoku vienā kustībā.

  • Tuvināšana no 2% līdz 1600%Ritiniet, lai pārvietotos, ctrl+ritināšana, lai tuvinātu, vai atcentrējiet ar vienu pogu.

  • Saglabājas automātiskiDiagramma rediģēšanas laikā automātiski saglabājas pārlūkā. Ja pierakstāties, tā saglabājas jūsu kontā un seko jums visās ierīcēs.

Eksportējiet un turpiniet darbu

Nekas nav ieslēgts būrī. Ņemiet attēlu, ņemiet pirmkodu vai ņemiet Markdown bloku, kas gatavs ielīmēšanai dokumentā.

  • Bez maksas sienasVisas funkcijas, tostarp eksports, ir bezmaksas. Nav maksas plāna, uz kuru pāriet.

  • Tiek renderēta jūsu pārlūkāAttēlošana notiek jūsu pārlūkā; bez konta diagramma to nekad nepamet, un ar kontu saglabātais dokuments seko jums jebkurā ierīcē.

  • SVG, PNG, .mmd, .mdKopējiet SVG kodu, lejupielādējiet 2x PNG, saglabājiet mermaid pirmkodu vai paņemiet Markdown bloku.

Kā tas salīdzinās ar ierastajām alternatīvām

Diagram-as-code rīki liek visu rakstīt ar roku. Vilkšanas-nomešanas rīki dod attēlu, kuru nevar salīdzināt pa versijām. Šis atsakās izvēlēties pusi.

Sākot darbu

IQ Mermaid: Veiciet dubultklikšķi uz audekla, un parādās mezgls. Sintaksi var apgūt vēlāk — vai nekad.

Tipisks rīks: Vispirms jālasa sintakses uzziņa, vai jāsamierinās ar zīmēšanas rīku bez teksta atveida vispār.

Izvades formāts

IQ Mermaid: Tīrs mermaid — tas pats teksts, ko GitHub, GitLab un Notion atveido nativi.

Tipisks rīks: Patentēts fails, kas atveras tikai rīkā, kurā tas izveidots.

Rediģēšana vēlāk

IQ Mermaid: Mainiet kodu vai pārvietojiet blokus. Abi virzieni darbojas ar vienu un to pašu diagrammu.

Tipisks rīks: Tikai viens virziens: uz kodu balstītiem rīkiem nav audekla, uz audeklu balstītiem rīkiem nav pirmkoda.

Cena

IQ Mermaid: Bez maksas — pat e-pasts nav vajadzīgs.

Tipisks rīks: Bezmaksas plāns ierobežots līdz pāris diagrammām, eksports vai sadarbība pieejama tikai ar abonementu.

Kur atrodas dati

IQ Mermaid: Jūsu pārlūkā vai kontā, ja vēlaties, lai tas jums seko jebkurā ierīcē.

Tipisks rīks: Konts kāda serverī, kuram piesaistītas jūsu diagrammas.

Mermaid redaktora jautājumi

Lai sāktu, pietiek atvērt lapu.

Kas ir mermaid?

Mermaid ir teksta sintakse diagrammām: mezglus un bultas apraksta dažās rindiņās, un atveidotājs uzzīmē attēlu. GitHub, GitLab, Notion un Obsidian to atveido tieši Markdown iekšienē, tāpēc mermaid bloks paliek lasāms pull request vai wiki lapā.

Vai šis mermaid redaktors tiešām ir bezmaksas?

Jā. Visas funkcijas, tostarp eksports uz SVG un PNG, ir bez maksas, un redaktoru var lietot, neko neveidojot. Neobligāts bezmaksas konts pievieno vairāk saglabātu diagrammu un sinhronizāciju starp ierīcēm — maksas plāna nav un nekas netiek aizturēts.

Vai man jāzina mermaid sintakse?

Nē. Sāciet vizuālajā cilnē: veiciet dubultklikšķi uz audekla, lai pievienotu bloku, atlasiet to un uzzīmējiet bultu uz citu. Mermaid kods tiek ģenerēts automātiski, un varat to lasīt jebkurā brīdī, kad vēlaties apgūt sintaksi.

Kādi diagrammu veidi tiek atbalstīti?

Koda cilne atveido visu, ko atbalsta mermaid — flowchart, secības, klašu, stāvokļu, entītiju attiecību, gantt, git grafa, apļa diagrammas un citas. Vizuālais audekls rediģē tieši plūsmas diagrammas, kas veido lielāko daļu diagrammu.

Vai varu eksportēt uz PNG vai SVG?

Jā. Kopējiet SVG kodu starpliktuvē, lejupielādējiet SVG failu vai lejupielādējiet PNG, kas atveidots 2x izšķirtspējā prezentācijām un dokumentiem. Varat arī saglabāt mermaid pirmkodu kā .mmd vai kā Markdown bloku.

Kur tiek glabāta mana diagramma?

Bez konta vienīgā diagramma tiek saglabāta pārlūkā, tāpēc tā ir tur, kad atgriezīsities tajā pašā ierīcē. Ja pierakstāties, tā tiek saglabāta kontā un var jums sekot citā ierīcē. Eksportējiet avotu, ja vēlaties savu kopiju.

Vai varu ielīmēt jau esošu mermaid diagrammu?

Jā. Ielīmējiet to koda cilnē — plūsmas diagramma tiek atpazīta un pārnesta uz vizuālo audeklu ar visiem mezgliem, formām, krāsām un apakšgrafiem neskartiem. Citi diagrammu veidi tiek atveidoti priekšskatījumā, bet paliek tikai kodā.

Vai tas darbojas bezsaistē?

Renderēšana notiek pilnībā pārlūkā, tāpēc pēc lapas ielādes redaktors darbojas arī bez savienojuma.

Atveriet redaktoru. Bez maksas — bez reģistrācijas.

Tukšs audekls, koda cilne un visas eksporta iespējas — bez maksas, jūsu pārlūkā, tieši tagad.