shikigami-ai-works 設計図を先に作る（業務フローとER図）
コードの前に、誰が何をする流れか（業務フロー）と、何をどんな形で残すか（ER図）を決めて、ユーザーが見て直せる形にする。
雛形はこの Skill のフォルダの template/ にある。
template.html: 見た目の正本build_sekkeizu.py: 入力の JSON から HTML を書き出す。検査に通らなければ書かずに止まる（Python 3.9 以上、標準ライブラリだけ）shots.py: 書き出した HTML を裏の Chrome で開き、3つの図の四角と線の数を入力と突き合わせて、4枚撮る（Chrome か Chromium 系のブラウザが要る）sample.json: 入力の手本（架空の図書館の貸出と予約）
他の手段との分担
- 出来た計画を読み解いて理解を確かめる: Skill explain-visually
- 一本道の流れが節目を共有する形: Skill rosenzu
- ユーザーが図を手で動かしたい: Figma の MCP 接続があれば FigJam へも出す（手順7）
手順
- 聞き取る。誰が何をするか、何を残すか、数字を誰が入れるか、置き場を選択肢つきで聞く。管理画面の奥にある数字（ログインやパスワードが要る物）は、図に入れる前に取り方を公式の資料で確かめ、機械で取れない物は人の担当に割り振る。 完了: 担当ごとの動きと、残す物の一覧が決まっている。
- 業務フローを先に描く。段は担当（仕組み、担当者、利用者など）、列は時間の順。四角1つは、その段の担当が実際に見る物（ファイル、画面）。四角の中には、そこに出る例の行を2〜3行入れる。 完了: すべての矢印に元と先があり、人の手が要る所が人の段に並んでいる。
- ER図を描く。新しく作る表は2〜3個から始め、既存の物と外から来る物は別の印にする。増え続ける数字は上書きせず、測るたびに1行足す表にする（上書きすると伸び方が消える）。後から変えられる値（価格など）も、その測る表に置く。 完了: FK の列すべてに線があり、確かめていない列には「未確認」と書いてある。
- 正本の md を案件の
docs/設計図_<件名>.mdに書く。ユーザーの決定、設計判断D-01、未確認U-01、Mermaid の2枚（業務フローと erDiagram）、「この図の読み方」の節を置く。読み方の節は、作り物の例の行を2〜3行の表で見せ、作り物だと書く。 完了: 図と表の中身が、聞き取りの答えと食い違っていない。 - 入力の JSON を
docs/設計図_<件名>.jsonに書く（形はsample.json）。python build_sekkeizu.py 入力.json --selftestを回してから、python build_sekkeizu.py 入力.jsonで書き出す。出力先は入力のout（--outで上書きできる）。 完了: 自己試験が exit 0、書き出しが exit 0 で警告 0 件。 python shots.py 入力.json 出力.html <撮影先フォルダ>で撮る。3つの図の四角と線の札の数を入力と突き合わせ、4枚を撮る。 完了: 3つとも「合った」で exit 0。4枚を開いて見てから、ユーザーにも見せる。- Figma の MCP 接続があり、ユーザーが望むときだけ、FigJam に業務フロー（flowchart LR）と ER図（erDiagram）の2枚を出す（
generate_diagram）。出したらget_figjamで読み返し、URL を正本の md に書く。 完了: 2枚とも、四角と線が入力と同じ数だけ読み返せた。 - ユーザーに見せて直す。直すのは md と JSON で、書き出し直す。HTML を手で直さない。ユーザーが FigJam で直したら、読み戻して正本へ写す。 完了: 正本、JSON、HTML（FigJam へ出したならそれも）の中身がそろっている。
図の読み方の言い方
ER図を読み慣れていない人には、四角は表計算ソフトのシート1枚、四角の中の段は列の見出し、線は「どのシートのどの行を指すか」と言い換える。 線の端の記号は説明せず、例の行を見せる。
入力の形
sample.json が手本。項目は次のとおり。
title、doc（正本の md の場所。画面の隅に出る）、out（出力先）objects: 出てくる物。kindはnew（新規）、old（既存）、ext（外から）。descの中の`…`はコードの字になるlanes: 業務フローの段（担当）。上から並ぶscreens: 業務フローの四角。laneとcol（0 から）で置き場所が決まる。objsはその画面に出てくる物。rowsは[左, 本文, 印]で、印は{"chip": "公開", "tone": "g"}（色は g、r、b、空）か{"value": "310"}screen_edges、concept_edges、er_edges:[元, 先, 札]。4つ目に"dash"で破線（未確認のつながり）concepts、tables: 概念図と ER図の四角。idはobjectsの鍵。xとyを省くと並べて置く。fieldsは[日本語名, 英名, 型, 鍵, 注]、鍵はPK、FK、空
罠
- エディタやブラウザの組み込みの画面で HTML を開くと、書き出し直しても古い版が映ることがある。確かめは
shots.pyの撮影でする。 - 業務フローを縦に積むと縦長になり、全体を収めると字が読めない。段を担当にして横長に並べる（雛形がそう置く）。
- 線の札は隣の四角との間に置かれる。列の間を詰めると札が四角に重なる（雛形の列の間は 350）。
- 線が別の四角の上を横切ると、札がその四角に重なる。四角を空いている列へずらす。
- 右上の凡例が図に重なる。雛形の全体表示は凡例の幅だけ右を空けている。凡例をいじったら4枚で確かめる。