Mermaid.jsの使い方メモ

Mermaidとは

https://github.com/mermaid-js/mermaid

MermaidはJavaScript製のダイアグラム生成ツールでUMLなどのダイアグラムを生成するツール。テキストから図を生成できるが、グラフを生成することはできない。

公式サイトみると相当なことできるが使いこなすのは大変。簡易的なブロック図みたいなものでまずは利用できればいいかと思う。

https://qiita.com/b-mente/items/97a4296666faccd53a72#生成できる図

VSCodeでMermaidを使う手順

---

VSCodeのMarkdownで使えるようにするためにはMarkdown All in OneとMarkdown Preview Mermaid Supportのアドオンをインストールする。

https://qiita.com/b-mente/items/b17275090176d63d1d69

記法

バッククォート3つとmermaidで囲う

```mermaid
flowchart LR

A[Hard] -->|あ| B(Round)
B --> C{Decision}
C -->|い| D[Result 1]
C -->|う| E[Result 2]
```

オンラインでLiveプレビュー＆画像出力

---

オンラインエディタでMermaidが使える

https://mermaid.live/edit

ここのSample Diagramsを出力してみる

Sequence

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

Flow

```mermaid
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]
```

Class

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

State

```mermaid
stateDiagram-v2
  [*] --> Still
  Still --> [*]
  Still --> Moving
  Moving --> Still
  Moving --> Crash
  Crash --> [*]
```

ER

```mermaid
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"
```

Gantt

```mermaid
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
```

Git

```mermaid
gitGraph
  commit
  commit
  branch develop
  checkout develop
  commit
  commit
  checkout main
  merge develop
  commit
  commit
```

Pie

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

Journey

```mermaid
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
```

Mindmap

Live Editorでしか機能しない？

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