layered-flow-chart

Create, update, and refine interactive hierarchical sequence diagrams as single-file HTML with drill-down navigation. Outputs a UML-style sequence diagram with stacking modal layers - clicking an interaction block opens a deeper detail view. Use this skill when users ask to: - Visualize inter-component communication as a sequence / interaction diagram - Create a layered sequence diagram with drill-down - Diagram API call chains, request/response flows, or event sequences - "Make a sequence diagram of X" or "Show me how X communicates with Y" - Update an existing sequence diagram to reflect code changes - Improve or refine an existing sequence diagram Triggers: "sequence diagram", "interaction diagram", "message flow", "call sequence", "request flow", "communication diagram", "シーケンス図", "インタラクション図", "メッセージフロー", "呼び出しシーケンス", "update sequence", "refine sequence", "シーケンス更新", "シーケンス改善"

Create, update, and refine interactive hierarchical flow diagrams as single-file HTML with drill-down navigation. Outputs a FigJam/Miro-like visual with stacking modal layers - clicking a node opens a deeper detail view. Use this skill when users ask to: - Visualize a processing flow, architecture, or pipeline as an interactive diagram - Create a layered/hierarchical flow chart with drill-down - Diagram a codebase flow with expandable detail levels - "Make a flow diagram of X" or "Visualize the X process" - Update an existing flow chart to reflect code changes - Improve or refine an existing flow chart (layout, detail, boundary connections) Triggers: "flow diagram", "flow chart", "process visualization", "layered chart", "interactive diagram", "drill-down diagram", "処理フロー図", "フローチャート", "フロー図解", "update flow", "refine flow", "フロー更新", "フロー改善"