書籍の図をSVG化するワークフローを svg-diagram スキル v2 にまとめた

別リポジトリ eurekapu-nuxt4 で、会社法と法人税法のテキストに載っている図をSVG化する作業を1日まわした。最初の数枚は svg-diagram スキルを呼ばずにいきなり手で書き始めて、viewBox の幅も色のルールも外した状態で出来上がった。途中でスキルを呼び直し、出てきた知見を v2 として作り直してリポジトリに戻している。

やった図2種類

公開会社・非公開会社（ベン図版あり）

会社法の入門書に載っていた、公開会社と非公開会社の関係図をSVGにした。元の本の図は「定款の定め」というプロパティが各カードの上にバラバラと並んでいて、同じ条件が2回ずつ書かれていた。これを左側1か所にまとめて、右側に「該当する」「該当しない」の判定を置く形に組み替えた。重複を1か所に寄せただけで、ボックスの数が6個から4個に減った。

そのあとベン図版を別途作った。「譲渡制限なし株式の集合」と「譲渡制限株式の集合」の重なり方で、公開会社と非公開会社の定義差が一目で読める。「一部でも譲渡制限なし株式を発行していれば公開会社」という条文の構造が、円の重なりとしてそのまま絵になる。保存先は2ファイル。

C:\Users\numbe\Pictures\ClipboardImages\koukai_hikoukai_kaisha.svg
C:\Users\numbe\Pictures\ClipboardImages\koukai_hikoukai_kaisha_venn.svg

役員給与の損金算入可否フローチャート

法人税法のテキストの図で、退職給与以外・退職給与・隠蔽仮装の3カテゴリが横並びになっていた。本の図のままトレースしようとして、矢印の向きを取り違えて1回引き直した。ジャンクション点を子ボックスの右側に置いてしまい、矢印が逆流していた。

この時点で「本の図を忠実再現する方針」を捨てた。判定軸を共通化したパラレルツリーに作り直すと、3カテゴリが同じ深さで並ぶ。

退職給与以外
├─ イ・ロ・ハに該当 → 業績連動か？ → 要件を満たすか？ → 適正/過大
└─ 使用人兼務役員の使用人部分

退職給与
└─ 業績連動か？ → 要件を満たすか？ → 適正/過大

隠蔽・仮装
└─ 全額損金不算入

最初は「該当しない給与」を独立カテゴリとしてL1に並べてしまった。テキストを読み直すと、退職給与以外の中の2分岐（イ・ロ・ハ系と使用人兼務役員の使用人部分）に該当しないものが「全額損金不算入」になるだけで、L1に並ぶカテゴリではない。L1から落として、各分岐の末端に「該当しなければ全額不算入」と注記する形に格下げした。これで3カテゴリの粒度がそろった。

色は「→ ○ 損金算入」の文字だけマゼンタ（#C2185B）にした。アウトカム1点を強調する原則どおりで、否認や全額不算入の枝は黒のまま残してある。

スキルを呼ばずに書いた失敗

恥ずかしい話、最初の数枚はスキルを呼ばずに直接 SVG を書き始めた。出来上がってから「あれ、viewBox 720 じゃなくて 800 で書いてた」「外枠のグレー線を引いてしまっていた」「白背景のカードを置くべきところに色付き背景を敷いてしまった」と気付いた。

svg-diagram スキルには viewBox 720・外枠なし・構造はグレー濃淡・内容は白カード・マゼンタは ML3 1点のみ、というルールが書いてある。書き始める前にスキルを呼んでいれば、最初から枠の幅で迷わずに済んだ。

ここで Claude Opus 4.7 が「ツール使用を控えめに判断する」傾向と噛み合っているのを実感した。明示的に「svg-diagram スキルを呼んでから書いて」と頼まないと、自前で書き始めてしまう。

svg-diagram スキル v2 への反映

途中でスキルを呼び直し、今回の知見を v2 として書き直した。主要な変更点。

viewBox 720 を冒頭に明示: 全SVGの横幅を720に固定。複数SVGを並べた時の視覚整合が取れる
タイトルは中央寄せ＋下線: GL1パネルの上端にタイトル領域を置き、下線で本文と区切る
構造はGL1パネル → GL2セクションヘッダー → 白カードの3層: 構造はグレー、内容（読ませる文字）は白カードに載せる
マゼンタはML3、1点のみ: アウトカム1か所だけに色を当てる。複数箇所に当てると強調が消える

スキルの description にも 「書籍の図をSVGに」「この画像をSVG化して」 というトリガー文言を追加した。次回からは「書籍の図をSVGに」と書けばスキルが立ち上がる。

スキル本体には新セクション 「書籍画像→SVG図解への変換ワークフロー」 を追記した。中身は4ステップ。

本の図を写経する前にロジックを抽出する: ボックスのラベルだけメモして、配置はいったん忘れる
判定軸を共通化してパラレルに並べる: 同じ深さで読める形に組み替える
アウトカム1点だけマゼンタに: 「損金算入」「合格」など読み手が探す結論にだけ色を当てる
viewBox 720・外枠なし・白カード: 既存ルールに揃える

学び

本の図は忠実再現より整理して描く方が伝わる: 元のレイアウトに引きずられると、判定軸がズレたまま固定される。一度ロジックだけ抜き出すと組み替えが効く
スキルは書き始める前に呼ぶ: 出来上がってから呼び直すと、viewBox や色のやり直しで二度手間になる
マゼンタは1点に絞る: 「損金算入」だけ色を当てると、読み手の目が結論に飛ぶ。2か所以上に当てた瞬間、強調が消える
パラレル構造は判定軸の共通化で生まれる: 「業績連動か？ → 要件を満たすか？ → 適正/過大」という同じ軸を3カテゴリで使い回すと、横に読んでも縦に読んでも構造が見える

明日やること

eurekapu-nuxt4 側で SVG を実コンテンツに差し込んで、ブラウザでの見え方を確認する
役員給与のフローチャートを別の章（出資関係の判定）にも応用できるか試す
svg-diagram スキル v2 の動作確認用に、他の本の図を1枚SVG化してリグレッションを取る