[{"data":1,"prerenderedAt":253},["ShallowReactive",2],{"content-/svg-diagram-book-figures":3,"all-pages-for-dir":251,"og-image-/svg-diagram-book-figures":252},{"id":4,"title":5,"body":6,"category":229,"description":230,"extension":231,"meta":232,"navigation":202,"path":233,"project_name":234,"published":235,"publishedAt":236,"seo":237,"stem":238,"tags":239,"todo":248,"updatedAt":249,"__hash__":250},"pages/2026-04/2026-04-28/svg-diagram-book-figures.md","書籍の図をSVG化するワークフローを svg-diagram スキル v2 にまとめた",{"type":7,"value":8,"toc":217},"minimark",[9,13,22,26,31,34,37,47,50,53,56,62,65,68,71,74,79,82,86,89,118,125,132,159,162,188,191],[10,11,5],"h1",{"id":12},"書籍の図をsvg化するワークフローを-svg-diagram-スキル-v2-にまとめた",[14,15,16,17,21],"p",{},"別リポジトリ eurekapu-nuxt4 で、会社法と法人税法のテキストに載っている図をSVG化する作業を1日まわした。最初の数枚は ",[18,19,20],"code",{},"svg-diagram"," スキルを呼ばずにいきなり手で書き始めて、viewBox の幅も色のルールも外した状態で出来上がった。途中でスキルを呼び直し、出てきた知見を v2 として作り直してリポジトリに戻している。",[23,24,25],"h2",{"id":25},"やった図2種類",[27,28,30],"h3",{"id":29},"公開会社非公開会社ベン図版あり","公開会社・非公開会社（ベン図版あり）",[14,32,33],{},"会社法の入門書に載っていた、公開会社と非公開会社の関係図をSVGにした。元の本の図は「定款の定め」というプロパティが各カードの上にバラバラと並んでいて、同じ条件が2回ずつ書かれていた。これを左側1か所にまとめて、右側に「該当する」「該当しない」の判定を置く形に組み替えた。重複を1か所に寄せただけで、ボックスの数が6個から4個に減った。",[14,35,36],{},"そのあとベン図版を別途作った。「譲渡制限なし株式の集合」と「譲渡制限株式の集合」の重なり方で、公開会社と非公開会社の定義差が一目で読める。「一部でも譲渡制限なし株式を発行していれば公開会社」という条文の構造が、円の重なりとしてそのまま絵になる。保存先は2ファイル。",[38,39,44],"pre",{"className":40,"code":42,"language":43},[41],"language-text","C:\\Users\\numbe\\Pictures\\ClipboardImages\\koukai_hikoukai_kaisha.svg\nC:\\Users\\numbe\\Pictures\\ClipboardImages\\koukai_hikoukai_kaisha_venn.svg\n","text",[18,45,42],{"__ignoreMap":46},"",[27,48,49],{"id":49},"役員給与の損金算入可否フローチャート",[14,51,52],{},"法人税法のテキストの図で、退職給与以外・退職給与・隠蔽仮装の3カテゴリが横並びになっていた。本の図のままトレースしようとして、矢印の向きを取り違えて1回引き直した。ジャンクション点を子ボックスの右側に置いてしまい、矢印が逆流していた。",[14,54,55],{},"この時点で「本の図を忠実再現する方針」を捨てた。判定軸を共通化したパラレルツリーに作り直すと、3カテゴリが同じ深さで並ぶ。",[38,57,60],{"className":58,"code":59,"language":43},[41],"退職給与以外\n├─ イ・ロ・ハに該当 → 業績連動か？ → 要件を満たすか？ → 適正/過大\n└─ 使用人兼務役員の使用人部分\n\n退職給与\n└─ 業績連動か？ → 要件を満たすか？ → 適正/過大\n\n隠蔽・仮装\n└─ 全額損金不算入\n",[18,61,59],{"__ignoreMap":46},[14,63,64],{},"最初は「該当しない給与」を独立カテゴリとしてL1に並べてしまった。テキストを読み直すと、退職給与以外の中の2分岐（イ・ロ・ハ系と使用人兼務役員の使用人部分）に該当しないものが「全額損金不算入」になるだけで、L1に並ぶカテゴリではない。L1から落として、各分岐の末端に「該当しなければ全額不算入」と注記する形に格下げした。これで3カテゴリの粒度がそろった。",[14,66,67],{},"色は「→ ○ 損金算入」の文字だけマゼンタ（#C2185B）にした。アウトカム1点を強調する原則どおりで、否認や全額不算入の枝は黒のまま残してある。",[23,69,70],{"id":70},"スキルを呼ばずに書いた失敗",[14,72,73],{},"恥ずかしい話、最初の数枚はスキルを呼ばずに直接 SVG を書き始めた。出来上がってから「あれ、viewBox 720 じゃなくて 800 で書いてた」「外枠のグレー線を引いてしまっていた」「白背景のカードを置くべきところに色付き背景を敷いてしまった」と気付いた。",[14,75,76,78],{},[18,77,20],{}," スキルには viewBox 720・外枠なし・構造はグレー濃淡・内容は白カード・マゼンタは ML3 1点のみ、というルールが書いてある。書き始める前にスキルを呼んでいれば、最初から枠の幅で迷わずに済んだ。",[14,80,81],{},"ここで Claude Opus 4.7 が「ツール使用を控えめに判断する」傾向と噛み合っているのを実感した。明示的に「svg-diagram スキルを呼んでから書いて」と頼まないと、自前で書き始めてしまう。",[23,83,85],{"id":84},"svg-diagram-スキル-v2-への反映","svg-diagram スキル v2 への反映",[14,87,88],{},"途中でスキルを呼び直し、今回の知見を v2 として書き直した。主要な変更点。",[90,91,92,100,106,112],"ul",{},[93,94,95,99],"li",{},[96,97,98],"strong",{},"viewBox 720 を冒頭に明示",": 全SVGの横幅を720に固定。複数SVGを並べた時の視覚整合が取れる",[93,101,102,105],{},[96,103,104],{},"タイトルは中央寄せ＋下線",": GL1パネルの上端にタイトル領域を置き、下線で本文と区切る",[93,107,108,111],{},[96,109,110],{},"構造はGL1パネル → GL2セクションヘッダー → 白カードの3層",": 構造はグレー、内容（読ませる文字）は白カードに載せる",[93,113,114,117],{},[96,115,116],{},"マゼンタはML3、1点のみ",": アウトカム1か所だけに色を当てる。複数箇所に当てると強調が消える",[14,119,120,121,124],{},"スキルの description にも ",[18,122,123],{},"「書籍の図をSVGに」「この画像をSVG化して」"," というトリガー文言を追加した。次回からは「書籍の図をSVGに」と書けばスキルが立ち上がる。",[14,126,127,128,131],{},"スキル本体には新セクション ",[96,129,130],{},"「書籍画像→SVG図解への変換ワークフロー」"," を追記した。中身は4ステップ。",[133,134,135,141,147,153],"ol",{},[93,136,137,140],{},[96,138,139],{},"本の図を写経する前にロジックを抽出する",": ボックスのラベルだけメモして、配置はいったん忘れる",[93,142,143,146],{},[96,144,145],{},"判定軸を共通化してパラレルに並べる",": 同じ深さで読める形に組み替える",[93,148,149,152],{},[96,150,151],{},"アウトカム1点だけマゼンタに",": 「損金算入」「合格」など読み手が探す結論にだけ色を当てる",[93,154,155,158],{},[96,156,157],{},"viewBox 720・外枠なし・白カード",": 既存ルールに揃える",[23,160,161],{"id":161},"学び",[90,163,164,170,176,182],{},[93,165,166,169],{},[96,167,168],{},"本の図は忠実再現より整理して描く方が伝わる",": 元のレイアウトに引きずられると、判定軸がズレたまま固定される。一度ロジックだけ抜き出すと組み替えが効く",[93,171,172,175],{},[96,173,174],{},"スキルは書き始める前に呼ぶ",": 出来上がってから呼び直すと、viewBox や色のやり直しで二度手間になる",[93,177,178,181],{},[96,179,180],{},"マゼンタは1点に絞る",": 「損金算入」だけ色を当てると、読み手の目が結論に飛ぶ。2か所以上に当てた瞬間、強調が消える",[93,183,184,187],{},[96,185,186],{},"パラレル構造は判定軸の共通化で生まれる",": 「業績連動か？ → 要件を満たすか？ → 適正/過大」という同じ軸を3カテゴリで使い回すと、横に読んでも縦に読んでも構造が見える",[23,189,190],{"id":190},"明日やること",[90,192,195,205,211],{"className":193},[194],"contains-task-list",[93,196,199,204],{"className":197},[198],"task-list-item",[200,201],"input",{"disabled":202,"type":203},true,"checkbox"," eurekapu-nuxt4 側で SVG を実コンテンツに差し込んで、ブラウザでの見え方を確認する",[93,206,208,210],{"className":207},[198],[200,209],{"disabled":202,"type":203}," 役員給与のフローチャートを別の章（出資関係の判定）にも応用できるか試す",[93,212,214,216],{"className":213},[198],[200,215],{"disabled":202,"type":203}," svg-diagram スキル v2 の動作確認用に、他の本の図を1枚SVG化してリグレッションを取る",{"title":46,"searchDepth":218,"depth":218,"links":219},2,[220,225,226,227,228],{"id":25,"depth":218,"text":25,"children":221},[222,224],{"id":29,"depth":223,"text":30},3,{"id":49,"depth":223,"text":49},{"id":70,"depth":218,"text":70},{"id":84,"depth":218,"text":85},{"id":161,"depth":218,"text":161},{"id":190,"depth":218,"text":190},"dev","別リポジトリ eurekapu-nuxt4 で会社法・法人税法のテキストに載っている図をSVG化する作業を1日まわした。公開会社・非公開会社のベン図、役員給与の損金算入可否フローチャートを、本の図そのまま再現するのではなくロジックを整理したカード型に作り直した。最初はスキルを呼ばずに直接書いてしまい、viewBox や色のルールから外れた。途中でスキルを呼び直し、得られた知見を svg-diagram スキル v2 として作り直して「書籍画像→SVG図解への変換ワークフロー」セクションを追記した。","md",{},"/svg-diagram-book-figures","mdx-playground",false,"2026-04-28T00:00:00.000Z",{"title":5,"description":230},"2026-04/2026-04-28/svg-diagram-book-figures",[240,241,242,243,244,245,246,247],"SVG","図解","スキル","会社法","法人税法","役員給与","ベン図","フローチャート","memo",null,"zm_6hY3klHUGIzEVTAm0B-HcC35A-qg7N0keVLFCj5Y",[],"https://log.eurekapu.com/favicon.svg",1777533702918]