pie accTitle: My Pie Chart Accessibility Title accDescr: My Pie Chart Accessibility Description title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5

gitGraph accTitle: My Gitgraph Accessibility Title accDescr: My Gitgraph Accessibility Description commit commit branch develop checkout develop commit commit checkout main merge develop commit commit

sequenceDiagram title: My Sequence Diagram Title accTitle: My Sequence Diagram accDescr: My Sequence Diagram Description Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice-)John: See you later!

graph TD A -->|000| B B -->|111| C linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;

journey accTitle: My User Journey Diagram accDescr: My User Journey Diagram Description title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me

requirementDiagram accTitle: My req Diagram accDescr: My req Diagram Description requirement test_req { id: 1 text: the test text. risk: high verifymethod: test } functionalRequirement test_req2 { id: 1.1 text: the second test text. risk: low verifymethod: inspection } performanceRequirement test_req3 { id: 1.2 text: the third test text. risk: medium verifymethod: demonstration } element test_entity { type: simulation } element test_entity2 { type: word doc docRef: reqs/test_entity } test_entity - satisfies -> test_req2 test_req - traces -> test_req2 test_req - contains -> test_req3 test_req <- copies - test_entity2

erDiagram accTitle: My er Diagram accDescr: My er Diagram Description CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ INVOICE : "liable for" DELIVERY-ADDRESS ||--o{ ORDER : receives INVOICE ||--|{ ORDER : covers ORDER ||--|{ ORDER-ITEM : includes PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT ||--o{ ORDER-ITEM : "ordered in"

graph TB accTitle: My flowchart accDescr: My flowchart Description subgraph One a1-->a2-->a3 end

gantt accTitle: My gantt chart accDescr: My my gantt chart Description dateFormat YYYY-MM-DD axisFormat %d/%m title Adding GANTT diagram to mermaid excludes weekdays 2014-01-10 section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Clickable Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10 Calling a Callback (look at the console log) :cl2, after cl1, 3d Calling a Callback with args :cl3, after cl1, 3d click cl1 href "https://mermaid-js.github.io/mermaid/#/" click cl2 call clickByGantt() click cl3 call clickByGantt("test1", test2, test3) section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page : 20h Add another diagram to demo page : 48h

classDiagram accTitle: My class diagram accDescr: My class diagram Description Class01 <|-- AveryLongClass : Cool Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla class Class10 { int id size() }

stateDiagram accTitle: Apa accDescr: One that can climb better then any man [*] --> S1 state "Some long name" as S1

classDiagram Animal "1" <|-- Duck Animal <|-- Fish Animal <--o Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }