[ma91n]

close #469

ダークで flowchart だけ線と矢印を塗り直していたのをやめ、全部の図を白い紙の上に置く形にした（技術ブログ #3271 と同じ）。!important 付きの 5 ルール（セレクタ 12 本）が消えて、規則は 1 つになる。

なぜ種別で分けられないか

「箱が紙を持っているか」は図の種別では決まらない。look: handDrawn の flowchart（forPerformanceTest に 4 枚）はハッチングで地を描くので箱が透ける。明るい箱を前提に焼き付いた黒い文字が、暗い地の上にそのまま残る。塗り直しの対象は線と矢印だけなので、この破れ方には手が届かない。

紙を敷けば、線・箱・文字・札のどれにも触らずに済む。記事に貼った透過画像と同じ扱い（このサイトの #434 と同じ手）。

影響範囲（.vitepress/mermaid/*.svg 85 枚）

種別	枚数	before	after
flowchart、.cluster 要素なし	29	線・矢印・辺ラベルを塗り直し	紙
flowchart、.cluster 要素あり	25	紙	紙
sequence / er / gantt / state ほか	31	紙	紙

紙とページの地（#1b1b1f）の差は 17.17。紙の上の線と文字は明るい側の見え方そのままになる。

角丸は 8px から 4px に下げた。紙は「箱」ではなく貼った画像なので、小さな部品の段（技術ブログの角丸 3 段のうち、サムネイル・画像と同じ値）。

確認

ダークにして見る。塗り直しをやめた 29 枚が出るのは以下。

• documents/forPerformanceTest/performance_test.html … handDrawn の 3 枚。before はノードの文字が暗い地に沈んでいた
• documents/forAsync/async_guidelines.html、documents/forWebAPI/web_api_guidelines.html、documents/forIF/if_guidelines.html … 素の flowchart
• 変わらないことの確認: documents/forDB/postgresql_guidelines.html などの sequence 図（もともと紙）

.mermaid（キャッシュの無い図のクライアント描画）は mermaid.js 自身がテーマを切り替えるので触っていない。

🤖 Generated with Claude Code

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.