Mermaidのフローチャートを、PowerPointで編集できる図形として貼る

Mermaidで書いたフローチャートを会議資料に載せたい。それだけのことが、意外と面倒です。描画ツールで表示した図をスクリーンショットで貼ると、レビューで「この箱だけ色を変えて」と言われるたびに、元のツールへ戻って作り直すことになります。この記事では、MermaidのフローチャートをPowerPointのネイティブ図形として書き出し、スライド上でそのまま編集できる形にする方法を解説します。

画像で貼ると、何が困るのか

スライドに図を載せる方法は3つあります。画像(PNG)として貼る、SVGとして貼る、そしてPowerPointの図形として貼る、です。違いが出るのは、貼るときではなく貼った後です。

画像は貼るのがいちばん簡単ですが、1つの箱だけ直すことができません。拡大すると粗くなり、スライドのフォントにも揃えられません。SVGは拡大に強い一方で、箱ごとの編集やフォントの統一は、PowerPointの版や環境によって扱いが変わります。図形として貼れば、箱、線、枠がそれぞれPowerPointの通常の図形になるので、色を変える、少し動かす、文字を直す、といった修正をスライドの中で完結できます。

もちろん、見た目を固定して配布したい資料なら画像で構いません。図形で貼る価値が大きいのは、これから何度か直すことがわかっている資料です。

書き出すまでの4ステップ

MermaidLayoutFinisherは、Mermaidのフローチャートをブラウザで描画し、配置を仕上げてから、SVG、PNG、PowerPointに書き出すWebツールです。手順は4つです。

1. コードを貼る。左のエディタにMermaidのコードを貼ります。ChatGPTのようなAIの回答を丸ごと貼っても、コードブロックの部分だけを自動で取り出します。対応しているのはflowchartとgraphの図です。
2. 配置を仕上げる。自動レイアウトの結果を見て、気になるノードをドラッグで動かします。複数のノードを選んで整列や等間隔配置もできます。全体を整え直したいときは、レイアウトメニューの「おまかせ最適化」を使うと、線の交差や重なりが少ない配置を選んでくれます。線の形は直角、直線、曲線から選べます。
3. PowerPointで書き出す。書き出しボタンからPowerPointを選び、スライドのサイズ(16:9、4:3、図に合わせる)と余白(なし、24px、48px)を決めてダウンロードします。
4. PowerPointで直す。ダウンロードした.pptxを開くと、1枚のスライドに図形として配置されています。あとは通常の図形と同じように編集できます。

貼った後に、何ができるか

書き出された図形には、それぞれ名前が付いています。ノードは「node-A」のようにMermaidのIDを含む名前、線は「edge-e0」、サブグラフは「subgraph-s1」という形です。PowerPointの選択ウィンドウを開くと、この名前で並ぶので、重なった図形の中から目当ての1つを選ぶのが楽になります。

図形の対応は次のとおりです。Mermaidの四角形は四角形に、角丸は角丸四角形に、スタジアム形はフローチャートの端子に、サブルーチンは定義済み処理に、円柱は円柱に、円は楕円に、ひし形はひし形に、六角形は六角形に、平行四辺形と台形はそれぞれ同名の図形になります。二重円は楕円を2つ重ねて表現します。線は矢印の形ごとフリーフォームの図形になり、サブグラフはラベル付きの角丸四角形として、中身のノードより背面に置かれます。

フォントは書き出し時に游ゴシックが指定されています。スライド側のフォントに揃えたいときは、PowerPointで図形をすべて選択してフォントを変更すれば一括で置き換わります。図の大きさは、スライドの内側(四辺に0.4インチの余白)に収まるように縮小されますが、拡大はされません。小さい図は等倍のまま中央に置かれます。

知っておくべき制約

図形にできないものが2つあります。1つは、傾きが逆向きの平行四辺形と台形です。PowerPointには反転した向きの図形がなく、図形を反転させると中の文字まで反転してしまうため、反転していない側の形で出力されます。該当した場合は、書き出し後に「N個の図形は近い形に置き換えました」と件数を知らせます。もう1つは、線の端の×印です。PowerPointに対応する線端がないため、小さな×の図形を別に描いて表現します。

また、このツールが扱えるのはflowchart系の図だけです。シーケンス図やガントチャートは対象外で、貼るとエラーになります。

まとめ

Mermaidのフローチャートをスライドに載せるなら、直すことが見えている資料ほど、画像ではなくPowerPointの図形として貼るのが楽です。コードを貼り、配置を仕上げ、スライドサイズを選んで書き出せば、あとはPowerPointの中で色も位置も文字も直せます。図の内容はブラウザの外に出ません。

配置を機械に任せる「おまかせ最適化」がどう動いているかは、開発記事「フローチャートの配置を、実測スコアで選ぶ」で紹介しています。日本地図を同じくPowerPointの図形として書き出す方法は、「白地図をパワポ資料に使う方法」にまとめています。