🧜‍♀️

Sphinxでmermaidを書く

2023/07/27に公開

Python Sphinx で mermaid を使いたい

PlantUML以外にも便利なものがあると、mermaidも教えてもらったが
環境構築が大変だったのでメモする。

Windows10、VSCode使用。Pythonはインストール済み。
venvで仮想環境を作って、そこに作っていく。
※仮想環境のPythonは3.11、pipとsetuptoolのみインストールされている状態

コマンドラインに入力し、ディレクトリに移動、activateしておく
※activateされていれば３行目は実行不要。

> python -m venv [仮想環境名]
> cd [仮想環境名]
> Scripts¥activate.bat

> pip install sphinx
> pip install ebbonio
> pip install sphinxcontrib-mermaid

これをやらないと「conf.py」、「make.bat」とかは出てこない

> sphinx-quickstart

出てきたメッセージに対する詳しい設定内容は
こちらの記事がわかりやすいです。ありがとうございます。

「reStructuredText」の拡張機能をインストールする。

settingにワークスペースのPathを入れる必要がある。
この拡張機能の設定についてこちらの記事がわかりやすいです。
ありがとうございます。

プロジェクト内にできた「conf.py」を開き以下を入力する

extentions = [
	'sphinxcontrib.mermaid'
]

ちなみにSphinxでmermaidを使用する場合は以下を使用する。
また、１行空けてから描き始めないと描画されない。

↓sphinxでmermaidを記載する場合

.. mermaid::

	ここに記載する

↓mermaid.md(マークダウン)で記述する場合

:::mermaid

	ここに記載する
:::

これもやらないと色々出てこない。自動的に行ってくれる設定も見かけた。
編集後、これをやらないとHTMLファイルには反映がされない。

プロジェクト内にある「index.rst」が「index.html」になる
「.¥_build¥html」に格納されるので、そちらを開けばOK

筆者はIT初心者なのでちょっと骨が折れました