Skip to content

Mermaid を表示する

mkdocs.yml につぎの値を追記します。

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

サンプルとして Markdown はつぎのように記載します。

flowchart LR
    Start --> Stop
```mermaid
flowchart LR
    Start --> Stop
```

Mermaid の記法については公式のドキュメントを参照してください。https://mermaid.js.org/intro/

参考： Material for MkDocs. "Diagrams", (2025-03-02).