architecture-diagram

Generate a standalone .html architecture diagram from $ARGUMENTS.

If the user wants Mermaid, Excalidraw, or SVG/PNG-only output, route away from this skill. If nodes, flows, or trust boundaries are too vague, ask one short clarifying question. If the request is still underspecified after that, list the missing architecture facts instead of inventing them.

Workflow

1. Read $SKILL_DIR/assets/template.html and $SKILL_DIR/references/style.md.
2. Inspect the closest file in $SKILL_DIR/examples/ only when it materially matches the requested architecture.
3. Extract layers, nodes, edges, labels, trust boundaries, and legend needs.
4. Choose a layout before editing:
   • left-to-right for request pipelines
   • top-to-bottom for stacked platforms or zone boundaries
5. Resolve the output path:
   • use the user-provided filename when present
   • otherwise save descriptive-name-architecture.html in the working directory
6. Customize the template instead of rebuilding the page shell from scratch.
7. Keep arrows behind components, keep legends outside every boundary, and expand the SVG viewBox whenever the diagram grows.
8. Write the final .html file to disk.