Proseso Uri
Graphical na pagpapahayag
Nag-iisip Uri
Nakabalangkas na pagpapahayag
Mga Tala Uri
Mahusay na pagpapahayag
Treemap
Diagram ng bracket
Default na Mode
Ang Mermaid ay isang tool na gumagawa ng chart gamit ang text-based na syntax. Sa pagsusulat ng simpleng Mermaid code, makakagawa ka ng flowchart, sequence diagram, class diagram, state diagram, ER diagram, Gantt chart, mind map, architecture diagram at iba pang uri ng chart.
Kakaiba sa tradisyonal na drag-and-drop na drawing tool, inilalarawan ng Mermaid sa pamamagitan ng code ang mga node, relasyon, pagkakasunod-sunod ng oras at istruktura ng data sa chart. Kapag binago ang code, awtomatikong nabubuo muli ang chart, kaya napakaangkop ito para sa technical document, product design, project management, software development at knowledge organization.
Ipinapakilala ng artikulong ito ang pangunahing syntax ng Mermaid at tinitipon ang mga uri ng diagram na kayang i-render ng Mermaid editor, kasama ang syntax ng deklarasyon, halimbawa ng code at mga sitwasyon ng paggamit. Kung gusto mong magsulat at mag-preview ng Mermaid code nang direkta online, maaari kang sumubok nang libre ng online editor ng Mermaid mula sa ProcessOn.
Ang Mermaid ay isang tool na gumagawa ng chart gamit ang text syntax. Ang code sa ibaba ay makakagawa ng simpleng Mermaid flowchart:
flowchart TD
A[Start] --> B[Enter information]
B --> C{ Completed?}
C -->|Yes| D[End]
C -->|No| B
Ang resulta ng pag-render ay ang sumusunod:
Kung saan: flowchart TD ay ginagamit para sa declaration ng paggawa ng flowchart na nakaayos mula taas pababa.
Ang logic ng pagpapatakbo ng Mermaid ay maaaring ibuod sa:
Sumulat ng Mermaid code → i-parse ang code → i-render ang chart → baguhin ang code → ang chart ay nag-a-update nang real-time
Kaya, ang isa sa mga susi sa pag-aaral ng Mermaid ay ang pag-unawa sa declaration syntax na katumbas ng bawat chart.
Gumagamit ng iba't ibang syntax ng deklarasyon ng Mermaid ang iba't ibang uri ng diagram, sa ngayon ang mga karaniwang Mermaid diagram ay kasama ang:
| Uri ng chart | Mermaid declaration syntax | Karaniwang gamit |
| flowchart | flowchart | Business process, algorithm, workflow |
| sequence diagram | sequenceDiagram | System interaction, API call |
| class diagram | classDiagram | Software structure, object-oriented modeling |
| state diagram | stateDiagram-v2 | State transition, state machine |
| ER diagram | erDiagram | Relasyon ng entity sa database |
| Gantt chart | gantt | Project plan, progreso ng task |
| user journey diagram | journey | User experience, customer journey |
| mind map | mindmap | Knowledge organization, brainstorming |
| timeline | timeline | Timeline, makasaysayang pangyayari |
| pie chart | pie | Proporsyon, pagsusuri ng komposisyon |
| quadrant chart | quadrantChart | Klasipikasyon, priority, pagsusuri ng posisyon |
| Git graph | gitGraph | Git branch, commit, merge |
| Sankey diagram | sankey-beta | Data, resource, daloy ng trapiko |
| XY chart | xychart-beta | Trend ng data, paghahambing ng value |
| radar chart | radar | Paghahambing ng multi-dimension na indicator |
| C4 diagram | C4Context at iba pa | Software architecture modeling |
| architecture diagram | architecture-beta | Arkitektura ng system, service at resource |
| kanban diagram | kanban | Pamamahala ng task at status ng trabaho |
| block diagram | block-beta | Module, istruktura at relasyon ng system |
| packet diagram | packet-beta | Istruktura ng network packet |
| requirement diagram | requirementDiagram | Pagsusuri ng requirement at relasyon ng requirement |
Ang iba't ibang bersyon ng Mermaid editor ay maaaring may iba't ibang suporta sa syntax at function ng chart, kaya sa aktwal na paggamit, sundin ang syntax na sinusuportahan ng editor.
Basic syntax
Gumagamit ang Mermaid ng flowchart declaration para gumawa ng flowchart. Ang pinakasimpleng paraan ng pagsulat:
flowchart TD
A[Start] --> B[Arrange]
B --> C[End]
Resulta ng pag-render
Kung saan:
Ang Mermaid flowchart ay maaari ring gumamit ng LR (mula kaliwa pakanan), RL (mula kanan pakaliwa), BT (mula baba pataas) at iba pang setting ng direksyon. Halimbawa:
flowchart LR
A[Start] --> B[Arrange] --> C[End]
Ipinapakita ang flowchart na nakaayos mula kaliwa pakanan.
Karaniwang syntax
| syntax | Diagram | Kahulugan |
| (text) | rounded rectangle | nangangahulugan ng simula, pagtatapos o pangkalahatang operasyon ng proseso |
| [text] | rectangle | nangangahulugan ng partikular na hakbang, task o proseso ng pagproseso |
| {text} | diamond | nangangahulugan ng paghuhusga, conditional branch |
| ((text)) | circle | nangangahulugan ng connection point o event |
| [[text]] | double rectangle | nangangahulugan ng pagtawag sa sub-process, sub-module |
| [(text)] | cylinder | nangangahulugan ng database node |
| >text] | asymmetric shape | nangangahulugan ng input/output |
| [/text/] | parallelogram | nangangahulugan ng input o output na data |
| --> | arrow | nangangahulugan ng direksyon ng pag-usad ng proseso |
| --- | link na walang arrow | nangangahulugan ng relasyon ng pagkakaugnay |
| -.-> | dashed arrow | nangangahulugan ng opsyonal na proseso, relasyon ng reference |
| ==> | thick arrow | nangangahulugan ng pangunahing proseso o malakas na pagkakaugnay |
Para sa detalyadong syntax ng paggawa ng Mermaid flowchart, bisitahin ang sumusunod na pahina: https://www.processon.io/tl/mermaid/flowchart
Ang flowchart ay angkop para sa business process, workflow, algorithm flow, system flow at decision flow, subukan nang libre ang online editor ng Mermaid para sa flowchart.
Basic syntax
Gumagamit ang Mermaid ng sequenceDiagram declaration para gumawa ng sequence diagram. Ang pinakasimpleng halimbawa:
sequenceDiagram
Alice->>John: Hello John
John-->>Alice: Hello Alice
Resulta ng render
Kung saan:
Karaniwang syntax
| syntax | Diagram | Kahulugan |
| sequenceDiagram | sequence diagram | gumawa ng sequence diagram |
| A->B: message | solid line | nangangahulugan ng synchronous na tawag ng mensahe o ordinaryong interaksyon |
| A-->B: message | dashed line | nangangahulugan ng mensahe ng pagbabalik o mahinang pagkakaugnay na interaksyon |
| A->>B: message | solid arrow | nangangahulugan ng async na tawag ng mensahe |
| A-->>B: message | dashed arrow | nangangahulugan ng async na tugon o mensahe ng pagbabalik |
| participant A | participant | tumutukoy sa object, role o system sa interaksyon |
| actor A | actor | nangangahulugan ng user, external system at iba pang aktibong participant |
| activate A | activation box | nangangahulugan ng pagsisimula ng object sa pagproseso ng request |
| deactivate A | pagtatapos ng activation | nangangahulugan ng pagtatapos ng object sa kasalukuyang pagproseso |
| loop text | loop box | nangangahulugan ng paulit-ulit na interaksyon |
| alt text | conditional branch | nangangahulugan ng landas ng interaksyon sa iba't ibang kondisyon |
| opt text | opsyonal na proseso | nangangahulugan ng interaksyong maaaring isagawa |
| par text | parallel box | nangangahulugan ng sabay na pagpapatupad ng maraming operasyon |
Para sa detalyadong syntax ng paggawa ng Mermaid sequence diagram, bisitahin ang sumusunod na pahina: https://www.processon.io/tl/mermaid/sequence-diagram
Ang sequence diagram ay angkop para ilarawan ang interaksyon ng user at system, system at system, service at service na nangyayari ayon sa pagkakasunod-sunod ng oras, subukan nang libre ang online editor ng Mermaid para sa sequence diagram.
Basic syntax
Gumagamit ang Mermaid ng classDiagram declaration para gumawa ng class diagram.
classDiagram
Animal <|-- Duck
Animal <|-- Fish
class Animal {
+String name
+eat()
}
class Duck {
+swim()
}
Resulta ng render
Kung saan:
Karaniwang syntax
| syntax | Diagram | Kahulugan |
| classDiagram | class diagram | gumawa ng class diagram |
| class ClassName | class | tumutukoy sa isang class object |
| ClassName : attribute | attribute | nangangahulugan ng member variable sa class |
| ClassName : method() | method | tumutukoy sa method ng class |
| <|-- | hollow triangle+ solid line | nangangahulugan ng relasyon ng inheritance |
| <|.. | hollow triangle+ dashed line | nangangahulugan ng relasyon ng realization |
| *-- | filled diamond+ solid line | nangangahulugan ng relasyon ng composition |
| o-- | hollow diamond+ solid line | nangangahulugan ng relasyon ng aggregation |
| --> | solid arrow | nangangahulugan ng relasyon ng pagkakaugnay |
| ..> | dashed arrow | nangangahulugan ng relasyon ng dependency |
| -- | solid line | nangangahulugan ng ordinaryong relasyon ng koneksyon |
| +attribute | plus sign | nangangahulugan ng public na attribute o method |
| -attribute | minus sign | nangangahulugan ng private na attribute o method |
Ang mga simbolo tulad ng +, -, # sa harap ng class member ay makapagtutukoy ng iba't ibang visibility.
Para sa detalyadong syntax ng paggawa ng Mermaid class diagram, bisitahin ang sumusunod na pahina: https://www.processon.io/tl/mermaid/class-diagram
Ang class diagram ay angkop para sa software design, object-oriented modeling, pagsusuri ng istruktura ng programa at iba pang senaryo, subukan nang libre ang online editor ng Mermaid para sa class diagram.
Basic syntax
Gumagamit ang Mermaid ng stateDiagram-v2 declaration para gumawa ng state diagram.
stateDiagram-v2
state "Pending Payment" as Pending
[*] --> Pending
Pending --> Paid
Paid --> Shipped
Shipped --> Completed
Completed--> [*]
Resulta ng render
Kung saan:
Karaniwang syntax
| syntax | Diagram | Kahulugan |
| stateDiagram-v2 | state diagram | gumawa ng state diagram |
| state StateName | rounded rectangle | tumutukoy sa basic na state node |
| state StateName : text | rounded rectangle na may text | nagdadagdag ng deskriptibong text sa state |
| [*] | filled na maliit na tuldok o double ring | nangangahulugan ng simula o pagtatapos ng state |
| [*] --> StateName | start arrow | nangangahulugan ng pagpasok sa unang state |
| StateName --> [*] | end arrow | nangangahulugan ng pagtatapos ng daloy ng state |
| A --> B | solid arrow | nangangahulugan ng state transition |
| A --> B: event | solid arrow na may label | state transition na may trigger event |
| state StateName { ... } | nested rounded rectangle | tumutukoy sa composite state |
| state Node <<choice>> | diamond | node para sa pagpili ng branch |
| state Fork <<fork>> | makapal na pahalang na separator | nangangahulugan ng simula ng parallel na proseso |
| state Join <<join>> | makapal na pahalang na separator | nangangahulugan ng pagtatapos at pagsasama ng parallel na proseso |
Para sa detalyadong syntax ng paggawa ng Mermaid state diagram, bisitahin ang sumusunod na pahina: https://www.processon.io/tl/mermaid/state-diagram
Ang state diagram ay angkop para kumatawan sa status ng order, status ng workflow, status ng user, status ng system at state machine, subukan nang libre ang online editor ng Mermaid para sa state diagram.
Basic syntax
Gumagamit ang Mermaid ng erDiagram declaration para gumawa ng entity relationship diagram, o ER diagram.
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ PRODUCT : contains
Resulta ng render
Kung saan:
Karaniwang syntax
| syntax | Diagram | Kahulugan |
| erDiagram | ER diagram | Gumagawa ng ER diagram |
| ENTITY { } | rectangle | tumutukoy sa isang entity |
| type field | attribute marker | tumutukoy sa attribute ng entity |
| type field PK | primary key | tumutukoy sa primary key ng entity |
| type field FK | foreign key | tumutukoy sa foreign key ng entity |
| type field UK | unique key | tumutukoy sa field na may unique constraint |
| || | isa | kinakailangan at isa lamang |
| o| | zero o isa | zero o isa |
| |{ | isa o higit pa | hindi bababa sa isa |
| o{ | zero o isa o higit pa | zero o higit pa |
Para sa detalyadong syntax ng paggawa ng Mermaid ER diagram, bisitahin ang sumusunod na pahina: https://www.processon.io/tl/mermaid/er-diagram
Ang ER diagram ay makapagpapakita ng entity, attribute at relasyon ng mga entity, at karaniwang ginagamit sa database design, subukan nang libre ang online editor ng Mermaid para sa ER diagram.
Basic syntax
Gumagamit ang Mermaid ng mindmap declaration para gumawa ng mind map.
mindmap
root((Mermaid))
Flowchart
Sequence diagram
Class diagram
Gantt chart
Mind map
Resulta ng render
Kung saan:
Karaniwang syntax
| syntax | Diagram | Kahulugan |
| mindmap | mind map | gumawa ng mind map |
| root[text] | rectangle | rectangular na root theme |
| root(text) | rounded rectangle | rounded rectangle na root theme |
| root((text)) | circle | circular na root theme |
| root{{text}} | hexagon | hexagon na root theme |
| root)text( | bubble | bubble na root theme |
| [text] | rectangle | rectangle na node |
| (text) | rounded rectangle | rounded rectangle na node |
| ((text)) | circle | circular na node |
| {{text}} | hexagon | hexagon na node |
| )text( | bubble | bubble na node |
Para sa detalyadong syntax ng paggawa ng Mermaid mind map, bisitahin ang sumusunod na pahina: https://www.processon.io/tl/mermaid/mindmap
Ang mind map ay pangunahing gumagamit ng indentasyon para ipakita ang hierarchy, kaya napakaangkop ito para sa knowledge organization, brainstorming, course note at information architecture, subukan nang libre ang online editor ng Mermaid para sa mind map.
Basic syntax
Gumagamit ang Mermaid ng gantt declaration para gumawa ng Gantt chart.
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
Resulta ng render
Kabilang dito:
Karaniwang syntax
| syntax | Diagram | Kahulugan |
| gantt | Gantt chart | gumawa ng Gantt chart |
| title text | title | nagse-set ng title ng Gantt chart |
| dateFormat text | date configuration identifier | tumutukoy sa format ng pag-parse ng petsa sa timeline |
| section text | title bar ng group color block | naghahati sa group ng task |
| TaskName : id, startDate, endDate | pahalang na bar ng task | tumutukoy sa kaugnay na attribute ng task |
| startDate | pahalang na bar ng task | tumutukoy sa oras ng pagsisimula |
| endDate | pahalang na bar ng task | tumutukoy sa oras ng pagtatapos |
| duration | pahalang na bar ng task | tumutukoy sa tagal ng task |
| id | custom | tumutukoy sa numero ng task |
| after id | pahalang na bar ng task | tumutukoy sa task na nagsisimula kasunod ng naunang task |
| 16d, 2w | pahalang na bar ng task | nangangahulugan ng araw o linggo |
| milestone, date | filled diamond | nagse-set ng milestone node |
Para sa detalyadong syntax ng paggawa ng Mermaid Gantt chart, bisitahin ang sumusunod na pahina: https://www.processon.io/tl/mermaid/gantt
Ang Mermaid Gantt chart ay angkop para sa project plan, pag-ayos ng task, progreso ng development at project management, subukan nang libre ang online editor ng Mermaid para sa Gantt chart.
Basic syntax
Gumagamit ang Mermaid ng journey declaration para gumawa ng user journey diagram.
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
Resulta ng render
Kabilang dito:
Karaniwang syntax
| syntax | Diagram | Kahulugan |
| journey | user journey diagram | gumawa ng user journey diagram |
| title text | title | title ng user journey diagram |
| section text | section block | naghahati sa group ng yugto ng proseso |
| TaskName:num:Actor | process node + satisfaction scale axis | tumutukoy sa task ng interaksyon, score ng satisfaction at participant sa loob ng yugto |
| num (1~5) | satisfaction rating | 1 ang pinakamababa, 5 ang pinakamainam |
| Me, Cat | actor | tumutukoy sa maraming actor na kalahok sa task |
Para sa detalyadong syntax ng paggawa ng Mermaid user journey diagram, bisitahin ang sumusunod na pahina: https://www.processon.io/tl/mermaid/user-journey-diagram
Ang user journey diagram ay angkop para sa pagsusuri ng iba't ibang hakbang at karanasan ng customer mula sa pagkakadikit sa produkto hanggang sa pagkumpleto ng layunin, subukan nang libre ang online editor ng Mermaid para sa user journey diagram.
Basic syntax
Gumagamit ang Mermaid ng timeline declaration para gumawa ng timeline.
timeline
title Mermaid Development History
2019 : Project Development
2020 : Feature Expansion
2021 : More Diagram Types
Resulta ng render
Kung saan:
Karaniwang syntax
| syntax | Diagram | Kahulugan |
| timeline | timeline | gumawa ng timeline |
| title text | title | nagse-set ng title ng timeline |
| section text | section block | naghahati sa group ng yugto ng oras |
| date : Event1 | event | tumutukoy sa event na katumbas ng punto ng oras |
| : Event2 | maraming event | iba pang event sa parehong oras |
| space | newline | newline para sa napakahabang paglalarawan ng event |
Para sa detalyadong syntax ng paggawa ng Mermaid timeline, bisitahin ang sumusunod na pahina: https://www.processon.io/tl/mermaid/timeline
Ang timeline ay angkop para magpakita ng makasaysayang pangyayari, pag-unlad ng proyekto, product iteration at impormasyon ng pagkakasunod-sunod ng oras, subukan nang libre ang online editor ng Mermaid para sa timeline.
Basic syntax
Gumagamit ang Mermaid ng quadrantChart declaration para gumawa ng quadrant chart.
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]
Resulta ng render
Kung saan:
Para sa detalyadong syntax ng paggawa ng Mermaid quadrant chart, bisitahin ang sumusunod na pahina: https://www.processon.io/tl/mermaid/quadrant-chart
Ang quadrant chart ay angkop para sa product positioning, priority analysis, competitive analysis at two-dimensional na klasipikasyon, subukan nang libre ang online editor ng Mermaid para sa quadrant chart.
Basic syntax
Ang Mermaid kanban diagram ay ginagamit para ayusin ang work item ayon sa status ng task, halimbawa para gawin, ginagawa at tapos na. Ang tipikal na istruktura ay maaaring ipakita bilang:
kanban
Todo
Task A
Task B
Doing
Task C
Done
Task D
Resulta ng render
Kung saan;
Para sa detalyadong syntax ng paggawa ng Mermaid kanban diagram, bisitahin ang sumusunod na pahina: https://www.processon.io/tl/mermaid/kanban
Ang kanban diagram ay angkop para sa project management, task tracking, R&D process at workflow management, subukan nang libre ang online editor ng Mermaid para sa kanban diagram.
Basic syntax
Ang requirement diagram ay maaaring gamitin para ipakita ang relasyon ng requirement, function at system element, Gumagamit ang Mermaid ng requirementDiagram declaration para gumawa ng requirement diagram.
requirementDiagram
requirement userRequirement {
id: 1
text: Customers can purchase products
risk: low
verifymethod: test
}
Resulta ng render
Kung saan:
Karaniwang syntax
| syntax | Diagram | Kahulugan |
| requirementDiagram | requirement diagram | gumawa ng requirement diagram |
| Requirement name { } | requirement | tumutukoy sa basic requirement |
| functionalRequirement name { } | function | tumutukoy sa functional requirement |
| interfaceRequirement name { } | interface | tumutukoy sa interface requirement |
| performanceRequirement name { } | performance | tumutukoy sa performance requirement |
| physicalRequirement name { } | physical | tumutukoy sa physical requirement |
| element name {type: name docRef: name} | element | tumutukoy sa entity element tulad ng system / component / test |
| X - satisfies -> Y | dashed arrow | natutugunan ng entity ang katumbas na requirement |
| X - contains -> Y | solid line, may cross at plus na circular na dulo sa simula | naglalaman ang isang requirement ng isa pang requirement |
| X - derives -> Y | dashed arrow | ang requirement ay hinango mula sa isa pang requirement |
| X - copies -> Y | dashed arrow | kinokopya ng requirement ang isa pang requirement |
| X - traces -> Y | dashed arrow | two-way na traceability na relasyon ng requirement |
Ang kumpletong syntax ng paggawa ng requirement diagram ng Mermaid ay makikita sa sumusunod na pahina: https://www.processon.io/tl/mermaid/requirement-diagram
Ang requirement diagram ay angkop para sa product requirement analysis, systems engineering at requirement tracing, subukan nang libre ang online editor ng Mermaid para sa requirement diagram.
Basic syntax
Gumagamit ang Mermaid ng pie declaration para gumawa ng pie chart.
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
Resulta ng render
Kung saan:
Para sa detalyadong syntax ng paggawa ng Mermaid pie chart, bisitahin ang sumusunod na pahina: https://www.processon.io/tl/mermaid/pie-chart
Ang pie chart ay angkop para ipakita ang proporsyon at relasyon ng komposisyon, subukan nang libre ang online editor ng Mermaid para sa pie chart.
Basic syntax
Ang Sankey diagram ay pangunahing ginagamit para ipakita ang daloy ng trapiko, resource, pondo o data sa pagitan ng iba't ibang node, Gumagamit ang Mermaid ng sankey-beta declaration para gumawa ng Sankey diagram.
sankey-beta
A,B,50
A,C,30
B,D,20
C,D,30
Resulta ng render
Kung saan:
Para sa detalyadong syntax ng paggawa ng Mermaid Sankey diagram, bisitahin ang sumusunod na pahina: https://www.processon.io/tl/mermaid/sankey-diagram
Ang Sankey diagram ay isang visualization chart na ginagamit para ipakita ang pagdaloy mula sa isang set ng value tungo sa isa pang set ng value, subukan nang libre ang online editor ng Mermaid para sa Sankey diagram.
Basic syntax
Gumagamit ang Mermaid ng xychart-beta declaration para gumawa ng XY chart.
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]
Resulta ng render
Kung saan:
Karaniwang syntax
| syntax | Diagram | Kahulugan |
| xychart-beta | XY coordinate chart | gumawa ng XY coordinate chart |
| xychart-beta horizontal | pahalang na XY coordinate chart | gumawa ng pahalang na XY coordinate chart |
| title "name" | title | tumutukoy sa title ng XY chart |
| x-axis "axisTitle" [a,b,c] | X axis | tumutukoy sa kategorya at title ng pahalang na axis |
| y-axis "axisTitle" min --> max | Y axis | tumutukoy sa range at title ng patayong axis |
| y-axis "axisTitle" | Y axis na may title lamang | tinutukoy lamang ang pangalan ng patayong axis, awtomatikong umaangkop ang range ng value |
| bar [num1, num2, num3] | bar chart | tumutukoy sa data series ng bar chart |
| line [num1, num2, num3] | line chart | tumutukoy sa data series ng line chart |
Para sa detalyadong syntax ng paggawa ng Mermaid XY chart, bisitahin ang sumusunod na pahina: https://www.processon.io/tl/mermaid/xy-chart
Ang XY chart ay angkop para magpakita ng pagbabago ng data, paghahambing ng value at simpleng data visualization, subukan nang libre ang online editor ng Mermaid para sa XY chart.
Basic syntax
Ang radar chart ay angkop para ihambing ang performance ng maraming object sa maraming dimension, tulad ng assessment ng kakayahan, indicator ng produkto at paghahambing ng solusyon. Gumagamit ang Mermaid ng radar-beta declaration para gumawa ng radar chart.
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}
Resulta ng render
Kung saan:
Karaniwang syntax
| syntax | Diagram | Kahulugan |
| radar-beta | radar chart | gumawa ng radar chart |
| title "name" | title | tumutukoy sa title ng radar chart, na sumusunod kaagad pagkatapos ng radar-beta |
| title "name" | title | tumutukoy sa title ng radar chart, inilalagay bago ang radar-beta, at kailangang magdagdag ng 3 gitling sa itaas at ibaba |
| axis id ["axisTitle"] | dimension axis | tumutukoy sa dimension at pangalan ng radar chart |
| curve id ["name"]{[values]} | data curve | tumutukoy sa pangalan ng data series at value ng bawat dimension |
| max value | maximum value | nagse-set ng maximum value ng range ng numero ng radar chart |
| min value | minimum value | nagse-set ng minimum value ng range ng numero ng radar chart |
Para sa detalyadong syntax ng paggawa ng Mermaid radar chart, bisitahin ang sumusunod na pahina: https://www.processon.io/tl/mermaid/radar-chart
Ang radar chart ay partikular na kapaki-pakinabang para sa developer, data scientist at engineer na kailangang magpakita ng data nang malinaw at maikli sa circular na format, subukan nang libre ang online editor ng Mermaid para sa radar chart.
Basic syntax
Gumagamit ang Mermaid ng gitGraph declaration para gumawa ng Git graph.
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge develop
Resulta ng render
Kung saan:
Para sa detalyadong syntax ng paggawa ng Mermaid Git graph, bisitahin ang sumusunod na pahina: https://www.processon.io/tl/mermaid/git-graph
Ang Git graph ay angkop para ipakita ang Git commit, paggawa ng branch, paglipat ng branch at merge at iba pang proseso ng version control, subukan nang libre ang online editor ng Mermaid para sa Git graph.
Basic syntax
Ang Mermaid C4 diagram ay ginagamit para sa software architecture modeling, at makapaglalarawan ng software system, container, component at ng relasyon ng mga ito mula sa iba't ibang antas.
C4Context
title C4 Diagram of the Business System
Person(user, " User", " System user")
System(system, " Business System", " Core business system")
Rel(user, system, "Uses")
Resulta ng render
Kung saan:
Karaniwang syntax
| syntax | Diagram | Kahulugan |
| C4Context | system context diagram | gumawa ng C4 system context diagram |
| C4Container | container diagram | gumawa ng C4 container diagram |
| C4Component | component diagram | gumawa ng C4 component diagram |
| C4Dynamic | dynamic interaction diagram | gumawa ng C4 dynamic interaction diagram |
| C4Deployment | deployment diagram | gumawa ng C4 deployment diagram |
| title | title | nagse-set ng title ng C4 diagram |
| Person(alias, "label", "description") | Person | nangangahulugan ng user o role na gumagamit ng system |
| Person_Ext(alias, "label", "description") | External Person | nangangahulugan ng tao o organizational role sa labas ng system na kalahok sa interaksyon |
| System(alias, "label", "description") | system node | nangangahulugan ng software system na kailangang suriin |
| System_Ext(alias, "label", "description") | external system node | nangangahulugan ng third-party service o external software system na umaasa ang system |
| System_Boundary(alias, "label") | system boundary | nangangahulugan ng hangganan ng saklaw ng system |
| Container(alias, "label", "technology") | container | nangangahulugan ng software unit sa loob ng system na makapagpapatakbo nang nakapag-iisa |
| Container_Boundary(alias, "label") | container boundary | nangangahulugan ng saklaw ng isang container o service |
Para sa detalyadong syntax ng paggawa ng Mermaid C4 diagram, bisitahin ang sumusunod na pahina: https://www.processon.io/tl/mermaid/c4-diagram
Ang C4 diagram ay angkop para sa software architecture design, system analysis at technical document, subukan nang libre ang online editor ng Mermaid para sa C4 diagram.
Basic syntax
Gumagamit ang Mermaid ng architecture-beta declaration para gumawa ng architecture diagram.
architecture-beta
group api(cloud)[API server]
service server(server)[server] in api
service database(database)[databasa] in api
server:R --> L:database
Resulta ng render
Kung saan:
Para sa detalyadong syntax ng paggawa ng Mermaid architecture diagram, bisitahin ang sumusunod na pahina: https://www.processon.io/tl/mermaid/architecture-diagram
Ang architecture diagram ay angkop para ipakita ang server, database, cloud service, application service at relasyon ng iba't ibang component ng system, subukan nang libre ang online editor ng Mermaid para sa architecture diagram.
Basic syntax
Ang block diagram ay pangunahing naglalarawan ng istruktura ng system sa pamamagitan ng module at relasyon ng koneksyon, Gumagamit ang Mermaid ng block-beta declaration para gumawa ng block diagram.
block-beta
A space B
A["User"] --> B["Application"]
B space C
B --> C["Database"]
Resulta ng render
Kung saan:
Para sa detalyadong syntax ng paggawa ng Mermaid block diagram, bisitahin ang sumusunod na pahina: https://www.processon.io/tl/mermaid/block-diagram
Ang block diagram ay angkop para sa system module, functional structure, technical architecture at relasyon ng component at iba pang senaryo, subukan nang libre ang online editor ng Mermaid para sa block diagram.
Basic syntax
Ang packet diagram ay pangunahing ginagamit para ipakita ang field at haba sa network packet o protocol data structure, Gumagamit ang Mermaid ng packet-beta declaration para gumawa ng packet diagram.
packet-beta
0-7: "Version"
8-15: "Type"
16-31: "Length"
Resulta ng render
Kung saan:
Ang packet diagram ay angkop para sa network protocol, packet structure at technical specification document, subukan nang libre ang online editor ng Mermaid para sa packet diagram.
Ang hindi pagiging pamilyar sa Mermaid syntax ay hindi nangangahulugang hindi mo na magagamit ang Mermaid para gumawa ng diagram, maaari mong gamitin ang mga sumusunod na paraan:
Gamitin nang libre ang mga Mermaid template
Pumili muna ng template na malapit sa iyong requirement, pagkatapos ay baguhin ang node, text at relasyon dito. Ang paraang ito ay angkop para sa user na unang beses gumagamit ng Mermaid.
AI na gumagawa ng Mermaid code
Maaari mong direktang ilarawan sa natural na wika ang chart na kailangan mo, halimbawa:
Gumawa ng proseso ng pagproseso ng order sa e-commerce, kabilang ang pag-order ng user, pagbabayad, pagsuri ng stock, pagpapadala at pagkumpleto ng order.
Makakagawa ang AI ng Mermaid code batay sa paglalarawan, pagkatapos ay baguhin ito ayon sa aktwal na pangangailangan.
Gamitin ang AI para suriin at ayusin ang code
Kung may syntax error ang Mermaid code, maaari mong ipaalam sa AI na hanapin ang problema at ayusin ang code.
Gumawa ng code sa pamamagitan ng image recognition
Para sa mga umiiral nang flowchart, architecture diagram o iba pang structured chart, maaari mong subukang gumawa ng Mermaid code sa pamamagitan ng image recognition, pagkatapos ay magpatuloy sa pag-edit.
Ang Mermaid online editor ay karaniwang kailangang lutasin ang tatlong pangunahing problema: pagsulat ng code, pag-preview ng chart at pag-export ng resulta. Bukod dito, ang template at AI ay makapagpapababa rin ng hadlang sa paggamit ng Mermaid.
Gamit ang ProcessOn Mermaid online editor bilang halimbawa, maaari mong direktang gawin sa browser:
Kaya naman, para sa mga user na madalas gumawa ng Mermaid diagram, pinagsasama-sama ng online editor ng ProcessOn Mermaid ang pagsulat ng Mermaid code, pagbuo ng diagram, pag-edit at pagbabago muli, pag-export at pagbabahagi sa isang nag-iisang workspace.
Mula sa Mermaid flowchart, sequence diagram, class diagram, hanggang sa Gantt chart, mind map, quadrant chart, Sankey diagram, Git graph, C4 diagram at architecture diagram, lahat ay makakagawa sa pamamagitan ng Mermaid syntax at mag-edit.
Halina't gamitin ang Mermaid online editor, magsulat ng Mermaid code online at gumawa ng chart.
Mahirap bang matutunan ang Mermaid syntax?
Ang basic syntax ng Mermaid ay medyo simple, karamihan sa chart ay kailangan lang na makabisado ang chart declaration, node, link at text at iba pang basic na paraan ng pagsulat. Halimbawa, ang sequenceDiagram ay ginagamit para sa declaration ng sequence diagram, at ang flowchart ay para sa declaration ng flowchart. May pagkakaiba ang mga panuntunan ng syntax ng iba't ibang uri ng chart, at ang mga kumplikadong chart ay nangangailangan pa ng karagdagang pag-aaral ng katumbas na parameter at configuration.
Bakit hindi makagawa ng chart kapag mali ang pagkakasulat ng Mermaid code?
Ang Mermaid ay medyo sensitibo sa istruktura ng syntax. Kasama sa mga karaniwang dahilan ang maling pagkakasulat ng chart declaration, hindi kumpletong syntax ng node o link, hindi tamang paghawak sa indentasyon o espesyal na karakter, at paggamit ng syntax na hindi sinusuportahan ng kasalukuyang bersyon ng Mermaid.
Ano ang pagkakaiba ng Mermaid at tradisyonal na drawing software?
Pangunahing inilalarawan ng Mermaid ang chart sa pamamagitan ng text code, habang ang tradisyonal na drawing software ay karaniwang gumagawa ng chart sa pamamagitan ng pag-drag ng shape, link at pagsasaayos ng estilo.
Maaari bang i-save at gamitin muli ang Mermaid chart?
Oo. Ang pangunahing nilalaman ng Mermaid chart ay text code, kaya maaari mong i-save ang code sa Markdown, code file o iba pang dokumentong sumusuporta sa Mermaid, at i-render muli kapag kailangan.
Ito rin ang isang mahalagang pagkakaiba ng Mermaid sa chart na puro larawan: ang larawan ay nag-iimbak ng final na resulta, habang ang Mermaid code ay nag-iimbak din ng impormasyon ng istruktura ng chart.
Ano ang kaugnayan ng Mermaid at Markdown?
Ang Mermaid ay madalas gamitin kasama ng Markdown, ngunit hindi sila ang parehong syntax.
Ang Markdown ay pangunahing ginagamit para sumulat ng structured text, habang ang Mermaid ay ginagamit para gumawa ng chart sa pamamagitan ng code. Sa Markdown editor na sumusuporta sa Mermaid, maaari mong i-embed ang Mermaid code sa Markdown document, para ang chart at text na paliwanag ay mapunta sa parehong dokumento.
Sundin ang tutorial upang subukan
Libreng gamitin ang ProcessOn
