Razvoj / Dijagrami

Mermaid editor uživo

Pišite Mermaid kod i gledajte kako se dijagram iscrtava dok kucate: dijagrami toka, sekvencni i klasni dijagrami, Gantt grafikoni i tortni grafikoni, uz preuzimanje u SVG i PNG formatima.

Mermaid editor uživo: Editor iscrtava dijagrame pomoću Mermaida, biblioteke otvorenog koda koju GitHub, GitLab i mnogi alati za dokumentaciju koriste za dijagrame napisane kao tekst. Radi u strogom režimu, pa kod druge osobe ne može da pokreće skripte niti da dodaje rukovaoce za klik. SVG preuzimanja ostaju oštra pri svakoj veličini, dok se PNG preuzimanja iscrtavaju u dvostruko većoj veličini od one na ekranu, na beloj pozadini. Radi 100% lokalno u vašem pregledaču, bez otpremanja datoteka na server.

Kategorija: Alatke za programere
Pokretanja: U vašem pregledaču
Trošak: Besplatno · bez registracije
Dostupnost: Spremno za upotrebu

Uređivač Mermaid dijagramaLokalna obrada

U potpunosti radi u vašem pregledaču

flowchart TD
  A[Start] --> B{Is it working?}
  B -- Yes --> C[Ship it]
  B -- No --> D[Debug]
  D --> B

…

Dijagrami se crtaju u vašem pregledaču pomoću alata Mermaid, u strogom režimu, tako da kod dijagrama ne može da pokreće skripte. Nalepite isti kod u GitHub, GitLab ili Notion Markdown u mermaid blok koda da biste ga tamo prikazali.

Dijagrami kao tekst

Dijagram nacrtan u grafičkom programu zastari jer svaka izmena zahteva ponovno otvaranje datoteke. Mermaid dijagram je nekoliko redova teksta koji stoje uz kod ili dokument koji opisuju, menjaju se u istom commit-u i u pregledu se prikazuju kao čitljiv diff.

Svaki dijagram počinje svojim tipom: flowchart sa smerom kao što su TD (odozgo nadole) ili LR (sleva nadesno), sequenceDiagram, classDiagram, gantt ili pie. Čvorovi se jednom zapisuju sa svojom oznakom, A[Start], a zatim se na njih upućuje po imenu, A --> B.

Izvoz

SVG zadržava oštrinu linija i teksta pri svakoj veličini i bolji je izbor za dokumente i prezentacije; PNG odgovara čet aplikacijama i mestima koja ne prihvataju SVG. Da biste ručno uredili izvezeni SVG, otvorite ga u SVG editoru.

Kako se koristi

Počnite od primera ili nalepite sopstveni Mermaid kod.
Menjajte kod; dijagram se ponovo iscrtava dok kucate ili se prikazuje greška.
Preuzmite dijagram kao SVG ili PNG ili kopirajte kod.

Privatnost i ograničenja

Dijagrami se iscrtavaju u vašem pregledaču, a vaš kod se čuva samo u ovom pregledaču kako bi i sledeći put bio tu.

Srodne alatke

Često postavljana pitanja

Šta je Mermaid?

Način za pisanje dijagrama kao teksta. Linija kao što je A --> B iscrtava dva okvira povezana strelicom, pa dijagrami mogu da budu u Markdown datotekama i pregledima koda i da se menjaju izmenom teksta, a ne alatom za crtanje.

Kako da prikažem dijagram na GitHubu?

Stavite kod u ograđeni blok koda označen sa mermaid u Markdown datoteci, issue-ju ili pull requestu: tri obrnuta navodnika, zatim reč mermaid, kod i na kraju još tri obrnuta navodnika. GitHub, GitLab i Notion iscrtavaju ga na tom mestu.

Zašto se na mom dijagramu prikazuje greška?

Poruka navodi red koji Mermaid nije mogao da pročita. Uobičajeni uzroci su nedostajući tip dijagrama u prvom redu, kao što je flowchart TD, nezatvorene zagrade ili navodnici i tekst sa posebnim znacima koji mora da bude u navodnicima.

Koji tipovi dijagrama su podržani?

Svi tipovi u verziji Mermaida koju editor učitava, uključujući dijagrame toka, sekvencne, klasne, dijagrame stanja i odnosa između entiteta, Gantt grafikone, tortne grafikone, mape uma, vremenske linije i git grafikone. Primeri obuhvataju pet najčešćih tipova.

Besplatan alat · pokretanja: u vašem pregledaču · nalog nije potreban