Open3

Mermaidの導入

星野 仁星野 仁

この記事の概要

Mermaidをソフトの設計書や説明書としてGitプロジェクトに追加するための環境設定のメモ。

目標

開発プロジェクトと一体で管理できるmdまたはmmdとして、テキストコードによる作図が良い感じでVSC上で表示される。
さらにクリップボードへの画像出力とSVGファイルへのエキスポートができる。

対象環境

  • 実行環境： Devcontainer (debian:bookworm-slim)
  • フォルダ： ワークスペースの ./doc
星野 仁星野 仁

環境設定

1. VSC Extension導入

対象のVSC Devcontconainer 上に以下の拡張機能を追加。

拡張機能として追加したら Devcontainer の設定 .devcontainer/devcontainer.json にも追加しておく。（拡張機能メニューの「devcontainer.jsonに追加」でOK）

2. 設定ファイル

Mermaid Live Editor による mmd ファイルのプレビュー表示と出力を、Markdown Preview Mermaid Support による md (Markdown) のプレビューとなるべく合わせるために以下のファイルを作成する。

doc/mermaid_config.json
{
    "look": "classic",
    "theme": "neutral",
    "themeVariables": {
        "fontSize": "12px"
    }
}

この設定ファイルを Mermaid Live Editor で有効化するため、VSCの設定パスを設定。

.vscode/settings.json
{
   ...
   "mermaid-editor.preview.defaultMermaidConfig": "doc/mermaid_config.json"
}
星野 仁星野 仁

使い方

mdファイルのプレビュー

md ファイル内は以下のように記述すればプレビューで表示される。
md ファイルのプレビューはテキストエディターのタブ上右クリックのメニューで 「Open Preview」を選択。

sample
```mermaid
flowchart
  A(Foo) -- "call" --> B(Bar)
  %% 以下省略
```
mmdファイルのプレビュー

mmd ファイルのプレビューはテキストエディターのエディター画面上右クリックのメニューで「Mermaid: Preview diagram」を選択。

mmdファイルのエキスポート

SVGファイルへのエキスポートは、mmdファイルとプレビュー画面を開いた状態でテキストエディターのエディター画面上右クリックのメニューで「Mermaid: Generate image」を選択。
同じフォルダに別拡張子でファイルが生成される。

mmdファイルの画像コピー

プレビュー画面上で右上のクリップボードアイコンを選択。

画像のスケール変更は @outputScale をドキュメントに埋め込むことで可能。

flowchart
%% @outputScale(3.5)
  A(Foo) -- "call" --> B(Bar)
  %% 以下省略

プレビュー上は変化が無いが、コピーされる画像のサイズが変更されている。