WordPressのmarkdownプラグイン"MD Githuber MD"を使い図形描画できる。
・画像出力ではないため、PDF変換した際に図形内の文字を検索できる点が嬉しい。

---

sequenceDiagram

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!

---

gantt

gantt
dateFormat  MM/DD
title Adding GANTT diagram to mermaid
section A section
Completed task:done,des1,10/06,10/08
Active task:active,des2, 10/09, 3d
Future task:des3,after des2,5d
Future task2:des4,after des3,5d

gantt
title schedule(休日祝日なし設定)
    dateFormat YYYY-MM-DD
    axisFormat  %m/%d
    excludes weekends 2020-04-29  2020-05-02 2020-05-03 2020-05-04 2020-05-05 2020-05-06 2020-07-23 2020-07-24 2020-08-10 2020-09-21 2020-09-22 2020-11-03 2020-11-23

    section HTML
        設計&開発ドキュメント作成: design_and_doc, 2020-04-13, 3d

    section Migration
        設計: desgin_migration, after design_and_doc, 2d
        実装: imple_migration, after imple_api, 5d

    section REST API
        設計: design_api, after desgin_migration, 5d
        実装: imple_api, after design_api, 5d
        テスト: test_api, after imple_api, 5d

    section Android
        実装: imple_android, after test_api, 2w

    section iOS
        実装: imple_ios, after imple_android, 2w

---

classDiagram

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

---

gitGraph:

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

---

erDiagram

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

---

journey

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

---

piechart

pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

---

graph LR

graph LR
    id1[(Database)]
id2(This is the text in the box)
id3([This is the text in the box])
id4[[This is the text in the box]]
id5((This is the text in the circle))
id6>This is the text in the box]
id7{This is the text in the box}
id8{{This is the text in the box}}
id9[/This is the text in the box/]
id10[\This is the text in the box\]
A[/"Christmas:#9829;"\]
B[\"Go shopping:#quot;"/]
C --> D --- E -- text --- F
G -.-> H ==> I
J --> K & L --> M

id99(Start)-->id98(Stop)
    style id98 fill:#f9f,stroke:#333,stroke-width:4px
    style id99 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

XX:::someclass --> YY
    classDef someclass fill:#f96;

flowchart LR

flowchart LR
O --o P --x R
A o--o B
B <--> C
C x--x D

flowchart LR
c1-->a2
subgraph one
    a1-->a2
end
subgraph two
    b1-->b2
end
subgraph three
    c1-->c2
end
one --> two
three --> two
two --> c2