Proces Typ
Wyrażenie graficzne
Myślenie Typ
Wyrażenie strukturalne
Notatki Typ
Efektywne wyrażanie
Mapa drzewa
Schemat nawiasów
Tryb domyślny
Mermaid to narzędzie do generowania diagramów na podstawie składni tekstowej. Pisząc prosty kod Mermaid, można utworzyć schemat blokowy, diagram sekwencji, diagram klas, diagram stanów, diagram ER, wykres Gantta, mapę myśli, diagram architektury i wiele innych typów diagramów.
W odróżnieniu od klasycznych narzędzi do rysowania metodą przeciągnij i upuść, Mermaid opisuje węzły, relacje, kolejność czasową i struktury danych na diagramie przede wszystkim za pomocą kodu. Po zmianie kodu diagram generuje się automatycznie od nowa, dlatego Mermaid szczególnie dobrze sprawdza się w dokumentacji technicznej, projektowaniu produktów, zarządzaniu projektami, tworzeniu oprogramowania i porządkowaniu wiedzy.
W tym artykule omówiono podstawową składnię Mermaid oraz zestawiono obsługiwane przez edytor Mermaid typy diagramów, składnię deklaracji, przykłady kodu i scenariusze użycia. Jeśli chcesz pisać i podglądać kod Mermaid bezpośrednio online, możesz bezpłatnie wypróbować edytor online Mermaid od ProcessOn.
Mermaid to narzędzie do generowania diagramów za pomocą składni tekstowej. Poniższy kod tworzy prosty schemat blokowy Mermaid:
flowchart TD
A[Start] --> B[Enter information]
B --> C{ Completed?}
C -->|Yes| D[End]
C -->|No| B
Efekt renderowania wygląda następująco:
Gdzie: flowchart TD służy do zadeklarowania schematu blokowego ułożonego od góry do dołu.
Logikę działania Mermaid można podsumować następująco:
Pisanie kodu Mermaid → analiza kodu → renderowanie diagramu → zmiana kodu → diagram aktualizowany w czasie rzeczywistym
Dlatego jednym z kluczy do nauki Mermaid jest poznanie składni deklaracji odpowiadającej poszczególnym diagramom.
Różne typy diagramów używają różnej składni deklaracji Mermaid, do najczęściej spotykanych diagramów Mermaid należą:
| Typ diagramu | Składnia deklaracji Mermaid | Typowe zastosowania |
| Schemat blokowy | flowchart | Procesy biznesowe, algorytmy, przepływy pracy |
| Diagram sekwencji | sequenceDiagram | Interakcje systemów, wywołania API |
| Diagram klas | classDiagram | Struktura oprogramowania, modelowanie obiektowe |
| Diagram stanów | stateDiagram-v2 | Przejścia stanów, automaty stanów |
| Diagram ER | erDiagram | Relacje encji w bazie danych |
| Wykres Gantta | gantt | Plany projektów, postęp zadań |
| Mapa podróży użytkownika | journey | Doświadczenia użytkownika, podróż klienta |
| Mapa myśli | mindmap | Porządkowanie wiedzy, burza mózgów |
| Oś czasu | timeline | Linia czasu, wydarzenia historyczne |
| Wykres kołowy | pie | Proporcje, analiza struktury |
| Wykres kwadrantowy | quadrantChart | Klasyfikacja, priorytety, analiza pozycjonowania |
| Wykres Git | gitGraph | Gałęzie Git, commity, scalenia |
| Diagram Sankeya | sankey-beta | Przepływy danych, zasobów i ruchu |
| Wykres XY | xychart-beta | Trendy danych, porównanie wartości |
| Wykres radarowy | radar | Porównanie wskaźników wielowymiarowych |
| Diagram C4 | C4Context itp. | Modelowanie architektury oprogramowania |
| Diagram architektury | architecture-beta | Architektura systemów, usług i zasobów |
| Diagram kanban | kanban | Zarządzanie zadaniami i stanem pracy |
| Diagram blokowy | block-beta | Moduły, struktura i relacje w systemie |
| Diagram pakietów | packet-beta | Struktura pakietów sieciowych |
| Diagram wymagań | requirementDiagram | Analiza wymagań i relacje między wymaganiami |
Różne wersje edytorów Mermaid mogą różnić się zakresem obsługiwanej składni i funkcji diagramów, dlatego w praktyce należy kierować się składnią obsługiwaną przez dany edytor.
Podstawowa składnia
Mermaid używa deklaracji flowchart do tworzenia schematu blokowego. Najprostszy zapis:
flowchart TD
A[Start] --> B[Arrange]
B --> C[End]
Efekt renderowania
Gdzie:
W schematach blokowych Mermaid można też stosować kierunki LR (od lewej do prawej), RL (od prawej do lewej), BT (od dołu do góry) i inne ustawienia kierunku. Na przykład:
flowchart LR
A[Start] --> B[Arrange] --> C[End]
Oznacza schemat blokowy z układem od lewej do prawej.
Często używana składnia
| Składnia | Diagram | Znaczenie |
| (text) | Zaokrąglony prostokąt | Oznacza początek, koniec lub ogólną operację procesu |
| [text] | Prostokąt | Oznacza konkretny krok, zadanie lub operację |
| {text} | Romb | Oznacza decyzję lub rozgałęzienie warunkowe |
| ((text)) | Koło | Oznacza punkt połączenia lub zdarzenie |
| [[text]] | Podwójny prostokąt | Oznacza wywołanie podprocesu lub podmodułu |
| [(text)] | Walec | Oznacza węzeł bazy danych |
| >text] | Kształt asymetryczny | Oznacza wejście/wyjście |
| [/text/] | Równoległobok | Oznacza dane wejściowe lub wyjściowe |
| --> | Strzałka | Oznacza kierunek przebiegu procesu |
| --- | Połączenie bez strzałki | Oznacza relację skojarzenia |
| -.-> | Strzałka przerywana | Oznacza proces opcjonalny lub relację referencyjną |
| ==> | Gruba strzałka | Oznacza kluczowy proces lub silną relację |
Aby zapoznać się ze szczegółową składnią tworzenia schematów blokowych w Mermaid, odwiedź stronę: https://www.processon.io/pl/mermaid/flowchart
Schematy blokowe sprawdzają się w procesach biznesowych, przepływach pracy, algorytmach, procesach systemowych i procesach decyzyjnych, wypróbuj bezpłatnie edytor online Mermaid do schematów blokowych.
Podstawowa składnia
Mermaid używa deklaracji sequenceDiagram do tworzenia diagramu sekwencji. Najprostszy przykład:
sequenceDiagram
Alice->>John: Hello John
John-->>Alice: Hello Alice
Efekt renderowania
Gdzie:
Często używana składnia
| Składnia | Diagram | Znaczenie |
| sequenceDiagram | Diagram sekwencji | Tworzy diagram sekwencji |
| A->B: message | Linia ciągła | Oznacza synchroniczne wywołanie komunikatu lub zwykłą interakcję |
| A-->B: message | Linia przerywana | Oznacza komunikat zwrotny lub słabą interakcję |
| A->>B: message | Strzałka ciągła | oznacza asynchroniczne wywołanie komunikatu |
| A-->>B: message | Strzałka przerywana | oznacza odpowiedź asynchroniczną lub komunikat zwrotny |
| participant A | Uczestnik | Definiuje obiekt, rolę lub system biorący udział w interakcji |
| actor A | Aktor | Oznacza aktywnego uczestnika, takiego jak użytkownik lub system zewnętrzny |
| activate A | Blok aktywacji | Oznacza rozpoczęcie przetwarzania żądania przez obiekt |
| deactivate A | Koniec aktywacji | Oznacza zakończenie bieżącego przetwarzania przez obiekt |
| loop text | Blok pętli | Oznacza powtarzaną interakcję |
| alt text | Rozgałęzienie warunkowe | Oznacza ścieżki interakcji w różnych warunkach |
| opt text | Proces opcjonalny | Oznacza interakcję, która może wystąpić |
| par text | Blok równoległy | Oznacza równoczesne wykonanie wielu operacji |
Aby zapoznać się ze szczegółową składnią tworzenia diagramów sekwencji w Mermaid, odwiedź stronę: https://www.processon.io/pl/mermaid/sequence-diagram
Diagramy sekwencji dobrze opisują interakcje zachodzące w kolejności czasowej między użytkownikiem a systemem, między systemami oraz między usługami, wypróbuj bezpłatnie edytor online Mermaid do diagramów sekwencji.
Podstawowa składnia
Mermaid używa deklaracji classDiagram do tworzenia diagramu klas.
classDiagram
Animal <|-- Duck
Animal <|-- Fish
class Animal {
+String name
+eat()
}
class Duck {
+swim()
}
Efekt renderowania
Gdzie:
Często używana składnia
| Składnia | Diagram | Znaczenie |
| classDiagram | Diagram klas | Tworzy diagram klas |
| class ClassName | Klasa | Definiuje obiekt klasy |
| ClassName : attribute | Atrybut | Oznacza zmienną składową klasy |
| ClassName : method() | Metoda | Definiuje metodę klasy |
| <|-- | Pusty trójkąt+ Linia ciągła | Oznacza relację dziedziczenia |
| <|.. | Pusty trójkąt+ Linia przerywana | Oznacza relację realizacji |
| *-- | Wypełniony romb+ Linia ciągła | Oznacza relację kompozycji |
| o-- | Pusty romb+ Linia ciągła | Oznacza relację agregacji |
| --> | Strzałka ciągła | Oznacza relację skojarzenia |
| ..> | Strzałka przerywana | Oznacza relację zależności |
| -- | Linia ciągła | Oznacza zwykłą relację połączenia |
| +attribute | Znak plus | Oznacza publiczny atrybut lub metodę |
| -attribute | Znak minus | Oznacza prywatny atrybut lub metodę |
Symbole +, -, # przed składowymi klasy oznaczają różne poziomy widoczności.
Aby zapoznać się ze szczegółową składnią tworzenia diagramów klas w Mermaid, odwiedź stronę: https://www.processon.io/pl/mermaid/class-diagram
Diagramy klas sprawdzają się w projektowaniu oprogramowania, modelowaniu obiektowym i analizie struktury programów, wypróbuj bezpłatnie edytor online Mermaid do diagramów klas.
Podstawowa składnia
Mermaid używa deklaracji stateDiagram-v2 do tworzenia diagramu stanów.
stateDiagram-v2
state "Pending Payment" as Pending
[*] --> Pending
Pending --> Paid
Paid --> Shipped
Shipped --> Completed
Completed--> [*]
Efekt renderowania
Gdzie:
Często używana składnia
| Składnia | Diagram | Znaczenie |
| stateDiagram-v2 | Diagram stanów | Tworzy diagram stanów |
| state StateName | Zaokrąglony prostokąt | Definiuje podstawowy węzeł stanu |
| state StateName : text | Zaokrąglony prostokąt z tekstem | Dodaje opis tekstowy do stanu |
| [*] | Wypełniony okrąg lub podwójny pierścień | Oznacza początek lub koniec stanu |
| [*] --> StateName | Strzałka początkowa | Oznacza przejście do pierwszego stanu |
| StateName --> [*] | Strzałka końcowa | Oznacza zakończenie procesu stanów |
| A --> B | Strzałka ciągła | Oznacza przejście między stanami |
| A --> B: event | Strzałka ciągła z etykietą | Przejście między stanami ze zdarzeniem wyzwalającym |
| state StateName { ... } | Zagnieżdżony zaokrąglony prostokąt | Definiuje stan złożony |
| state Node <<choice>> | Romb | Węzeł wyboru rozgałęzienia decyzyjnego |
| state Fork <<fork>> | Gruba pozioma linia podziału | Oznacza początek procesu równoległego |
| state Join <<join>> | Gruba pozioma linia podziału | Oznacza zakończenie i scalenie procesu równoległego |
Aby zapoznać się ze szczegółową składnią tworzenia diagramów stanów w Mermaid, odwiedź stronę: https://www.processon.io/pl/mermaid/state-diagram
Diagramy stanów dobrze przedstawiają stany zamówień, przepływów pracy, użytkowników i systemów oraz automaty stanów, wypróbuj bezpłatnie edytor online Mermaid do diagramów stanu.
Podstawowa składnia
Mermaid używa deklaracji erDiagram do tworzenia diagramu relacji encji, czyli diagramu ER.
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ PRODUCT : contains
Efekt renderowania
Gdzie:
Często używana składnia
| Składnia | Diagram | Znaczenie |
| erDiagram | Diagram ER | tworzy diagram ER |
| ENTITY { } | Prostokąt | Definiuje encję |
| type field | Znacznik atrybutu | Definiuje atrybut encji |
| type field PK | Klucz główny | Definiuje klucz główny encji |
| type field FK | Klucz obcy | Definiuje klucz obcy encji |
| type field UK | Klucz unikalny | Definiuje pole z ograniczeniem unikalności |
| || | Jeden | Dokładnie jeden (wymagany) |
| o| | Zero lub jeden | Zero lub jeden |
| |{ | Jeden lub więcej | Co najmniej jeden |
| o{ | Zero, jeden lub więcej | Zero lub więcej |
Aby zapoznać się ze szczegółową składnią tworzenia diagramów ER w Mermaid, odwiedź stronę: https://www.processon.io/pl/mermaid/er-diagram
Diagramy ER przedstawiają encje, atrybuty oraz relacje między encjami i są często używane w projektowaniu baz danych, wypróbuj bezpłatnie edytor online Mermaid do diagramów ER.
Podstawowa składnia
Mermaid używa deklaracji mindmap do tworzenia mapy myśli.
mindmap
root((Mermaid))
Flowchart
Sequence diagram
Class diagram
Gantt chart
Mind map
Efekt renderowania
Gdzie:
Często używana składnia
| Składnia | Diagram | Znaczenie |
| mindmap | Mapa myśli | Tworzy mapę myśli |
| root[text] | Prostokąt | Prostokątny temat główny |
| root(text) | Zaokrąglony prostokąt | Zaokrąglony prostokątny temat główny |
| root((text)) | Koło | Okrągły temat główny |
| root{{text}} | Sześciokąt | Sześciokątny temat główny |
| root)text( | Bąbel | Bąbelkowy temat główny |
| [text] | Prostokąt | Prostokątny węzeł |
| (text) | Zaokrąglony prostokąt | Zaokrąglony prostokątny węzeł |
| ((text)) | Koło | Okrągły węzeł |
| {{text}} | Sześciokąt | Sześciokątny węzeł |
| )text( | Bąbel | Węzeł bąbelkowy |
Aby zapoznać się ze szczegółową składnią tworzenia map myśli w Mermaid, odwiedź stronę: https://www.processon.io/pl/mermaid/mindmap
Mapy myśli pokazują hierarchię głównie za pomocą wcięć, dlatego świetnie nadają się do porządkowania wiedzy, burzy mózgów, notatek z zajęć i architektury informacji, wypróbuj bezpłatnie edytor online Mermaid do map myśli.
Podstawowa składnia
Mermaid używa deklaracji gantt do tworzenia wykresu Gantta.
gantt
title Project Plan
dateFormat YYYY-MM-DD
section Design
Requirements Analysis:a1, 2026-01-01, 3d
UI Design:after a1, 2d
section Development
Front-end Development:2026-01-06, 4d
Back-end Development:2026-01-07, 4d
Efekt renderowania
Gdzie:
Często używana składnia
| Składnia | Diagram | Znaczenie |
| gantt | Wykres Gantta | Tworzy wykres Gantta |
| title text | Tytuł | Ustawia tytuł wykresu Gantta |
| dateFormat text | Identyfikator konfiguracji dat | Definiuje format analizy dat na osi czasu |
| section text | Pasek tytułu grupy z kolorem | Dzieli zadania na grupy |
| TaskName : id, startDate, endDate | Poziomy pasek zadania | Definiuje powiązane właściwości zadania |
| startDate | Poziomy pasek zadania | Definiuje czas rozpoczęcia |
| endDate | Poziomy pasek zadania | Definiuje czas zakończenia |
| duration | Poziomy pasek zadania | Definiuje czas trwania zadania |
| id | Niestandardowy | Definiuje identyfikator zadania |
| after id | Poziomy pasek zadania | Definiuje zadanie rozpoczynające się po zadaniu poprzedzającym |
| 16d, 2w | Poziomy pasek zadania | Oznacza dni lub tygodnie |
| milestone, date | Wypełniony romb | Ustawia kamień milowy |
Aby zapoznać się ze szczegółową składnią tworzenia wykresów Gantta w Mermaid, odwiedź stronę: https://www.processon.io/pl/mermaid/gantt
Wykresy Gantta Mermaid sprawdzają się w planowaniu projektów, organizacji zadań, śledzeniu postępu prac i zarządzaniu projektami, wypróbuj bezpłatnie edytor online Mermaid do wykresów Gantta.
Podstawowa składnia
Mermaid używa deklaracji journey do tworzenia mapy podróży użytkownika.
journey
title User purchases a product
section Browse
Search for products: 5: User
View details: 4: User
section Place order
Add to cart: 5: User
Complete payment: 3: User
Efekt renderowania
Gdzie:
Często używana składnia
| Składnia | Diagram | Znaczenie |
| journey | Mapa podróży użytkownika | Tworzy mapę podróży użytkownika |
| title text | Tytuł | Tytuł mapy podróży użytkownika |
| section text | Blok sekcji | Dzieli proces na etapy |
| TaskName:num:Actor | Węzeł procesu + oś skali satysfakcji | Definiuje zadania interakcji w etapie, oceny satysfakcji i role uczestników |
| num (1~5) | Ocena satysfakcji | 1 to najniższa ocena, a 5 to najlepsza |
| Me, Cat | Aktor | Definiuje wiele ról biorących udział w zadaniu |
Aby zapoznać się ze szczegółową składnią tworzenia map podróży użytkownika w Mermaid, odwiedź stronę: https://www.processon.io/pl/mermaid/user-journey-diagram
Mapy podróży użytkownika dobrze analizują kolejne kroki i doświadczenia klienta od pierwszego kontaktu z produktem do osiągnięcia celu, wypróbuj bezpłatnie edytor online Mermaid do diagramów ścieżki użytkownika.
Podstawowa składnia
Mermaid używa deklaracji timeline do tworzenia osi czasu.
timeline
title Mermaid Development History
2019 : Project Development
2020 : Feature Expansion
2021 : More Diagram Types
Efekt renderowania
Gdzie:
Często używana składnia
| Składnia | Diagram | Znaczenie |
| timeline | Oś czasu | Tworzy oś czasu |
| title text | Tytuł | Ustawia tytuł osi czasu |
| section text | Blok sekcji | Dzieli czas na etapy |
| date : Event1 | Zdarzenie | Definiuje zdarzenie odpowiadające punktowi w czasie |
| : Event2 | Wiele zdarzeń | Inne zdarzenia odpowiadające temu samemu momentowi |
| Spacja | Przejście do nowej linii | Zawija zbyt długie opisy zdarzeń |
Aby zapoznać się ze szczegółową składnią tworzenia osi czasu w Mermaid, odwiedź stronę: https://www.processon.io/pl/mermaid/timeline
Osie czasu dobrze pokazują wydarzenia historyczne, rozwój projektu, iteracje produktu i informacje o kolejności czasowej, wypróbuj bezpłatnie edytor online Mermaid do osi czasu.
Podstawowa składnia
Mermaid używa deklaracji quadrantChart do tworzenia wykresu kwadrantowego.
quadrantChart
title Product Positioning
x-axis Low Price--> High Price
y-axis Low Quality--> High Quality
quadrant-1 High-end
quadrant-2 Quality-focused
quadrant-3 Basic
quadrant-4 Value-for-money
Product A: [0.8, 0.7]
Product B: [0.3, 0.8]
Efekt renderowania
Gdzie:
Aby zapoznać się ze szczegółową składnią tworzenia wykresów kwadrantowych w Mermaid, odwiedź stronę: https://www.processon.io/pl/mermaid/quadrant-chart
Wykresy kwadrantowe sprawdzają się w pozycjonowaniu produktów, analizie priorytetów, analizie konkurencji i klasyfikacji dwuwymiarowej, wypróbuj bezpłatnie edytor online Mermaid do wykresów kwadrantowych.
Podstawowa składnia
Mermaid – diagram kanban służy do organizowania zadań według ich stanu, na przykład do zrobienia, w toku i ukończone. Typową strukturę można przedstawić następująco:
kanban
Todo
Task A
Task B
Doing
Task C
Done
Task D
Efekt renderowania
Gdzie：
Aby zapoznać się ze szczegółową składnią tworzenia diagramów kanban w Mermaid, odwiedź stronę: https://www.processon.io/pl/mermaid/kanban
Diagramy kanban sprawdzają się w zarządzaniu projektami, śledzeniu zadań, procesach rozwojowych i zarządzaniu przepływem pracy, wypróbuj bezpłatnie edytor online Mermaid do diagramów kanban.
Podstawowa składnia
Diagramy wymagań służą do przedstawiania relacji między wymaganiami, funkcjami i elementami systemu, Mermaid używa deklaracji requirementDiagram do tworzenia diagramu wymagań.
requirementDiagram
requirement userRequirement {
id: 1
text: Customers can purchase products
risk: low
verifymethod: test
}
Efekt renderowania
Gdzie:
Często używana składnia
| Składnia | Diagram | Znaczenie |
| requirementDiagram | Diagram wymagań | Tworzy diagram wymagań |
| Requirement name { } | Wymaganie | Definiuje wymaganie podstawowe |
| functionalRequirement name { } | Funkcja | Definiuje wymaganie funkcjonalne |
| interfaceRequirement name { } | Interfejs | Definiuje wymaganie interfejsu |
| performanceRequirement name { } | Wydajność | Definiuje wymaganie wydajnościowe |
| physicalRequirement name { } | Fizyczne | Definiuje wymaganie fizyczne |
| element name {type: name docRef: name} | Element | Definiuje elementy encji, takie jak system, komponent lub test |
| X - satisfies -> Y | Strzałka przerywana | Encja spełnia odpowiadające wymaganie |
| X - contains -> Y | Linia ciągła, punkt początkowy z okrągłym zakończeniem w kształcie krzyżyka i plusa | Jedno wymaganie zawiera inne wymaganie |
| X - derives -> Y | Strzałka przerywana | Wymaganie jest wyprowadzane z innego wymagania |
| X - copies -> Y | Strzałka przerywana | Wymaganie kopiuje inne wymaganie |
| X - traces -> Y | Strzałka przerywana | Dwukierunkowe powiązanie śledzenia wymagań |
Szczegółowa składnia tworzenia diagramu wymagań Mermaid znajduje się na następującej stronie: https://www.processon.io/pl/mermaid/requirement-diagram
Diagramy wymagań sprawdzają się w analizie wymagań produktowych, inżynierii systemów i śledzeniu wymagań, wypróbuj bezpłatnie edytor online Mermaid do diagramów wymagań.
Podstawowa składnia
Mermaid używa deklaracji pie do tworzenia wykresu kołowego.
pie showData
title Population Share by Continent
"Asia" : 59.5
"Africa" : 18.0
"Europe" : 9.0
"North America" : 7.5
"South America" : 5.5
"Oceania" : 0.5
Efekt renderowania
Gdzie:
Aby zapoznać się ze szczegółową składnią tworzenia wykresów kołowych w Mermaid, odwiedź stronę: https://www.processon.io/pl/mermaid/pie-chart
Wykresy kołowe dobrze przedstawiają proporcje i strukturę, wypróbuj bezpłatnie edytor online Mermaid do wykresów kołowych.
Podstawowa składnia
Diagram Sankeya służy przede wszystkim do przedstawiania przepływu ruchu, zasobów, środków finansowych lub danych między różnymi węzłami, Mermaid używa deklaracji sankey-beta do tworzenia diagramu Sankeya.
sankey-beta
A,B,50
A,C,30
B,D,20
C,D,30
Efekt renderowania
Gdzie:
Aby zapoznać się ze szczegółową składnią tworzenia diagramów Sankeya w Mermaid, odwiedź stronę: https://www.processon.io/pl/mermaid/sankey-diagram
Diagram Sankeya to wizualizacja służąca do pokazywania przepływu z jednego zbioru wartości do drugiego, wypróbuj bezpłatnie edytor online Mermaid do diagramów Sankeya.
Podstawowa składnia
Mermaid używa deklaracji xychart-beta do tworzenia wykresu XY.
xychart-beta
title "Monthly Sales Data"
x-axis "Month"["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
y-axis " Sales (million)" 0 --> 100
line [20, 30, 40, 35, 50, 60]
bar [30, 50, 35, 20, 45, 40]
Efekt renderowania
Gdzie:
Często używana składnia
| Składnia | Diagram | Znaczenie |
| xychart-beta | Wykres współrzędnych XY | Tworzy wykres współrzędnych XY |
| xychart-beta horizontal | Poziomy wykres współrzędnych XY | Tworzy poziomy wykres współrzędnych XY |
| title "name" | Tytuł | Definiuje tytuł wykresu XY |
| x-axis "axisTitle" [a,b,c] | Oś X | Definiuje kategorie i tytuł osi poziomej |
| y-axis "axisTitle" min --> max | Oś Y | Definiuje zakres i tytuł osi pionowej |
| y-axis "axisTitle" | Oś Y tylko z tytułem | Ustawia tylko nazwę osi pionowej, a zakres wartości dopasowuje się automatycznie |
| bar [num1, num2, num3] | Wykres słupkowy | Definiuje serię danych wykresu słupkowego |
| line [num1, num2, num3] | Wykres liniowy | Definiuje serię danych wykresu liniowego |
Aby zapoznać się ze szczegółową składnią tworzenia wykresów xy w Mermaid, odwiedź stronę: https://www.processon.io/pl/mermaid/xy-chart
Wykresy XY dobrze pokazują zmiany danych, porównanie wartości i prostą wizualizację danych, wypróbuj bezpłatnie edytor online Mermaid do wykresów XY.
Podstawowa składnia
Wykresy radarowe dobrze porównują wiele obiektów pod względem wielu wymiarów, na przykład ocenę kompetencji, wskaźniki produktu i porównanie wariantów. Mermaid używa deklaracji radar-beta do tworzenia wykresu radarowego.
radar-beta
title "Competency Assessment Radar Chart"
axis a["Communication Skills"], b["Logical Thinking"], c["Team Collaboration"], d["Technical Skills"]
curve A["Chenlaoda"] {80, 90, 70, 85}
curve B["Wangxiaoer"] {60, 70, 90, 80}
Efekt renderowania
Gdzie:
Często używana składnia
| Składnia | Diagram | Znaczenie |
| radar-beta | Wykres radarowy | Tworzy wykres radarowy |
| title "name" | Tytuł | Definiuje tytuł wykresu radarowego bezpośrednio po radar-beta |
| title "name" | Tytuł | Definiuje tytuł wykresu radarowego przed radar-beta, z 3 liniami poziomymi dodanymi powyżej i poniżej |
| axis id ["axisTitle"] | Oś wymiaru | Definiuje wymiary i nazwy wykresu radarowego |
| curve id ["name"]{[values]} | Krzywa danych | Definiuje nazwę serii danych i wartości w poszczególnych wymiarach |
| max value | Wartość maksymalna | Ustawia wartość maksymalną zakresu wykresu radarowego |
| min value | Wartość minimalna | Ustawia wartość minimalną zakresu wykresu radarowego |
Aby zapoznać się ze szczegółową składnią tworzenia wykresów radarowych w Mermaid, odwiedź stronę: https://www.processon.io/pl/mermaid/radar-chart
Wykresy radarowe są szczególnie przydatne dla programistów, analityków danych i inżynierów, którzy muszą przedstawiać dane w przejrzysty i zwięzły sposób w układzie kołowym, wypróbuj bezpłatnie edytor online Mermaid do wykresów radarowych.
Podstawowa składnia
Mermaid używa deklaracji gitGraph do tworzenia wykresu Git.
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge develop
Efekt renderowania
Gdzie:
Aby zapoznać się ze szczegółową składnią tworzenia wykresów Git w Mermaid, odwiedź stronę: https://www.processon.io/pl/mermaid/git-graph
Wykresy Git dobrze przedstawiają procesy kontroli wersji, takie jak commity Git, tworzenie gałęzi, przełączanie gałęzi i scalanie, wypróbuj bezpłatnie edytor online Mermaid do wykresów Git.
Podstawowa składnia
Diagramy C4 Mermaid służą do modelowania architektury oprogramowania i pozwalają opisać na różnych poziomach systemy, kontenery, komponenty oraz relacje między nimi.
C4Context
title C4 Diagram of the Business System
Person(user, " User", " System user")
System(system, " Business System", " Core business system")
Rel(user, system, "Uses")
Efekt renderowania
Gdzie:
Często używana składnia
| Składnia | Diagram | Znaczenie |
| C4Context | Diagram kontekstu systemu | Tworzy diagram kontekstu systemu C4 |
| C4Container | Diagram kontenerów | Tworzy diagram kontenerów C4 |
| C4Component | Diagram komponentów | Tworzy diagram komponentów C4 |
| C4Dynamic | Diagram interakcji dynamicznych | Tworzy diagram interakcji dynamicznych C4 |
| C4Deployment | Diagram wdrożenia | Tworzy diagram wdrożenia C4 |
| title | Tytuł | Ustawia tytuł diagramu C4 |
| Person(alias, "label", "description") | Osoba | Oznacza użytkownika lub rolę korzystającą z systemu |
| Person_Ext(alias, "label", "description") | Osoba zewnętrzna | Oznacza osoby lub role organizacyjne spoza systemu, które uczestniczą w interakcji |
| System(alias, "label", "description") | Węzeł systemu | Oznacza system oprogramowania podlegający analizie |
| System_Ext(alias, "label", "description") | Węzeł systemu zewnętrznego | Oznacza usługi firm trzecich lub zewnętrzne systemy, od których zależy system |
| System_Boundary(alias, "label") | Granica systemu | Oznacza granicę zakresu systemu |
| Container(alias, "label", "technology") | Kontener | Oznacza niezależnie działającą jednostkę oprogramowania wewnątrz systemu |
| Container_Boundary(alias, "label") | Granica kontenera | Oznacza zakres jednego kontenera lub usługi |
Aby zapoznać się ze szczegółową składnią tworzenia diagramów C4 w Mermaid, odwiedź stronę: https://www.processon.io/pl/mermaid/c4-diagram
Diagramy C4 sprawdzają się w projektowaniu architektury oprogramowania, analizie systemów i dokumentacji technicznej, wypróbuj bezpłatnie edytor online Mermaid do diagramów C4.
Podstawowa składnia
Mermaid używa deklaracji architecture-beta do tworzenia diagramu architektury.
architecture-beta
group api(cloud)[API server]
service server(server)[server] in api
service database(database)[databasa] in api
server:R --> L:database
Efekt renderowania
Gdzie:
Aby zapoznać się ze szczegółową składnią tworzenia diagramów architektury w Mermaid, odwiedź stronę: https://www.processon.io/pl/mermaid/architecture-diagram
Diagramy architektury dobrze przedstawiają relacje między serwerami, bazami danych, usługami w chmurze, usługami aplikacyjnymi i innymi komponentami systemu, wypróbuj bezpłatnie edytor online Mermaid do diagramów architektury.
Podstawowa składnia
Diagramy blokowe opisują strukturę systemu głównie za pomocą modułów i relacji między nimi, Mermaid używa deklaracji block-beta do tworzenia diagramu blokowego.
block-beta
A space B
A["User"] --> B["Application"]
B space C
B --> C["Database"]
Efekt renderowania
Gdzie:
Aby zapoznać się ze szczegółową składnią tworzenia diagramów blokowych w Mermaid, odwiedź stronę: https://www.processon.io/pl/mermaid/block-diagram
Diagramy blokowe sprawdzają się w takich scenariuszach jak moduły systemu, struktura funkcji, architektura techniczna i relacje między komponentami, wypróbuj bezpłatnie edytor online Mermaid do diagramów blokowych.
Podstawowa składnia
Diagram pakietów służy przede wszystkim do przedstawiania pól i długości w pakietach sieciowych lub strukturach danych protokołów, Mermaid używa deklaracji packet-beta do tworzenia diagramu pakietów.
packet-beta
0-7: "Version"
8-15: "Type"
16-31: "Length"
Efekt renderowania
Gdzie:
Diagramy pakietów sprawdzają się w protokołach sieciowych, strukturach pakietów i dokumentacji specyfikacji technicznych, wypróbuj bezpłatnie edytor online Mermaid do diagramów pakietów.
Nieznajomość składni Mermaid nie oznacza, że nie można używać Mermaid do generowania diagramów, Można skorzystać z kilku sposobów:
Bezpłatnie korzystać z szablonów Mermaid
Najpierw wybierz szablon zbliżony do swoich potrzeb, a następnie zmodyfikuj w nim węzły, tekst i relacje. Ten sposób sprawdza się u użytkowników, którzy używają Mermaid po raz pierwszy.
Generowanie kodu Mermaid przez AI
Możesz opisać potrzebny diagram zwykłym językiem, na przykład:
Utwórz proces obsługi zamówień w e-commerce, obejmujący złożenie zamówienia przez użytkownika, płatność, sprawdzenie stanu magazynu, wysyłkę i zakończenie zamówienia.
AI może wygenerować kod Mermaid na podstawie opisu, a następnie zmodyfikować go zgodnie z rzeczywistymi potrzebami.
Sprawdzanie i naprawianie kodu za pomocą AI
Jeśli w kodzie Mermaid pojawi się błąd składni, możesz poprosić AI o pomoc w zlokalizowaniu problemu i poprawieniu kodu.
Generowanie kodu na podstawie rozpoznawania obrazu
W przypadku istniejących schematów blokowych, diagramów architektury lub innych diagramów strukturalnych możesz spróbować wygenerować kod Mermaid na podstawie rozpoznawania obrazu, a następnie kontynuować edycję.
Edytor online Mermaid musi zwykle rozwiązywać trzy kluczowe problemy: pisanie kodu, podgląd diagramu i eksport wyników. Dodatkowo szablony i AI mogą obniżyć próg wejścia w Mermaid.
Na przykładzie ProcessOn Mermaid online można w przeglądarce bezpośrednio:
Dlatego w przypadku użytkowników, którzy często tworzą diagramy Mermaid, edytor online ProcessOn Mermaid pozwala połączyć pisanie kodu Mermaid, generowanie diagramów, późniejszą edycję i modyfikację, eksport i udostępnianie w jednym środowisku pracy.
Od schematów blokowych, diagramów sekwencji i diagramów klas Mermaid po wykresy Gantta, mapy myśli, wykresy kwadrantowe, diagramy Sankeya, wykresy Git, diagramy C4 i diagramy architektury – wszystkie można tworzyć za pomocą składni Mermaid i edytować.
Już teraz skorzystaj z edytora online Mermaid, pisz kod Mermaid online i generuj diagramy!
Czy składnia Mermaid jest trudna do nauki?
Podstawowa składnia Mermaid jest stosunkowo prosta – w większości diagramów wystarczy opanować podstawowe zapisy, takie jak deklaracja diagramu, węzły, połączenia i tekst. Na przykład sequenceDiagram służy do deklarowania diagramu sekwencji, a flowchart do deklarowania schematu blokowego. Zasady składni poszczególnych typów diagramów różnią się, a w przypadku złożonych diagramów trzeba dodatkowo poznać odpowiednie parametry i konfigurację.
Dlaczego mimo błędu w kodzie Mermaid nie powstaje diagram?
Mermaid jest dość wrażliwy na strukturę składni. Typowe przyczyny to błędna deklaracja diagramu, niekompletna składnia węzła lub połączenia, nieprawidłowe wcięcia lub znaki specjalne oraz użycie składni nieobsługiwanej przez daną wersję Mermaid.
Czym różni się Mermaid od tradycyjnego oprogramowania do rysowania?
Mermaid opisuje diagramy głównie za pomocą kodu tekstowego, natomiast tradycyjne oprogramowanie do rysowania tworzy diagramy zwykle przez przeciąganie kształtów, łączenie ich liniami i dostosowywanie stylów.
Czy diagramy Mermaid można zapisywać i używać ponownie?
Tak. Podstawową treścią diagramów Mermaid jest kod tekstowy, dlatego można zapisać kod w Markdown, pliku kodu lub innym dokumencie obsługującym Mermaid i w razie potrzeby wyrenderować go ponownie.
To także ważna różnica między Mermaid a diagramami w postaci zwykłych obrazów: Obraz przechowuje wynik końcowy, natomiast kod Mermaid przechowuje jednocześnie informacje o strukturze diagramu.
Jaki jest związek między Mermaid a Markdown?
Mermaid jest często używany razem z Markdown, ale to nie ta sama składnia.
Markdown służy głównie do pisania tekstu strukturalnego, a Mermaid do generowania diagramów za pomocą kodu. W edytorze Markdown obsługującym Mermaid można osadzić kod Mermaid w dokumencie Markdown, dzięki czemu diagram i opis tekstowy znajdują się w tym samym dokumencie.
Następując tutorial, aby spróbować
Darmowe korzystanie z ProcessOn
