- gantt
- title Exclusive end dates (Manual date should end on 3d)
- dateFormat YYYY-MM-DD
- axisFormat %d
- section Section1
- 2 Days: 1, 2019-01-01,2d
- Manual Date: 2, 2019-01-01,2019-01-03
-
-
- gantt
- title Inclusive end dates (Manual date should end on 4th)
- dateFormat YYYY-MM-DD
- axisFormat %d
- inclusiveEndDates
- section Section1
- 2 Days: 1, 2019-01-01,2d
- Manual Date: 2, 2019-01-01,2019-01-03
-
-
- gantt
- title Hide today marker (vertical line should not be visible)
- dateFormat YYYY-MM-DD
- axisFormat %d
- todayMarker off
- section Section1
- Today: 1, -1h
-
-
- gantt
- title Style today marker (vertical line should be 5px wide and half-transparent blue)
- dateFormat YYYY-MM-DD
- axisFormat %d
- todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
- section Section1
- Today: 1, -1h
-
- graph TD
- A[Christmas] -->|Get money| B(Go shopping)
- B --> C{{Let me think... Do I want something for work, something to spend every free second with, or
- something to get around?}}
- C -->|One| D[Laptop]
- C -->|Two| E[iPhone]
- C -->|Three| F[Car]
- click A "index.html#link-clicked" "link test"
- click B testClick "click test"
- classDef someclass fill:#f96;
- class A someclass;
- class C someclass;
-
-
- graph TD
- A([stadium shape test])
- A -->|Get money| B([Go shopping])
- B --> C([Let me think... Do I want something for work, something to spend every free second with, or
- something to get around?])
- C -->|One| D([Laptop])
- C -->|Two| E([iPhone])
- C -->|Three| F([Car wroom wroom])
- click A "index.html#link-clicked" "link test"
- click B testClick "click test"
- classDef someclass fill:#f96;
- class A someclass;
- class C someclass;
-
-
- graph LR
- A[[subroutine shape test]]
- A -->|Get money| B[[Go shopping]]
- B --> C[[Let me think... Do I want something for work, something to spend every free second with, or
- something to get around?]]
- C -->|One| D[[Laptop]]
- C -->|Two| E[[iPhone]]
- C -->|Three| F[[Car wroom wroom]]
- click A "index.html#link-clicked" "link test"
- click B testClick "click test"
- classDef someclass fill:#f96;
- class A someclass;
- class C someclass;
-
-
- graph LR
- A[(cylindrical shape test)]
- A -->|Get money| B1[(Go shopping 1)]
- A -->|Get money| B2[(Go shopping 2)]
- A -->|Get money| B3[(Go shopping 3)]
- C[(Let me think... Do I want something for work, something to spend every free second with, or
- something to get around?)]
- B1 --> C
- B2 --> C
- B3 --> C
- C -->|One| D[(Laptop)]
- C -->|Two| E[(iPhone)]
- C -->|Three| F[(Car)]
- click A "index.html#link-clicked" "link test"
- click B testClick "click test"
- classDef someclass fill:#f96;
- class A someclass;
-
- graph TB
- TITLE["Link Click Events (click the nodes below)"]
- A["link test (open in same tab)"]
- B["link test (open in new tab)"]
- C[anchor test]
- D[mailto test]
- E[other protocol test]
- F[script test]
- TITLE --> A & B & C & D & E & F
- click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
- click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
- click C "#link-clicked"
- click D "mailto:user@user.user" "mailto test"
- click E "notes://do-your-thing/id" "other protocol test"
- click F "javascript:alert('test')" "script test"
-
-
-
- graph LR
- A[red text] -->|red text| B(blue text)
- C[/red text/] -->|blue text| D{blue text}
- E{{default style}} -->|default style| F([default style])
- linkStyle default color:Sienna;
- linkStyle 0 color:red;
- linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
- style A color:red;
- style B color:blue;
- style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
- style D stroke:#0000ff,fill:#ccccff,color:#0000ff
- click B "index.html#link-clicked" "link test"
- click D testClick "click test"
-
-
- graph TD
- A[myClass1] --> B[default] & C[default]
- B[default] & C[default] --> D[myClass2]
- classDef default stroke-width:2px,fill:none,stroke:silver
- classDef node color:red
- classDef myClass1 color:#0000ff
- classDef myClass2 stroke:#0000ff,fill:#ccccff
- class A myClass1
- class D myClass2
-
-
-
-
-
- sequenceDiagram
- participant Alice
- participant Bob
- participant John as John Second Line
- rect rgb(200, 220, 100)
- rect rgb(200, 255, 200)
- Alice ->> Bob: Hello Bob, how are you?
- Bob-->>John: How about you John?
- end
- Bob--x Alice: I am good thanks!
- Bob-x John: I am good thanks!
- Note right of John: John thinks a long long time, so long that the text does not fit on a row.
- Bob-->Alice: Checking with John...
- Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
- Bob-x John: Hey John - we're still waiting to know how you're doing
- Note over John:nowrap: John's trying hard not to break his train of thought.
- Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
- Note over John: After a few more moments, John finally snaps out of it.
- end
- alt either this
- Alice->>John: Yes
- else or this
- Alice->>John: No
- else or this will happen
- Alice->John: Maybe
- end
- par this happens in parallel
- Alice -->> Bob: Parallel message 1
- and
- Alice -->> John: Parallel message 2
- end
-
-
- sequenceDiagram
- participant 1 as multiline using #lt;br#gt;
- participant 2 as multiline using #lt;br/#gt;
- participant 3 as multiline using #lt;br /#gt;
- participant 4 as multiline using #lt;br /#gt;
- 1->>2: multiline using #lt;br#gt;
- note right of 2: multiline using #lt;br#gt;
- 2->>3: multiline using #lt;br/#gt;
- note right of 3: multiline using #lt;br/#gt;
- 3->>4: multiline using #lt;br /#gt;
- note right of 4: multiline using #lt;br /#gt;
- 4->>1: multiline using #lt;br /#gt;
- note right of 1: multiline using #lt;br /#gt;
-
-
- sequenceDiagram
- autonumber
- Alice->>John: Hello John, how are you?
- Alice->>John: John, can you hear me?
- John-->>Alice: Hi Alice, I can hear you!
- John-->>Alice: I feel great!
-
-
-
-
-
- gantt
- 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
-
- click cl1 href "https://mermaidjs.github.io/"
- click cl2 call ganttTestClick("test", test, test)
-
- section Last section
- Describe gantt syntax :after doc1, 3d
- Add gantt diagram to demo page : 20h
- Add another diagram to demo page : 48h
-
-
- gantt
- dateFormat YYYY-MM-DD
- axisFormat %d/%m
- title GANTT diagram with multiline section titles
- excludes weekdays 2014-01-10
-
- section A section multiline
- 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 multiline
- 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 multiline
- 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 Last section multiline
- Describe gantt syntax : after doc1, 3d
- Add gantt diagram to demo page : 20h
- Add another diagram to demo page : 48h
-
- stateDiagram
- [*] --> First
- state First {
- [*] --> second
- second --> [*]
- }
-
-
- stateDiagram
- State1: The state with a note
- note right of State1
- Important information! You can write
- notes.
- end note
- State1 --> State2
- note left of State2 : This is the note to the left.
-
-
- stateDiagram
- State1
- note right of State1
- Line1 Line2 Line3 Line4 Line5
- end note
-
-
-
-
-
- requirementDiagram
-
- requirement An Example {
- id: 1
- text: the test text.
- risk: high
- verifymethod: test
- }
-
- functionalRequirement Random Name {
- id: 1.1
- text: the second test text.
- risk: low
- verifymethod: inspection
- }
-
- performanceRequirement Something Else {
- id: 1.2
- text: the third test text.
- risk: medium
- verifymethod: demonstration
- }
-
- interfaceRequirement test_req4 {
- id: 1.2.1
- text: the fourth test text.
- risk: medium
- verifymethod: analysis
- }
-
- physicalRequirement test_req5 {
- id: 1.2.2
- text: the fifth test text.
- risk: medium
- verifymethod: analysis
- }
-
- designConstraint test_req6 {
- id: 1.2.3
- text: really long text to test overflow. really long text to test overflow. really long text to test overflow.
- risk: medium
- verifymethod: analysis
- }
-
- element test_entity {
- type: simulation
- }
-
- element test_entity2 {
- type: word doc
- docRef: reqs/test_entity
- }
-
- element test_entity3 {
- type: "test suite"
- docRef: github.com/all_the_tests
- }
-
-
- test_entity - satisfies -> Random Name
- An Example - traces -> Random Name
- An Example - contains -> Something Else
- Something Else - contains -> test_req4
- test_req4 - derives -> test_req5
- test_req5 - refines -> test_req6
- test_entity3 - verifies -> test_req5
- An Example <- copies - test_entity2
+ gantt
+ title Exclusive end dates (Manual date should end on 3d)
+ dateFormat YYYY-MM-DD
+ axisFormat %d
+ section Section1
+ 2 Days: 1, 2019-01-01,2d
+ Manual Date: 2, 2019-01-01,2019-01-03
+
+
+ gantt
+ title Inclusive end dates (Manual date should end on 4th)
+ dateFormat YYYY-MM-DD
+ axisFormat %d
+ inclusiveEndDates
+ section Section1
+ 2 Days: 1, 2019-01-01,2d
+ Manual Date: 2, 2019-01-01,2019-01-03
+
+
+ gantt
+ title Hide today marker (vertical line should not be visible)
+ dateFormat YYYY-MM-DD
+ axisFormat %d
+ todayMarker off
+ section Section1
+ Today: 1, -1h
+
+
+ gantt
+ title Style today marker (vertical line should be 5px wide and half-transparent blue)
+ dateFormat YYYY-MM-DD
+ axisFormat %d
+ todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
+ section Section1
+ Today: 1, -1h
+
+ graph TD
+ A[Christmas] -->|Get money| B(Go shopping)
+ B --> C{{Let me think... Do I want something for work, something to spend every free second with, or something to get around?}}
+ C -->|One| D[Laptop]
+ C -->|Two| E[iPhone]
+ C -->|Three| F[Car]
+ click A "index.html#link-clicked" "link test"
+ click B testClick "click test"
+ classDef someclass fill:#f96;
+ class A someclass;
+ class C someclass;
+
+
+ graph TD
+ A([stadium shape test])
+ A -->|Get money| B([Go shopping])
+ B --> C([Let me think... Do I want something for work, something to spend every free second with, or something to get around?])
+ C -->|One| D([Laptop])
+ C -->|Two| E([iPhone])
+ C -->|Three| F([Car wroom wroom])
+ click A "index.html#link-clicked" "link test"
+ click B testClick "click test"
+ classDef someclass fill:#f96;
+ class A someclass;
+ class C someclass;
+
+
+ graph LR
+ A[[subroutine shape test]]
+ A -->|Get money| B[[Go shopping]]
+ B --> C[[Let me think... Do I want something for work, something to spend every free second with, or something to get around?]]
+ C -->|One| D[[Laptop]]
+ C -->|Two| E[[iPhone]]
+ C -->|Three| F[[Car wroom wroom]]
+ click A "index.html#link-clicked" "link test"
+ click B testClick "click test"
+ classDef someclass fill:#f96;
+ class A someclass;
+ class C someclass;
+
+
+ graph LR
+ A[(cylindrical shape test)]
+ A -->|Get money| B1[(Go shopping 1)]
+ A -->|Get money| B2[(Go shopping 2)]
+ A -->|Get money| B3[(Go shopping 3)]
+ C[(Let me think... Do I want something for work, something to spend every free second with, or
+ something to get around?)]
+ B1 --> C
+ B2 --> C
+ B3 --> C
+ C -->|One| D[(Laptop)]
+ C -->|Two| E[(iPhone)]
+ C -->|Three| F[(Car)]
+ click A "index.html#link-clicked" "link test"
+ click B testClick "click test"
+ classDef someclass fill:#f96;
+ class A someclass;
+
+ graph TB
+ TITLE["Link Click Events (click the nodes below)"]
+ A["link test (open in same tab)"]
+ B["link test (open in new tab)"]
+ C[anchor test]
+ D[mailto test]
+ E[other protocol test]
+ F[script test]
+ TITLE --> A & B & C & D & E & F
+ click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
+ click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
+ click C "#link-clicked"
+ click D "mailto:user@user.user" "mailto test"
+ click E "notes://do-your-thing/id" "other protocol test"
+ click F "javascript:alert('test')" "script test"
+
+
+
+ graph LR
+ A[red text] -->|red text| B(blue text)
+ C[/red text/] -->|blue text| D{blue text}
+ E{{default style}} -->|default style| F([default style])
+ linkStyle default color:Sienna;
+ linkStyle 0 color:red;
+ linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
+ style A color:red;
+ style B color:blue;
+ style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
+ style D stroke:#0000ff,fill:#ccccff,color:#0000ff
+ click B "index.html#link-clicked" "link test"
+ click D testClick "click test"
+
+
+ graph TD
+ A[myClass1] --> B[default] & C[default]
+ B[default] & C[default] --> D[myClass2]
+ classDef default stroke-width:2px,fill:none,stroke:silver
+ classDef node color:red
+ classDef myClass1 color:#0000ff
+ classDef myClass2 stroke:#0000ff,fill:#ccccff
+ class A myClass1
+ class D myClass2
+
+
+
+
+
+ sequenceDiagram
+ participant Alice
+ participant Bob
+ participant John as John Second Line
+ rect rgb(200, 220, 100)
+ rect rgb(200, 255, 200)
+ Alice ->> Bob: Hello Bob, how are you?
+ Bob-->>John: How about you John?
+ end
+ Bob--x Alice: I am good thanks!
+ Bob-x John: I am good thanks!
+ Note right of John: John thinks a long long time, so long that the text does not fit on a row.
+ Bob-->Alice: Checking with John...
+ Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
+ Bob-x John: Hey John - we're still waiting to know how you're doing
+ Note over John:nowrap: John's trying hard not to break his train of thought.
+ Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
+ Note over John: After a few more moments, John finally snaps out of it.
+ end
+ alt either this
+ Alice->>John: Yes
+ else or this
+ Alice->>John: No
+ else or this will happen
+ Alice->John: Maybe
+ end
+ par this happens in parallel
+ Alice -->> Bob: Parallel message 1
+ and
+ Alice -->> John: Parallel message 2
+ end
+
+
+ sequenceDiagram
+ participant 1 as multiline using #lt;br#gt;
+ participant 2 as multiline using #lt;br/#gt;
+ participant 3 as multiline using #lt;br /#gt;
+ participant 4 as multiline using #lt;br /#gt;
+ 1->>2: multiline using #lt;br#gt;
+ note right of 2: multiline using #lt;br#gt;
+ 2->>3: multiline using #lt;br/#gt;
+ note right of 3: multiline using #lt;br/#gt;
+ 3->>4: multiline using #lt;br /#gt;
+ note right of 4: multiline using #lt;br /#gt;
+ 4->>1: multiline using #lt;br /#gt;
+ note right of 1: multiline using #lt;br /#gt;
+
+
+ sequenceDiagram
+ autonumber
+ Alice->>John: Hello John, how are you?
+ Alice->>John: John, can you hear me?
+ John-->>Alice: Hi Alice, I can hear you!
+ John-->>Alice: I feel great!
+
+
+
+
+
+ gantt
+ 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
+
+ click cl1 href "https://mermaidjs.github.io/"
+ click cl2 call ganttTestClick("test", test, test)
+
+ section Last section
+ Describe gantt syntax :after doc1, 3d
+ Add gantt diagram to demo page : 20h
+ Add another diagram to demo page : 48h
+
+
+ gantt
+ dateFormat YYYY-MM-DD
+ axisFormat %d/%m
+ title GANTT diagram with multiline section titles
+ excludes weekdays 2014-01-10
+
+ section A section multiline
+ 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 multiline
+ 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 multiline
+ 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 Last section multiline
+ Describe gantt syntax : after doc1, 3d
+ Add gantt diagram to demo page : 20h
+ Add another diagram to demo page : 48h
+
+ stateDiagram
+ [*] --> First
+ state First {
+ [*] --> second
+ second --> [*]
+ }
+
+
+ stateDiagram
+ State1: The state with a note
+ note right of State1
+ Important information! You can write
+ notes.
+ end note
+ State1 --> State2
+ note left of State2 : This is the note to the left.
+
+
+ stateDiagram
+ State1
+ note right of State1
+ Line1 Line2 Line3 Line4 Line5
+ end note
+
+
+
+
+
+ requirementDiagram
+
+ requirement An Example {
+ id: 1
+ text: the test text.
+ risk: high
+ verifymethod: test
+ }
+
+ functionalRequirement Random Name {
+ id: 1.1
+ text: the second test text.
+ risk: low
+ verifymethod: inspection
+ }
+
+ performanceRequirement Something Else {
+ id: 1.2
+ text: the third test text.
+ risk: medium
+ verifymethod: demonstration
+ }
+
+ interfaceRequirement test_req4 {
+ id: 1.2.1
+ text: the fourth test text.
+ risk: medium
+ verifymethod: analysis
+ }
+
+ physicalRequirement test_req5 {
+ id: 1.2.2
+ text: the fifth test text.
+ risk: medium
+ verifymethod: analysis
+ }
+
+ designConstraint test_req6 {
+ id: 1.2.3
+ text: really long text to test overflow. really long text to test overflow. really long text to test overflow.
+ risk: medium
+ verifymethod: analysis
+ }
+
+ element test_entity {
+ type: simulation
+ }
+
+ element test_entity2 {
+ type: word doc
+ docRef: reqs/test_entity
+ }
+
+ element test_entity3 {
+ type: "test suite"
+ docRef: github.com/all_the_tests
+ }
+
+
+ test_entity - satisfies -> Random Name
+ An Example - traces -> Random Name
+ An Example - contains -> Something Else
+ Something Else - contains -> test_req4
+ test_req4 - derives -> test_req5
+ test_req5 - refines -> test_req6
+ test_entity3 - verifies -> test_req5
+ An Example <- copies - test_entity2