【Mermaid】チートシート

Mermaid

Mermaidを使うことが増えてきたので、個人的に多用する部分をまとめたチートシートを作成していきます。

Mermaid | Diagramming and charting tool
Create diagrams and visualizations using text and code.
mermaid.js.org

作成できる図の種類

フローチャート

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
flowchart TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car]

シーケンス図

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!
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!

クラス図

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 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() }

ガントチャート

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    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 dateFormat YYYY-MM-DD 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

パイチャート

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

状態遷移図

stateDiagram
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
stateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

ER 図

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"
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: 3: Me
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: 3: Me

Git グラフ

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit
gitGraph commit commit branch develop checkout develop commit commit checkout main merge develop commit commit

マインドマップ

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
mindmap root((mindmap)) Origins Long history ::icon(fa fa-book) Popularisation British popular psychology author Tony Buzan Research On effectiveness<br/>and features On Automatic creation Uses Creative techniques Strategic planning Argument mapping Tools Pen and paper Mermaid

フローチャートの向き

フローチャート全体の向きは、flowchart の後に指定します。

  • TB（Top to Bottom）：上から下
  • BT（Bottom to Top）：下から上
  • LR（Left to Right）：左から右
  • RL（Right to Left）：右から左
flowchart TB
    A --> B
    B --> C
flowchart TB A --> B B --> C 
flowchart BT
    A --> B
    B --> C
flowchart BT A --> B B --> C 
flowchart LR
    A --> B
    B --> C
flowchart LR A --> B B --> C 
flowchart RL
    A --> B
    B --> C
flowchart RL A --> B B --> C

ノードの形状とテキスト


flowchart
    A
    B[A]
    C[[A]]
    D[\A\]
    E[/A/]
    F[/A\]
    G[\A/]
    H(A)
    I((A))
    J(((A)))
    L[(A)]
    M{{A}}
    N{A}
    O>A]
flowchart A B[A] C[[A]] D[\A\] E[/A/] F[/A\] G[\A/] H(A) I((A)) J(((A))) L[(A)] M{{A}} N{A} O>A]

矢印

矢印の種類とコメント

flowchart LR
    A -- 通常の矢印 --> B
    C --- 太い線 --- D
    E -. 点線の矢印 .-> F
    G == 太線の矢印 ==> H
    I -- 丸付き矢印 --o J
    K -- バツ印付き矢印 --x L
flowchart LR A --> B C --- D E -.-> F G ==> H I --o J K --x L M --> |線の中央に文字|N

矢印の長さ

flowchart LR
    A -->|長さ1| B
    C --->|長さ2| D
    E ---->|長さ3| F
    G =====>|長さ4| H
flowchart LR A -->|長さ1| B C --->|長さ2| D E ---->|長さ3| F G =====>|長さ4| H

グループ化

flowchart LR
    subgraph グループA
        A1 --> A2
    end
    subgraph グループB
        B1 --> B2
    end
    A2 --> B1
flowchart LR subgraph グループA A1 --> A2 end subgraph グループB B1 --> B2 end A2 --> B1

その他詳細について

その他の詳しいことは、ここを確認することにします。

About Mermaid | Mermaid
Create diagrams and visualizations using text and code.
mermaid.js.org
タイトルとURLをコピーしました