Screen Flow Diagram from your frontend routes (draw.io)画面遷移図の作成(ルーティングと画面一覧から draw.io)

Screen Flow Diagram turns the routes and links in your frontend code, or a screen list in your documents, into a screen flow diagram (画面遷移図) that a client can open and edit in draw.io, and writes down where every screen and arrow came from.

What you get:

• docs/design/screen-flow.drawio: one box per screen with its name and route, arrows labelled with what the user does, boxes grouped by area. Screens that need a login carry a lock, modals have a dashed border, redirects and login guards have their own arrow styles.
• docs/design/screen-flow.md: a screen table and a transition table with the file and line each came from, the screens that exist only in the spec or only in the code, the navigation it could not resolve, and questions for the system owner.
• A PNG, only if you say yes.

How it works: a small Node script reads the file-based routes (Next.js app and pages router, Nuxt), static route arrays (React Router, Vue Router) and the navigation in your code (Link, router.push, redirect, middleware guards). The agent compares the result with your screen list, builds the model, and a deterministic layout step writes the draw.io file and checks it, so you do not get boxes on top of each other or arrows that point nowhere.

Limits: it reads files only. It does not run the app or a browser, so links built at runtime and navigation that depends on data are listed as unresolved instead of being guessed. Other frameworks, or no code at all, work from the screen list or from what you tell the agent. The output is draw.io only.

In our test sample, a Next.js reservation app with 14 transitions and a screen list that includes one screen not built yet, all three runs scored full marks on our checks, both from the code and from the documents alone. Login-required screens were marked and the unbuilt screen was drawn dashed, and when working from code, navigation to a variable (router.push(returnTo)) was listed as unresolved. A single run without the skill drew overlapping shapes, did not mark the login-required screens and wrote no explanation document.

Part of a design document set: draw the data model with the ER Diagram skill, requirement-level flows with the UML Diagrams skill, and turn the screens into manual test cases with the Test Scenarios skill.

Screen Flow Diagram は、フロントエンドのルーティングやリンク、または画面一覧の文書から、お客様が draw.io で開いて編集できる画面遷移図を作り、画面と矢印それぞれの根拠を文章で残すスキルです。

できること:

• docs/design/screen-flow.drawio を出力します。画面ごとに名前とパスを書いた箱、操作を書いた矢印、エリアごとのグループ分けです。ログインが必要な画面には鍵マーク、モーダルは破線、リダイレクトとログインガードは専用の矢印で区別します。
• docs/design/screen-flow.md を出力します。画面一覧表と遷移一覧表(根拠のファイルと行を併記)、仕様書にしかない画面、コードにしかない画面、解決できなかった遷移、システム担当者への確認事項です。
• PNG は、希望があるときだけ出力します。

仕組み: Node の小さなスクリプトが、ファイルベースのルーティング(Next.js の app / pages、Nuxt)、静的なルート定義(React Router、Vue Router)、コード中の画面遷移(Link、router.push、redirect、ミドルウェアのガード)を読みます。エージェントが画面一覧と突き合わせてモデルを作り、決まった手順のレイアウトで draw.io ファイルを書き出して検査します。箱が重なったり、行き先のない矢印が残ったりしません。

制約: 読むのはファイルだけです。アプリやブラウザは動かさないため、実行時に組み立てられるリンクやデータに依存する遷移は、推測で描かずに「解決できなかった遷移」として載せます。ほかのフレームワークやコードがない場合は、画面一覧や担当者からの説明をもとに作ります。出力は draw.io のみです。

検証用のサンプル(遷移 14 本の Next.js 予約アプリと、未実装の画面を 1 つ含む画面一覧)では、コードから作る場合も文書だけから作る場合も、スキルありの 3 回とも用意したチェックを満点で通過しました。ログインが必要な画面に印が付き、未実装の画面は破線で描かれ、コードから作った場合は変数への遷移(router.push(returnTo))が「解決できなかった遷移」に載りました。スキルなしの 1 回では、図形が重なり、ログインが必要な画面に印がなく、説明書も作られませんでした。

基本設計書の一式として、データモデルは ER Diagram スキル、要件レベルの流れは UML Diagrams スキル、画面をもとにした手動テストは Test Scenarios スキルもご利用ください。