【要約】Mermaidで書いた過去記事の図を、話題の図解スキルに食わせてみた — 色指定が全部捨てられた [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
Mermaidを用いて技術ドキュメントを作成するエンジニアが、日本語環境特有の表示不備や、テーマ対応に伴うメンテナンスコストに直面している。具体的には以下の問題が発生していた。
- ・日本語ラベルの不自然な折り返しや、枠外への突き抜け、文字の見切れ。
- ・ダークテーマ対応のために、全ノードへ個別に色指定（color:#000000等）を行う手間。
- ・改行位置を制御するために、ソース内に<br/>タグを挿入する作業の発生。
// Approach
既存のMermaidコードを「変換」するのではなく、その「意味」のみを抽出してレイアウトを引き直す「再描画（Redraw）」アプローチを採用している。具体的には以下のステップを踏む。
- ・Claude Code用スキル「diagram-design」を用い、Mermaidのソースから内容と方向性のみを抽出。
- ・抽出された構造に基づき、light/dark/fullの3つのバリエーションを自動生成。
- ・Playwrightを用いて、SVG要素のみを対象とした高精度なPNG画像化を実行。
// Result
検証の結果、Mermaidの弱点であった日本語表示の問題が解消され、ドキュメント作成者のメンテナンスコストが大幅に削減された。主な成果は以下の通りである。
- ・日本語ラベルの折り返し、突き抜け、見切れがすべて解消。
- ・<br/>による改行指定が不要になり、記号による正規化が行われる。
- ・ダークテーマ対策の色指定が不要となり、設計がシンプル化。
- ・階層構造や中心ノード（ハブ）の特定など、図の構造を正確に認識。
Senior Engineer Insight
> 本手法の真価は、描画エンジンへの依存を断ち切り、「意味（Semantics）」を分離した点にある。Mermaidのレンダリング不備に起因する「微調整の泥沼」から解放される点は、ドキュメントの保守性を劇的に高める。ただし、対応文法が4種に限定されており、画像化のプロセスが追加されるため、単純な図にはオーバーヘッドが大きい。高度な構造を持つ図や、テーマ適応が必須の公開ドキュメントにおいて、ワークフローに組み込む価値がある。