MkDocsでUMLを表示する方法について

MKDocsはPython製のドキュメントサイトジェネレータです。
簡単に構築できる上に、マークダウンで書けるので、
ちょっとしたドキュメントの静的サイトを構築するのに便利です。

そうなると、Mermaid.jsやPlantUMLでUMLを表示したく
なる場面も多いと思います。

MKDocsなら、ちょっと設定を行うだけで
表示が可能となります。

MKDocsの構築は省略しますが、
以下のパッケージを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/[email protected]/dist/mermaid.css

extra_javascript:
  - https://unpkg.com/[email protected]/dist/mermaid.min.js

superfencesで、コードブロックの名前がmermaidとなっているものを
class名をmermaidと設定した

pip install plantuml-markdown

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