HTML SVG Diagrams & Flowcharts

ASCII diagrams in markdown are a workaround for not having SVG. With SVG inside HTML, you get real shapes, real arrows, real typography, and real positioning — for the same conceptual cost.

Use this skill any time the explanation has arrows, boxes, layers, time, or position. Most technical concepts do.

When to use this skill

• "Diagram / illustrate / visualize / draw X"
• "Show me how the [request, data, message] flows"
• "Sketch the [architecture, state machine, sequence]"
• "Map the [dependencies, components, boundaries]"
• Any explanation where the prose would lean heavily on words like "first… then… meanwhile… eventually" — those are sequence diagrams begging to be drawn

When NOT to use this skill

This is the general fallback. When the prompt names a specific subject, hand off to the specialised skill that knows the conventions: