作成日: 2022.10.19

Mermaid で シーケンス図

Markdown で シーケンス図を描くことができる Mermaid というライブラリを使ってみる。

MkDocsへの設定

以下を追加するだけ。(字下げ位置注意。-nameとclassとformatは同じ位置じゃないとエラーになった)
mkdocs.yml

markdown_extensions:
    - pymdownx.superfences:
        custom_fences:
          - name: mermaid
            class: mermaid
            format: !!python/name:pymdownx.superfences.fence_div_format

extra_javascript:
    - 'https://unpkg.com/mermaid@9.1.7/dist/mermaid.min.js'

シーケンス図

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

が、以下のシーケンス図に変換される！

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!

```mermaidと書かないと変わらないので注意！

VSCodeで確認

いちいち mkdocs build して確認はさすがにしんどい。 xxx.md ファイルに書けばVSCodeでプレビューを出せるのでそれで確認したほうが良い。

プレビューを出すための拡張機能は、 Markdown Preview Mermaid Support 。

以上！

---

---

---

---