What problem does it solve? Turning complex system architecture, business processes, logic rules, and state transitions into reviewable visual diagrams usually requires external diagramming tools or online services. This Skill produces standalone HTML files with inline SVG graphics that open in any browser offline, with no JavaScript, external rendering services, or API keys required. ## Core Features & Use Cases - Four diagram types: architecture diagrams (systems, services, deployments, cloud resources), flowcharts (roles, branches, exceptions, swimlanes), logic diagrams (rules, conditions, causality), and state diagrams (transitions, rollbacks, timeouts). - Template-based generation: every diagram is built on the bundled templates/template.html, which provides a dark grid background, SVG arrow markers, semantic color palette, legend, and summary cards, ensuring a consistent visual system. - Structured workflow: builds an explicit graph model first (subjects, relations, boundaries, terminal states), asks up to 3 clarifying questions when structure-affecting information is missing, and runs a post-generation self-check to remove leftover template placeholder text. - Use Case: Ask to visualize an order approval flow, and receive doc/visualize/order-approval-flow.html with swimlanes, decision branches, exception paths, and summary cards, plus an optional PNG screenshot rendered via Playwright. ## Quick Start Ask the AI to draw an architecture diagram or flowchart of your system or business process, for example: visualize the order approval workflow including roles, decision branches, and exception handling.
