長すぎるMermaidの図表を修正する方法
長すぎるMermaidの図表を修正する方法
TL;DR
Mermaidはテキストベースの命令で自由に図表を書くことができます。Zennにもmermaid記法を使って流れ図などを書くことができます。
しかし、Mermaidを使って書いた図表をブログやnoteなどで使おうという時、図が長くなりすぎたりしてレイアウトが汚い場合があります。そういう時はdraw.ioの高度な処理からSVG画像を直接Mermaidからインポートして編集してしまうのが一番手っ取り早いです。
1. Mermaidで長い図表を書く
まず、Zennでは以下のようにmermaidを使って図表を作成できます。
Zenn上ではこの記法を使うだけで図表を描画できますが、他のブログやその他の対応してないwebサービスの投稿に使うときなどに次の問題が生じます。
- テキストの折り返しができない
- ノードのサイズや位置を細かく調整できない
- スタイルの変更が制限されている
といった制約があります。
今回は解決までの試行錯誤のログを残しておきます。
2. mmdcを使ってMermaidのSVGを生成する
Mermaidの図を編集するために、ローカル環境でmmdc（Mermaid CLI）を使ってSVGを出力してみました。
Mermaid CLIをインストール（未導入の場合）
npm install -g @mermaid-js/mermaid-cli
SVGを出力
mmdc -i sample.mmd -o output.svg
これでMermaidの図をSVG形式で取得できます。
3. draw.ioにSVGをアップロードして編集する
通常、SVGはdraw.ioで編集可能ですが、Mermaidで生成したSVGをそのままdraw.ioにアップロードすると、次のような問題が発生しました。
- 全てのオブジェクトがグループ化されてるため編集ができない
仕方ないので、ローカルでInkscapeでグループ化を解除してしまおうとしたのですが、次の問題が発生しました。
- Inkscapeでグループを解除しても黒く塗りつぶされてしまう
このままでは編集が難しいため、別の方法を探りました。
4. draw.ioの高度な挿入機能を利用する
最終的に、draw.ioの「挿入」→「高度な処理」の中にMermaidのコードを直接入力する機能があることを発見しました。これを利用することで、draw.io上で直接Mermaidのベクタ画像を作成でき、編集も可能になります。
draw.ioでMermaidを挿入する手順
- draw.ioを開く（公式サイト）
- メニューから 「配置」→「挿入」→「高度な処理」 を選択
- 「Mermaid」 を選択
- Mermaidのコードを直接入力し、「追加」を押す
これにより、draw.io上でMermaidの図が作成され、通常の図形と同様に編集できます。
5. メリット・デメリット
メリット
- Mermaidの記法を活かしつつ、draw.ioで自由に編集できる
- SVGの直接編集よりも簡単
- テキストの折り返しや細かいレイアウト調整が可能
デメリット
- Marmaidは直接編集できない（編集したい場合はdraw.ioで再調整する必要あり）
- 完全にMermaidのコードとしては扱えないため、再利用性が落ちる
6. まとめ
ZennのMermaidは便利ですが、細かい調整が難しいため、draw.ioの高度な挿入機能を使って直接ベクタ画像を作る方法が有効でした。Mermaidの図をしっかりカスタマイズしたい場合には、この方法を試してみると良いでしょう。
Discussion