Create an interactive diagram for: {{title}}

## Diagram Type
{{diagramType}}

## Description
{{description}}

## Key Points
{{keyPoints}}

{{#if hasNodeCount}}
## Node Count Constraint

- Maximum node count: {{nodeCount}}
- When no prescribed node list is provided, the `widget-config.nodes` array MUST NOT contain more nodes than this limit.
- When prescribed nodes are provided, that list is authoritative.
{{/if}}

{{#if hasPrescribedNodes}}
## Prescribed Nodes

{{prescribedNodes}}

- Use every prescribed node exactly once.
- Preserve each node's `id`, `label`, `icon`, and `details` when present.
- Do not add, remove, or replace prescribed nodes.
- Derive hierarchy edges from `parentId` when it is present.
{{/if}}

## Language
{{languageDirective}}

---

Generate a complete HTML diagram with:

1. **SVG nodes** with icons, labels, and click-to-show details
2. **Edges with arrows** connecting nodes (calculate endpoints from node dimensions)
3. **Step-by-step reveal** (下一步/上一步)
4. **High contrast**: White nodes on dark background, light edge labels
5. **Mobile-friendly**: Collapsible sidebar, doesn't block diagram
6. **First node visible** on load

Embed config in `<script type="application/json" id="widget-config">`.