Šta je Mermaid? Dijagrami kao kod

Mermaid je JavaScript biblioteka otvorenog koda koja pretvara obični tekst u dijagrame. Umesto prevlačenja oblika po platnu, opisujete dijagram jednostavnom tekstualnom sintaksom i Mermaid ga odmah renderuje. Ovaj pristup – koji se često naziva diagram-as-code – čuva vaše dijagrame u sistemu za kontrolu verzija uz kod i čini ih lakim za ažuriranje.

Kako Mermaid funkcioniše

Mermaid parsira lakšu tekstualnu definiciju i generiše SVG dijagram u pretraživaču. Napišete nekoliko redova teksta, a Mermaid automatski rešava raspored, razmak i stilizovanje.

Na primer, dijagram toka od tri koraka izgleda ovako:

graph LR
    A[Write code] --> B[Push to GitHub]
    B --> C[Deploy]

Jednostavan dijagram toka s leva na desno u Mermaid sintaksi

Tipovi dijagrama koje Mermaid podržava

Mermaid pokriva najčešće tipove dijagrama koje programeri trebaju:

Dijagrami toka

Koristite graph TD (od vrha ka dnu) ili graph LR (s leva na desno) za pravljenje procesnih tokova, stabala odlučivanja i dijagrama arhitekture sistema.

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

Sekvencijalni dijagrami

Sekvencijalni dijagrami modeluju interakcije između aktera tokom vremena – idealni su za dokumentovanje API tokova, sekvenci autentikacije i mikroservisne komunikacije.

sequenceDiagram
    Browser->>Server: GET /api/data
    Server->>Database: SELECT * FROM items
    Database-->>Server: rows
    Server-->>Browser: 200 OK

Dijagrami entiteta i veza (ER dijagrami)

ER dijagrami opisuju tabele u bazi podataka i njihove veze. Mermaid-ova erDiagram sintaksa podržava notaciju kardinalnosti i definicije atributa.

Gantovi dijagrami

Gantovi dijagrami prikazuju projektne vremenske linije sa sekcijama, zadacima, trajanjima i zavisnostima – korisni su za planove sprinta, mape puta i rasporede izdavanja.

Ostali tipovi

Mermaid takođe podržava klasne dijagrame (UML), mape uma, kružne dijagrame, dijagrame stanja i više. Lista podržanih tipova raste sa svakim izdanjem.

Zašto programeri koriste Mermaid

Alati za crtanje poput Lucidchart ili draw.io su korisni, ali generišu binarne fajlove koje je teško pregledati u pull request-ovima. Mermaid dijagrami žive u čistom tekstu i imaju sledeće prednosti:

Kontrola verzija – commit-ujte dijagrame uz kod i pratite svaku izmenu u Git-u.

Dokumentacioni sajtovi – GitHub, GitLab, Notion i mnogi wiki alati nativno renderuju Mermaid unutar Markdown kôd blokova.

Brzina – ažuriranje dijagrama znači izmenu jednog reda teksta, bez premeštanja oblika.

Prenosivost – izvezite u SVG ili PNG u bilo kom trenutku, bez zavisnosti od vendora.

Kako početi sa Mermaid-om

Najbrži način da isprobate Mermaid je da otvorite uživo editor u pretraživaču – instalacija nije potrebna. Diagram.RS je besplatan, privatnosti prilagođen Mermaid editor: nalepite ili ukucajte bilo koju Mermaid sintaksu levo i vidite dijagram kako se ažurira uživo desno.

Možete i da ugradite Mermaid u sopstveni projekat uključivanjem mermaid npm paketa, ili koristite ograđeni kôd blok u GitHub-flavored Markdown – GitHub automatski renderuje Mermaid.

Šta je Mermaid? Uvod u dijagrame kao kod