1
flowchart TD
2
  A[Hard] -->|Text| B(Round)
3
  B --> C{Decision}
4
  C -->|One| D["`**Result 1**`"]
5
  C -->|Two| E["`**Result 2**`"]

1
swimlane-beta LR
2
  subgraph Customer
3
    request[Request service]
4
    receive[Receive update]
5
  end
6

7
  subgraph Support
8
    triage[Triage request]
9
    answer[Send answer]
10
  end
11

12
  subgraph Engineering
13
    investigate[Investigate issue]
14
    fix[Prepare fix]
15
  end
16

17
  request --> triage
18
  triage -->|Known issue| answer
19
  triage -->|Needs code change| investigate
20
  investigate --> fix --> answer
21
  answer --> receive

1
sequenceDiagram
2
  Alice->>John: Hello John, how are you?
3
  loop HealthCheck
4
    John->>John: Fight against hypochondria
5
  end
6
  Note right of John: Rational thoughts!
7
  John-->>Alice: Great!
8
  John->>Bob: How about you?
9
  Bob-->>John: Jolly good!

1
classDiagram
2
  Class01 <|-- AveryLongClass : Cool
3
  <<Interface>> Class01
4
  Class09 --> C2 : Where am I?
5
  Class09 --* C3
6
  Class09 --|> Class07
7
  Class07 : equals()
8
  Class07 : Object[] elementData
9
  Class01 : size()
10
  Class01 : int chimp
11
  Class01 : int gorilla
12
  class Class10 {
13
    <<service>>
14
    int id
15
    size()
16
  }

1
stateDiagram-v2
2
  [*]     --> Still
3
  Still   --> [*]
4
  Still   --> Moving
5
  Moving  --> Still
6
  Moving  --> Crash
7
  Crash   --> [*]

1
erDiagram
2
  CAR ||--o{ NAMED-DRIVER : allows
3
  CAR {
4
    string registrationNumber PK
5
    string make
6
    string model
7
    string[] parts
8
  }
9
  PERSON ||--o{ NAMED-DRIVER : is
10
  PERSON {
11
    string driversLicense PK "The license #"
12
    string(99) firstName "Only 99 characters are allowed"
13
    string lastName
14
    string phone UK
15
    int age
16
  }
17
  NAMED-DRIVER {
18
    string carRegistrationNumber PK, FK
19
    string driverLicence PK, FK
20
  }
21
  "**MANUFACTURER**" only one to zero or more CAR : makes

1
journey
2
  title My working day
3
  section Go to work
4
    Make tea      : 5: Me
5
    Go upstairs   : 3: Me
6
    Do work       : 1: Me, Cat
7
  section Go home
8
    Go downstairs : 5: Me
9
    Sit down      : 3: Me

1
gantt
2
  dateFormat  YYYY-MM-DD
3
  title       Adding GANTT diagram functionality to mermaid
4
  excludes    weekends
5
  %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
6

7
  section A section
8
  Completed task            :done,    des1, 2014-01-06,2014-01-08
9
  Active task               :active,  des2, 2014-01-09, 3d
10
  Future task               :         des3, after des2, 5d
11
  Future task2              :         des4, after des3, 5d
12

13
  section Critical tasks
14
  Completed task in the critical line :2014-01-06,24h
15
  Implement parser and jison          :after des1, 2d
16
  Create tests for parser             :crit, active, 3d
17
  Future task in critical line        :crit, 5d
18
  Create tests for renderer           :3d
19
  Functionality added                 :milestone, isadded, 2014-01-25, 0d
20

21
  section Documentation
22
  Describe gantt syntax               :active, a1, after des1, 3d
23
  Add gantt diagram to demo page      :after a1  , 20h
24
  Add another diagram to demo page    :doc1, after a1  , 48h
25

26
  section Last section
27
  Describe gantt syntax               :after doc1, 3d
28
  Add gantt diagram to demo page      :20h
29
  Add another diagram to demo page    :48h

1
---
2
config:
3
  pie:
4
    textPosition: 0.5
5
    donutHole: 0.2
6
    highlightSlice: Potassium
7
  themeVariables:
8
    pieOuterStrokeWidth: "5px"
9
---
10
pie showData
11
  title Key elements in Product X
12
  "Calcium" : 42.96
13
  "Potassium" : 50.05
14
  "Magnesium" : 10.01
15
  "Iron" :  5

1
quadrantChart
2
  title Reach and engagement of campaigns
3
  x-axis Low Reach --> High Reach
4
  y-axis Low Engagement --> High Engagement
5
  quadrant-1 We should expand
6
  quadrant-2 Need to promote
7
  quadrant-3 Re-evaluate
8
  quadrant-4 May be improved
9
  Campaign A: [0.3, 0.6]
10
  Campaign B: [0.45, 0.23]
11
  Campaign C: [0.57, 0.69]
12
  Campaign D: [0.78, 0.34]
13
  Campaign E: [0.40, 0.34]
14
  Campaign F: [0.35, 0.78]

1
requirementDiagram
2

3
  requirement test_req {
4
    id: 1
5
    text: the test text.
6
    risk: high
7
    verifymethod: test
8
  }
9

10
  functionalRequirement test_req2 {
11
    id: 1.1
12
    text: the second test text.
13
    risk: low
14
    verifymethod: inspection
15
  }
16

17
  performanceRequirement test_req3 {
18
    id: 1.2
19
    text: the third test text.
20
    risk: medium
21
    verifymethod: demonstration
22
  }
23

24
  interfaceRequirement test_req4 {
25
    id: 1.2.1
26
    text: the fourth test text.
27
    risk: medium
28
    verifymethod: analysis
29
  }
30

31
  physicalRequirement test_req5 {
32
    id: 1.2.2
33
    text: the fifth test text.
34
    risk: medium
35
    verifymethod: analysis
36
  }
37

38
  designConstraint test_req6 {
39
    id: 1.2.3
40
    text: the sixth test text.
41
    risk: medium
42
    verifymethod: analysis
43
  }
44

45
  element test_entity {
46
    type: simulation
47
  }
48

49
  element test_entity2 {
50
    type: word doc
51
    docRef: reqs/test_entity
52
  }
53

54
  element test_entity3 {
55
    type: "test suite"
56
    docRef: github.com/all_the_tests
57
  }
58

59
  test_entity - satisfies -> test_req2
60
  test_req - traces -> test_req2
61
  test_req - contains -> test_req3
62
  test_req3 - contains -> test_req4
63
  test_req4 - derives -> test_req5
64
  test_req5 - refines -> test_req6
65
  test_entity3 - verifies -> test_req5
66
  test_req <- copies - test_entity2

1
gitGraph
2
  commit
3
  commit
4
  branch develop
5
  checkout develop
6
  commit
7
  commit
8
  checkout main
9
  merge develop
10
  commit
11
  commit

1
C4Context
2
  title System Context diagram for Internet Banking System
3

4
  Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
5
  Person(customerB, "Banking Customer B")
6
  Person_Ext(customerC, "Banking Customer C")
7
  System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
8

9
  Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
10

11
  Enterprise_Boundary(b1, "BankBoundary") {
12

13
    SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
14

15
    System_Boundary(b2, "BankBoundary2") {
16
      System(SystemA, "Banking System A")
17
      System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
18
    }
19

20
    System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
21
    SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
22

23
    Boundary(b3, "BankBoundary3", "boundary") {
24
      SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
25
      SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
26
    }
27
  }
28

29
  BiRel(customerA, SystemAA, "Uses")
30
  BiRel(SystemAA, SystemE, "Uses")
31
  Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
32
  Rel(SystemC, customerA, "Sends e-mails to")

1
mindmap
2
  root((mindmap))
3
    Origins
4
      Long history
5
      ::icon(fa fa-book)
6
      Popularisation
7
        {{British popular psychology author Tony Buzan}}
8
    Research
9
      On effectiveness<br/>and features
10
      On Automatic creation
11
        [Uses]
12
          (Creative techniques)
13
          (Strategic planning)
14
          (Argument mapping)
15
    Tools
16
      )Pen and paper(
17
      ))Mermaid((

1
timeline
2
  title England's History Timeline
3
  section Stone Age
4
    7600 BC : Britain's oldest known house was built in Orkney, Scotland
5
    6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
6
  section Bronze Age
7
    2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
8
            : New styles of pottery and ways of burying the dead appear.
9
    2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
10
            : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.

1
---
2
config:
3
  sankey:
4
    showValues: false
5
---
6
sankey
7
  Agricultural 'waste',Bio-conversion,124.729
8
  Bio-conversion,Liquid,0.597
9
  Bio-conversion,Losses,26.862
10
  Bio-conversion,Solid,280.322
11
  Bio-conversion,Gas,81.144
12
  Biofuel imports,Liquid,35
13
  Biomass imports,Solid,35
14
  Coal imports,Coal,11.606
15
  Coal reserves,Coal,63.965
16
  Coal,Solid,75.571
17
  District heating,Industry,10.639
18
  District heating,Heating and cooling - commercial,22.505
19
  District heating,Heating and cooling - homes,46.184
20
  Electricity grid,Over generation / exports,104.453
21
  Electricity grid,Heating and cooling - homes,113.726
22
  Electricity grid,H2 conversion,27.14
23
  Electricity grid,Industry,342.165
24
  Electricity grid,Road transport,37.797
25
  Electricity grid,Agriculture,4.412
26
  Electricity grid,Heating and cooling - commercial,40.858
27
  Electricity grid,Losses,56.691
28
  Electricity grid,Rail transport,7.863
29
  Electricity grid,Lighting & appliances - commercial,90.008
30
  Electricity grid,Lighting & appliances - homes,93.494
31
  Gas imports,Ngas,40.719
32
  Gas reserves,Ngas,82.233
33
  Gas,Heating and cooling - commercial,0.129
34
  Gas,Losses,1.401
35
  Gas,Thermal generation,151.891
36
  Gas,Agriculture,2.096
37
  Gas,Industry,48.58
38
  Geothermal,Electricity grid,7.013
39
  H2 conversion,H2,20.897
40
  H2 conversion,Losses,6.242
41
  H2,Road transport,20.897
42
  Hydro,Electricity grid,6.995
43
  Liquid,Industry,121.066
44
  Liquid,International shipping,128.69
45
  Liquid,Road transport,135.835
46
  Liquid,Domestic aviation,14.458
47
  Liquid,International aviation,206.267
48
  Liquid,Agriculture,3.64
49
  Liquid,National navigation,33.218
50
  Liquid,Rail transport,4.413
51
  Marine algae,Bio-conversion,4.375
52
  Ngas,Gas,122.952
53
  Nuclear,Thermal generation,839.978
54
  Oil imports,Oil,504.287
55
  Oil reserves,Oil,107.703
56
  Oil,Liquid,611.99
57
  Other waste,Solid,56.587
58
  Other waste,Bio-conversion,77.81
59
  Pumped heat,Heating and cooling - homes,193.026
60
  Pumped heat,Heating and cooling - commercial,70.672
61
  Solar PV,Electricity grid,59.901
62
  Solar Thermal,Heating and cooling - homes,19.263
63
  Solar,Solar Thermal,19.263
64
  Solar,Solar PV,59.901
65
  Solid,Agriculture,0.882
66
  Solid,Thermal generation,400.12
67
  Solid,Industry,46.477
68
  Thermal generation,Electricity grid,525.531
69
  Thermal generation,Losses,787.129
70
  Thermal generation,District heating,79.329
71
  Tidal,Electricity grid,9.452
72
  UK land based bioenergy,Bio-conversion,182.01
73
  Wave,Electricity grid,19.013
74
  Wind,Electricity grid,289.366

1
---
2
config:
3
  xyChart:
4
    width: 900
5
    height: 600
6
    showDataLabel: true
7
---
8
xychart
9
  title "Sales Revenue"
10
  x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
11
  y-axis "Revenue (in $)" 4000 --> 11000
12
  bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
13
  line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

1
block
2
  columns 1
3
    db(("DB"))
4
    blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
5
    block:ID
6
      A
7
      B["A wide one in the middle"]
8
      C
9
    end
10
    space
11
    D
12
    ID-- "X" -->D
13
    C --> D

1
---
2
title: "TCP Packet"
3
---
4
packet
5
  0-15: "Source Port"
6
  16-31: "Destination Port"
7
  32-63: "Sequence Number"
8
  64-95: "Acknowledgment Number"
9
  96-99: "Data Offset"
10
  100-105: "Reserved"
11
  106: "URG"
12
  107: "ACK"
13
  108: "PSH"
14
  109: "RST"
15
  110: "SYN"
16
  111: "FIN"
17
  112-127: "Window"
18
  128-143: "Checksum"
19
  144-159: "Urgent Pointer"
20
  160-191: "(Options and Padding)"
21
  192-255: "Data (variable length)"

1
---
2
config:
3
  kanban:
4
    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
5
---
6
kanban
7
  Todo
8
    [Create Documentation]
9
    docs[Create Blog about the new diagram]
10
  [In progress]
11
    id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
12
  id9[Ready for deploy]
13
    id8[Design grammar]@{ assigned: 'knsv' }
14
  id10[Ready for test]
15
    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
16
    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
17
  id11[Done]
18
    id5[define getData]
19
    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
20
    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
21

22
  id12[Can't reproduce]
23
    id3[Weird flickering in Firefox]

1
architecture-beta
2
  group api(cloud)[API]
3

4
  service db(database)[Database] in api
5
  service disk1(disk)[Storage] in api
6
  service disk2(disk)[Storage] in api
7
  service server(server)[Server] in api
8

9
  db:L -- R:server
10
  disk1:T -- B:server
11
  disk2:T -- B:db

1
radar-beta
2
  title Restaurant Comparison
3
  axis food["Food Quality"], service["Service"], price["Price"]
4
  axis ambiance["Ambiance"]
5

6
  curve a["Restaurant A"]{4, 3, 2, 4}
7
  curve b["Restaurant B"]{3, 4, 3, 3}
8
  curve c["Restaurant C"]{2, 3, 4, 2}
9
  curve d["Restaurant D"]{2, 2, 4, 3}
10

11
  graticule polygon
12
  max 5

1
eventmodeling
2
  tf 01 ui CartUI
3
  tf 02 cmd AddItem
4
  tf 03 evt ItemAdded
5

6
  rf 04 evt External.InventoryChanged
7
  tf 05 pcr InventoryProcessor
8
  tf 06 cmd ChangeInventory
9
  tf 07 evt Cart.InventoryChanged

1
---
2
config:
3
  treemap:
4
    valueFormat: '$0,0'
5
---
6
treemap-beta
7
"Budget"
8
  "Operations"
9
    "Salaries": 700000
10
    "Equipment": 200000
11
    "Supplies": 100000
12
  "Marketing"
13
    "Advertising": 400000
14
    "Events": 100000

1
venn-beta
2
  set A["Frontend"]:20
3
    text A1["React"]
4
    text A2["Design Systems"]
5
  set B["Backend"]:12
6
    text B1["API"]
7
  union A,B["Shared"]:3
8
    text AB1["OpenAPI"]

1
ishikawa-beta
2
  Blurry Photo
3
  Process
4
    Out of focus
5
    Shutter speed too slow
6
    Protective film not removed
7
    Beautification filter applied
8
  User
9
    Shaky hands
10
  Equipment
11
    LENS
12
      Inappropriate lens
13
      Damaged lens
14
      Dirty lens
15
    SENSOR
16
      Damaged sensor
17
      Dirty sensor
18
  Environment
19
    Subject moved too quickly
20
    Too dark

1
wardley-beta
2
  title Tea Shop Value Chain
3

4
  anchor Business [0.95, 0.63]
5
  component Cup of Tea [0.79, 0.61]
6
  component Tea [0.63, 0.81]
7
  component Hot Water [0.52, 0.80]
8
  component Kettle [0.43, 0.35]
9
  component Power [0.10, 0.70]
10

11
  Business -> Cup of Tea
12
  Cup of Tea -> Tea
13
  Cup of Tea -> Hot Water
14
  Hot Water -> Kettle
15
  Kettle -> Power
16

17
  evolve Kettle 0.62
18
  evolve Power 0.89
19

20
  note "Standardising power allows Kettles to evolve faster" [0.30, 0.49]

1
cynefin-beta
2
  title Strategy Categorization
3

4
  complex
5
    "Market research"
6

7
  complicated
8
    "Competitive analysis"
9

10
  clear
11
    "Standard pricing"
12

13
  chaotic
14
    "Crisis management"
15

16
  complex --> complicated : "Pattern identified"
17
  complicated --> clear : "Best practice codified"
18
  clear --> chaotic : "Complacency"
19
  chaotic --> complex : "Stabilized"

1
treeView-beta
2
├── src/
3
│   ├── App.tsx :::highlight ## main component
4
│   └── index.ts ## entry point
5
├── .env ## environment variables
6
├── Dockerfile
7
└── package.json