mermaid

UserScript

code:flowchart.mmd

graph TD;

A-->B;

A-->C;

B-->D;

C-->D;

code:sequence diagram.mmd

sequenceDiagram

participant Alice

participant Bob

Alice->>John: Hello John, how are you?

loop Healthcheck

John->>John: Fight against hypochondria

end

Note right of John: Rational thoughts <br/>prevail!

John-->>Alice: Great!

John->>Bob: How about you?

Bob-->>John: Jolly good!

code:class diagram.mmd

classDiagram

Class01 <|-- AveryLongClass : Cool

Class03 *-- Class04

Class05 o-- Class06

Class07 .. Class08

Class09 --> C2 : Where am i?

Class09 --* C3

Class09 --|> Class07

Class07 : equals()

Class07 : Object[] elementData

Class01 : size()

Class01 : int chimp

Class01 : int gorilla

Class08 <--> C2: Cool label

code:state diagram.mmd

stateDiagram-v2

First --> Second

First --> Third

state First {

}

state Second {

}

state Third {

}

code:entity relationship diagram.mmd

erDiagram

CUSTOMER ||--o{ ORDER : places

CUSTOMER {

string name

string custNumber

string sector

}

ORDER ||--|{ LINE-ITEM : contains

ORDER {

int orderNumber

string deliveryAddress

}

LINE-ITEM {

string productCode

int quantity

float pricePerUnit

}

code:user jurney diagram.mmd

journey

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

code:gantt diagram.mmd

gantt

dateFormat YYYY-MM-DD

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

code:pie chart.mmd

pie showData

title Key elements in Product X

"Calcium" : 42.96

"Potassium" : 50.05

"Magnesium" : 10.01

"Iron" : 5

code:requirement diagram.mmd

requirementDiagram

requirement test_req {

id: 1

text: the test text.

risk: high

verifymethod: test

}

element test_entity {

type: simulation

}

test_entity - satisfies -> test_req