[{"data":1,"prerenderedAt":225},["ShallowReactive",2],{"content-/svg-diagram-vertical-flow-rule":3,"all-pages-for-dir":223,"og-image-/svg-diagram-vertical-flow-rule":224},{"id":4,"title":5,"body":6,"category":204,"concepts":205,"description":206,"extension":207,"meta":208,"navigation":209,"ogImage":205,"path":210,"project_name":211,"published":212,"publishedAt":213,"seo":214,"stem":215,"tags":216,"todo":205,"unpublished":212,"updatedAt":205,"__hash__":222},"pages/2026-07/2026-07-04/svg-diagram-vertical-flow-rule.md","SVG図解を4:3比率から解放する ─ スキルに縦流しルールを追加して記事図解を一括刷新した",{"type":7,"value":8,"toc":195},"minimark",[9,13,18,22,30,33,36,40,47,50,53,64,67,71,74,94,97,100,127,130,134,137,140,148,151,155,162,165,168,171],[10,11,5],"h1",{"id":12},"svg図解を43比率から解放する-スキルに縦流しルールを追加して記事図解を一括刷新した",[14,15,17],"h2",{"id":16},"s字に折り返す図に引っかかった","S字に折り返す図に引っかかった",[19,20,21],"p",{},"genai-ideas シリーズの記事をブラウザで眺めていて、フロー図の番号に目が止まった。①②③と右に進んだステップが、下の段で⑥⑤④と逆走している。到達点が真ん中に来る、S字型のレイアウトだ。",[19,23,24,25,29],{},"原因は見当がついた。svg-diagram スキルがスライドの4:3比率を維持しようとして、横幅に収まらないステップを下段に折り返している。スライドならそれで正しい。でもこれは",[26,27,28],"strong",{},"Webページをスクロールしながら見る図","であって、4:3にこだわる理由がどこにもない。",[19,31,32],{},"そこで Claude Code にこう伝えた。「Webインターフェースで確認するスライド形式の図なんだから、縦に流してほしい。上から①②③④⑤⑥。マゼンタの部分が右列に出るなら2列目を使ってもいい」。",[19,34,35],{},"figure-02.svg が縦流しに組み変わり、記事ページでの表示も確認できた。マゼンタの遮断ノードは⑤の右列に配置された。",[14,37,39],{"id":38},"そもそも2列目は要るのかを対話で詰める","「そもそも2列目は要るのか」を対話で詰める",[19,41,42,43,46],{},"修正後の図を見て、今度は別の違和感を拾った。2列目に置かれた「クライアントへの直接送信は設計で遮断」というガードノードに、フローから矢印が伸びている。でもこれは",[26,44,45],{},"フローとして流れる処理ではない","。ダウンロード→税務ソフトから出力→ファイル名判別→規定フォルダへ格納→税額読み取り→チャット投稿、という本流に対する「設計上の但し書き」であって、矢印で繋がるステップではない。",[19,48,49],{},"自分で最初に「2列目を使ってもいい」と言っておいて、出てきた図を見たら「そもそも2列目が要るのか」という論点に変わった。図は作らせてみないと違和感が見えてこない。",[19,51,52],{},"Claude Code に指摘を整理させて、ガードノードは2列目と矢印をやめて、⑤の直下に矢印なしで密着配置する形に落ち着いた。",[54,55,61],"pre",{"className":56,"code":58,"language":59,"meta":60},[57],"language-text","# Before（S字型 + 2列目ガード）        # After（縦流し + 密着帯）\n① → ② → ③                            ①\n           ↓                           ↓\n⑥ ← ⑤ ← ④                            ②〜⑤\n     ↘ [遮断]                          [遮断] ←矢印なしで⑤に密着\n                                       ↓\n                                       ⑥\n","text","",[62,63,58],"code",{"__ignoreMap":60},[19,65,66],{},"ついでに lint の誤検知も1件確認した。BS比例バー図のようなチャート系SVGでは、細いバーセグメントからラベルがあえてはみ出すデザインを「エラー」と誤判定していた。テキストレイアウト lint はカード型図解が対象で、チャート系への適用には制約がある、という位置づけを確認した。",[14,68,70],{"id":69},"スキルに3ルールを反映し15記事を-sonnet-5-で一括レビュー","スキルに3ルールを反映し、15記事を Sonnet 5 で一括レビュー",[19,72,73],{},"対話で固まったルールを svg-diagram スキルに反映させた。",[75,76,77,84,89],"ol",{},[78,79,80,83],"li",{},[26,81,82],{},"Webで見る図は4:3比率にこだわらず縦に流す","（上から①→②→③...）",[78,85,86],{},[26,87,88],{},"フローに属さない注記・ガードノードは矢印で繋がず、密着帯として配置する",[78,90,91],{},[26,92,93],{},"幅に余裕があれば2行テキストを1行化する（ただし対句・列挙は分割維持）",[19,95,96],{},"反映の途中、スキルファイルに「früher」というドイツ語のタイプミスが混入して直させる一幕もあった。",[19,98,99],{},"そのうえで、genai-ideas シリーズの全15記事に新ルールを適用するレビューを Sonnet 5 のサブエージェントで並列に走らせた。進捗報告を眺めていると、想定していなかった検出がいくつか出てきた。",[101,102,103,109,115,121],"ul",{},[78,104,105,108],{},[26,106,107],{},"bookshelf-rag の figure-02",": シリーズ初の「コの字」レイアウトを検出、縦1列フローに組み替え（マゼンタの強調カードは維持）",[78,110,111,114],{},[26,112,113],{},"monthly-data の figure-02",": ルール2の実適用例。注記カードへの矢印を削除して密着帯化",[78,116,117,120],{},[26,118,119],{},"blackbox-csv",": 結合すると幅ちょうど（余裕0〜1px）の2件を、安全側で分割維持と判断",[78,122,123,126],{},[26,124,125],{},"skills-vs-custom-gpt / svg-skill",": 1行化できるものは修正しつつ、独立した2文や幅制約のあるものは分割維持",[19,128,129],{},"「1行化」と「分割維持」の判断が機械的な置換ではなく、各エージェントがルール3の但し書きを個別に適用していたのが良かった。",[14,131,133],{"id":132},"途中でapiエラー仕上げは手動スポットチェック","途中でAPIエラー、仕上げは手動スポットチェック",[19,135,136],{},"一括レビューを指示した直後、API が 529 Overloaded を返してセッションが止まった。少し置いてから「直ってますか？続きやってもらいたいんですけど」と聞いたら、そのまま再開できた。起動に失敗していた3記事分のエージェントもリトライで復帰した。",[19,138,139],{},"全15エージェント完了後、仕上げの検証をやらせた。",[101,141,142,145],{},[78,143,144],{},"全16ディレクトリの最終 lint とマニフェスト再生成",[78,146,147],{},"自動組み替えが入った図（bookshelf-rag、monthly-data、tax-doc-pipeline）の目視スポットチェック",[19,149,150],{},"tax-doc-pipeline の figure-02 は密着帯が中央カードと一体化して見えたので、帯を8px下げて境界を作らせた。自動修正を全面的に信用せず、レイアウトが大きく動いたファイルだけ目で確認する運用が、ちょうどいい手間だった。",[14,152,154],{"id":153},"午後-記事冒頭にサマリー図を1枚追加","午後: 記事冒頭にサマリー図を1枚追加",[19,156,157,158,161],{},"午後は ai-earn-money-delegation の記事に手を入れた。本文を読み切らないと要点が掴めない構成だったので、冒頭に",[26,159,160],{},"まとめの図を1枚","作らせた。",[19,163,164],{},"注文はこう出した。「記事の要点を一文サマリーしたメッセージラインと、この記事が問うべき問い・解くべき問いを特定して、それに対する答えを図にしてほしい」。",[19,166,167],{},"figure-03.svg として、機械検証（XMLエスケープチェック＋テキストレイアウト lint）→3枚の読み込み確認→スクリーンショット目視、まで通して完了。はみ出しも重なりもなく、午前に固めた縦流しルールがそのまま新規作成にも効いていた。",[14,169,170],{"id":170},"学び",[101,172,173,179,186,189,192],{},[78,174,175,176],{},"スライド用のデザインルールをWeb表示に流用すると、4:3比率の維持がS字レイアウトという歪みを生む。",[26,177,178],{},"媒体が変わったら比率の前提から疑う",[78,180,181,182,185],{},"「2列目を使ってもいい」と自分で言った案でも、出てきた図を見ると論点が変わる。図の設計は",[26,183,184],{},"一度作らせてから対話で削る","方が速い",[78,187,188],{},"フローに属さない注記に矢印を付けると「処理の一部」に見えてしまう。矢印は接続の意味論を持つので、但し書きは密着配置で表現する",[78,190,191],{},"対話で固めたルールをスキルに反映→サブエージェント並列で既存資産に遡及適用、という流れが1セッションで回った。ルール改善の効果が15記事ぶん即座に回収できる",[78,193,194],{},"一括自動修正のあとは、レイアウトが大きく動いたファイルだけ目視する。全件確認は要らないが、ゼロ確認は危ない",{"title":60,"searchDepth":196,"depth":196,"links":197},2,[198,199,200,201,202,203],{"id":16,"depth":196,"text":17},{"id":38,"depth":196,"text":39},{"id":69,"depth":196,"text":70},{"id":132,"depth":196,"text":133},{"id":153,"depth":196,"text":154},{"id":170,"depth":196,"text":170},"dev",null,"Webで見るSVG図解がスライドの4:3比率に引きずられてS字型レイアウトになる違和感を対話で詰め、svg-diagramスキルに縦流しルールを追加。Sonnet 5のサブエージェント15並列でシリーズ全記事の図解をレビュー・修正した記録。","md",{},true,"/svg-diagram-vertical-flow-rule","claude-code-tools",false,"2026-07-04T00:00:00.000Z",{"title":5,"description":206},"2026-07/2026-07-04/svg-diagram-vertical-flow-rule",[217,218,219,220,221],"SVG","図解","Claude Code","スキル改善","サブエージェント","GiekOgVzz1LdiGGehJbcjxG8Tj_5a2K2LkcLj62J9kg",[],"https://log.eurekapu.com/og/blog/svg-diagram-vertical-flow-rule.png?v=2026-07-04T00%3A00%3A00.000Z&title=SVG%E5%9B%B3%E8%A7%A3%E3%82%924%3A3%E6%AF%94%E7%8E%87%E3%81%8B%E3%82%89%E8%A7%A3%E6%94%BE%E3%81%99%E3%82%8B%20%E2%94%80%20%E3%82%B9%E3%82%AD%E3%83%AB%E3%81%AB%E7%B8%A6%E6%B5%81%E3%81%97%E3%83%AB%E3%83%BC%E3%83%AB%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%A6%E8%A8%98%E4%BA%8B%E5%9B%B3%E8%A7%A3%E3%82%92%E4%B8%80%E6%8B%AC%E5%88%B7%E6%96%B0%E3%81%97%E3%81%9F&author=Kei%20Komatsu&sig=6daea3dd648c600c",1783483675881]