+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+ graph TD
+ A[Christmas] -->|Get money| B(Go shopping)
+ B --> C{Let me think}
+ B --> G[/Another/]
+ C ==>|One| D[Laptop]
+ C -->|Two| E[iPhone]
+ C -->|Three| F[fa:fa-car Car]
+ subgraph section
+ C
+ D
+ E
+ F
+ G
+ end
+
+
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+ flowchart TD
+ A[Christmas] -->|Get money| B(Go shopping)
+ B --> C{Let me think}
+ B --> G[Another]
+ C ==>|One| D[Laptop]
+ C x--x|Two| E[iPhone]
+ C o--o|Three| F[fa:fa-car Car]
+ subgraph section
+ C
+ D
+ E
+ F
+ G
+ end
+
+
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+
+ sequenceDiagram
+ autonumber
+ par Action 1
+ Alice->>John: Hello John, how are you?
+ and Action 2
+ Alice->>Bob: Hello Bob, how are you?
+ end
+ Alice->>+John: Hello John, how are you?
+ Alice->>+John: John, can you hear me?
+ John-->>-Alice: Hi Alice, I can hear you!
+ Note right of John: John is perceptive
+ John-->>-Alice: I feel great!
+ loop Every minute
+ John-->Alice: Great!
+ end
+
+
+gantt
+ dateFormat :YYYY-MM-DD
+ title Adding GANTT diagram functionality to mermaid
+ excludes :excludes the named dates/days from being included in a charted task..
+ 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 Last section
+ Describe gantt syntax :after doc1, 3d
+ Add gantt diagram to demo page :20h
+ Add another diagram to demo page :48h
+
+
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+ stateDiagram
+ [*] --> Active
+
+ state Active {
+ [*] --> NumLockOff
+ NumLockOff --> NumLockOn : EvNumLockPressed
+ NumLockOn --> NumLockOff : EvNumLockPressed
+ --
+ [*] --> CapsLockOff
+ CapsLockOff --> CapsLockOn : EvCapsLockPressed
+ CapsLockOn --> CapsLockOff : EvCapsLockPressed
+ --
+ [*] --> ScrollLockOff
+ ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
+ ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
+ }
+ state SomethingElse {
+ A --> B
+ B --> A
+ }
+
+ Active --> SomethingElse
+ note right of SomethingElse : This is the note to the right.
+
+ SomethingElse --> [*]
+
+
+
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+stateDiagram-v2
+ [*] --> Active
+
+ state Active {
+ [*] --> NumLockOff
+ NumLockOff --> NumLockOn : EvNumLockPressed
+ NumLockOn --> NumLockOff : EvNumLockPressed
+ --
+ [*] --> CapsLockOff
+ CapsLockOff --> CapsLockOn : EvCapsLockPressed
+ CapsLockOn --> CapsLockOff : EvCapsLockPressed
+ --
+ [*] --> ScrollLockOff
+ ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
+ ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
+ }
+ state SomethingElse {
+ A --> B
+ B --> A
+ }
+
+ Active --> SomethingElse2
+ note right of SomethingElse2 : This is the note to the right.
+
+ SomethingElse2 --> [*]
+
+
+ erDiagram
+ 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"
+
+
+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
+