Diagram

Renders interactive, draggable diagrams in the browser using Cytoscape.js from context-supplied nodes and edges.

Workflow

1. Extract nodes and edges — read labels, connections, and any grouping/color hints from the user's request or conversation context.
2. Assign colors and positions — choose a color scheme and set x/y coordinates for a readable layout. See TEMPLATE.md for layout patterns.
3. Write the HTML file — write a complete self-contained file to /tmp/diagram.html using the Cytoscape.js template. See TEMPLATE.md for the full template.
4. Render in browser — follow _shared/chrome-devtools-render.md to open /tmp/diagram.html, wait for render, screenshot, and fix-and-reload if needed. wait_for a string from the legend or a node label. See TROUBLESHOOTING.md for diagram-specific fixes.

Self-review checklist

Before delivering, verify ALL: