MKDocsでUMLを表示する方法

事前準備

以下のパッケージをPyPIからインストールしておく

pip install pymdown-extensions

Mermaid.jsの設定方法

以下内容を mkdocs.yml ファイルに追記する。

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

extra_css:
  - https://unpkg.com/mermaid@8.6.4/dist/mermaid.css

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

sample mermaid

mermaid 記法にて記述

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

• 表示例

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

補足：PlantUMLの設定方法

PyPIよりplantuml-markdownをインストールする

pip install plantuml-markdown

mkdocs.ymlに以下の設定をする

markdown_extensions:
  - plantuml_markdown:
      server: http://www.plantuml.com/plantuml

plantuml-markdownは描画を行うためのサーバを 設定する必要がある。サーバはローカルにも構築することができ、 dockerコマンドで簡単に作成可能. plantuml-server

参考サイト

Official document Diagram
MKDocsでUMLを表示する方法
Support for mermaid diagrams #693
PyMdown拡張機能のドキュメント SuperFences
plantuml-markdown
PyMdown Extensions Documentation / Advanced Mermaid Notes