# Sekkeizu

> コードを書く前に業務フローとER図の設計図を作り、画面、概念図、ER図を切り替えて見る1枚の HTML に書き出す手順と雛形。ユーザーが「設計図を作って」「作る前に図にして」「ER図にして」「業務フローを描いて」「データの持ち方を先に決めたい」と言ったとき、設計図を直すとき、実装計画を書く前に誰が何をして何を残すかを固めたいときに使う。

- Skill: `shikigami-ai-works/sekkeizu` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add shikigami-ai-works/sekkeizu`
- Raw SKILL.md: https://api.skillmd.com/api/skills/shikigami-ai-works/sekkeizu/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: shikigami-ai-works (https://skillmd.com/u/shikigami-ai-works)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/shikigami-ai-works/sekkeizu

---


# 設計図を先に作る（業務フローと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. 業務フローを先に描く。段は担当（仕組み、担当者、利用者など）、列は時間の順。四角1つは、その段の担当が実際に見る物（ファイル、画面）。四角の中には、そこに出る例の行を2〜3行入れる。
   完了: すべての矢印に元と先があり、人の手が要る所が人の段に並んでいる。
3. ER図を描く。新しく作る表は2〜3個から始め、既存の物と外から来る物は別の印にする。増え続ける数字は上書きせず、測るたびに1行足す表にする（上書きすると伸び方が消える）。後から変えられる値（価格など）も、その測る表に置く。
   完了: FK の列すべてに線があり、確かめていない列には「未確認」と書いてある。
4. 正本の md を案件の `docs/設計図_<件名>.md` に書く。ユーザーの決定、設計判断 `D-01`、未確認 `U-01`、Mermaid の2枚（業務フローと erDiagram）、「この図の読み方」の節を置く。読み方の節は、作り物の例の行を2〜3行の表で見せ、作り物だと書く。
   完了: 図と表の中身が、聞き取りの答えと食い違っていない。
5. 入力の JSON を `docs/設計図_<件名>.json` に書く（形は `sample.json`）。`python build_sekkeizu.py 入力.json --selftest` を回してから、`python build_sekkeizu.py 入力.json` で書き出す。出力先は入力の `out`（`--out` で上書きできる）。
   完了: 自己試験が exit 0、書き出しが exit 0 で警告 0 件。
6. `python shots.py 入力.json 出力.html <撮影先フォルダ>` で撮る。3つの図の四角と線の札の数を入力と突き合わせ、4枚を撮る。
   完了: 3つとも「合った」で exit 0。4枚を開いて見てから、ユーザーにも見せる。
7. Figma の MCP 接続があり、ユーザーが望むときだけ、FigJam に業務フロー（flowchart LR）と ER図（erDiagram）の2枚を出す（`generate_diagram`）。出したら `get_figjam` で読み返し、URL を正本の md に書く。
   完了: 2枚とも、四角と線が入力と同じ数だけ読み返せた。
8. ユーザーに見せて直す。直すのは 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枚で確かめる。