# Mermaid の練習

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 1344

sequenceDiagram
    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!
    Alice->>Bob: hoge
    Alice->>Alice2: hoge

stateDiagram-v2
    direction LR
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Doing
    Moving --> Crash
    Crash --> [*]
    [*] --> Still

        state First {
        [*] --> second
        second --> [*]
    }
            

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
        A task           :done, hoge, 2022-07-02, 30d
        another task1    :active, hoge, after a1  , 20d
        another task2    : after hoge  , 20d
    section Another
        Task in sec      : 2022-07-12  , 12w
        another task2    : 24d
        task3            : 5d
        task4            : done, 2w

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP

flowchart LR
A[障害検知]--> B{Alertかどうか}
B --> |ALERTである|L[社内不具合報告記載] -->M[不具合チケット起票]--> N[エンジニア内会議招集議論]
B -.-> |ALERTではない|C[終了]
C[不具合チケット起票]--> D[hert_med_impl相談]--> E{障害の可能性がある};

E --------------------> |不具合の可能性大|F[社内不具合報告記載]
E -...-> |不具合ではない|G[終了]
F --> H{障害だったのか}
H --> |YES|I[不具合チケット 継続]
H -.-> |NO|J[不具合チケット Close]

stateDiagram-v2
    [*] --> First

    state Store {

        [*] --> Second
        
        state Second {
            [*] --> second
            second --> Third

            state Third {
                [*] --> third
                third --> [*]
            }
        }
    }

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"

stateDiagram
    direction LR
    state "Native Application" as s2 
    state YYNative_Application {
      direction LR
      React       --> bluevery
    }
    B --> peripheral        

stateDiagram
    direction LR
    state 1natsuNative_Application {
      direction LR
      state React {
          a--> b
      }
      state bluevery {
          a--> b
      }
      React --> bluevery
    }
    bluevery --> peripheral        

### okazaki

stateDiagram
    direction LR
    state Native Applicatoin {
      direction LR

    a       --> b
    }
    B --> peripheral        

graph LR;
  subgraph クライアント
    usr[fa:fa-user ユーザー]
  end
  subgraph hoge
    sup[fa:fa-user サポートチーム]
    dev[fa:fa-user 開発チーム]
    usr --> |1. サポート願い| sup;
    sup --> |2. 情報共有| dev
    dev --> c1{3. 修正可否検討}
      c1 --> |4. 可能なら対応予定| sup
      c1 --> |4. 不可能なら理由| sup
    sup --> |5. 返答| usr
  end

stateDiagram
    direction LR 
    state "Native Application" as s2 {
      direction LR

    a       --> b
    }
    b --> peripheral