graph LR
    id1

graph LR
    id1[This is the text in the box]

graph LR
    id1(This is the text in the box);

graph LR
    id1((This is the text
 
 in the circle));

graph LR
    id1>This is the text in the box]

graph LR
    id1{This is the text in the box}

graph LR
    A-->B

graph LR;
    A-->B

graph LR
    A --- B

graph LR
A-- This is the text --- B

graph LR
A---|This is the text|B;

graph LR
A-->|text|B

graph
 
 LR
A-- text -->B

graph LR
A-.->B

graph LR
A==>B

graph LR
A== text ==>B

graph LR
    d1["This is the (text) in the box"]

graph LR
    A["A double quote:#quot;"] -->B["A dec char:#9829;"]

 graph TB
         subgraph one
         a1-->a2
         end
         subgraph two
 

         b1-->b2
         end
         subgraph three
         c1-->c2
         end
         c1-->a2

<script>
    var callback = function(){
        alert('A callback was triggered');
    }
<script>

graph LR;
    A-->B;
    click A callback "Tooltip for a callback"
    click B "http://www.github.com" "This is a tooltip for a link"

    graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px;
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5;

    classDef className fill:#f9f,stroke:#333,stroke-width:4px;
    class nodeId1 className;
     class nodeId1,nodeId2 className;

graph LR;
    A-->B[AAABBB];
    B-->D;
    class A cssClass;

classDef default fill:#f9f,stroke:#333,stroke-width:4px;

<script src="https://use.fontawesome.com/1096030e90.js"></script>
<script src="https://cdn.bootcss.com/mermaid/7.0.0/mermaid.js"></script>
<link href="https://cdn.bootcss.com/mermaid/7.0.0/mermaid.css" rel="stylesheet">

graph TD
    B["fa:fa-card for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?);

graph LR
  A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

sequenceDiagram
    participant John
    Note right of John: Text in note

sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction

sequenceDiagram
    Alice->John: Hello John, how are you?
    loop Reply every minute
        John-->Alice: Great!
    end

    sequenceDiagram
        Alice->>Bob: Hello Bob, how are you?
        alt is sick
            Bob->>Alice: Not so good :(
        else is well
            Bob->>Alice: Feeling fresh like a daisy
        end
        opt Extra response
            Bob->>Alice: Thanks for asking
        end

gantt
    title A Gantt Diagram

    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

gantt
    title A Gantt Diagram

    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

sequenceDiagram
    loop Daily query
        Alice->>Bob: Hello Bob, how are you?
        alt is sick
            Bob->>Alice: Not so good :(
        else is well
            Bob->>Alice: Feeling fresh like a daisy
        end

        opt Extra response
            Bob->>Alice: Thanks for asking
        end
    end

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!

[未完待續]
Lu Ming
[2017-6-20]