Skip to main content
Renders interactive, draggable diagrams in the browser using Cytoscape.js from nodes and edges found in the conversation context. The output is always a live HTML file — never a static image. Nodes are draggable, and the canvas supports scroll-to-zoom and pan. Use this skill when you want to visualize, diagram, draw, or render a graph, flowchart, dependency tree, architecture diagram, or any node-and-edge structure.

​
Invocation

/diagram [describe the diagram you want]
Examples: 
/diagram architecture diagram for a microservices backend
/diagram flowchart for the user onboarding process
/diagram dependency graph for this Python package
/diagram entity relationship diagram for the orders schema

​
Workflow

1

Extract nodes and edges

Read labels, connections, and any grouping or 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. Layout patterns are defined in TEMPLATE.md.
3

Write the HTML file

Write a complete self-contained file to /tmp/diagram.html using the Cytoscape.js template.
4

Open in browser

Call mcp__chrome-devtools__new_page with url: file:///tmp/diagram.html.
5

Wait for render

Call mcp__chrome-devtools__wait_for on a string that appears in the legend or a node label. Timeout 10000ms.
6

Take screenshot

Call mcp__chrome-devtools__take_screenshot and verify nodes are visible and not overlapping.
7

Fix and reload if broken

If the screenshot shows problems, edit /tmp/diagram.html, then call mcp__chrome-devtools__navigate_page with type: reload.

​
Use cases

Architecture diagrams

Map services, databases, queues, and external dependencies in a system design or infrastructure overview.

Flowcharts

Visualize decision trees, approval flows, onboarding sequences, and any branching process.

Dependency graphs

Show package dependencies, module imports, or data pipeline stages with directed edges.
The rendered diagram is interactive: drag nodes to rearrange, scroll to zoom, and drag the background to pan. The Cytoscape.js CDN (cytoscape.min.js v3.29.2) loads entirely in the browser.

​
Self-review checklist

Before delivering, the skill verifies all of the following:
  • Screenshot shows all nodes with readable text — no overflow, no overlap
  • Solid edges are solid, dashed edges are dashed (stored as dashed: 'yes', not dashed: true)
  • cy.fit(cy.elements(), 60) is the last line of the script
  • CDN URL is exactly https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.29.2/cytoscape.min.js
  • Legend matches the color scheme used in the diagram
  • Hint text drag nodes · scroll to zoom · drag background to pan is present
  • No node has width or height set to label — always explicit pixel values
  • wait_for is called before take_screenshot

​
Golden rules

Cytoscape selectors do not reliably match boolean data values. Always store edge style flags as strings: dashed: 'yes' or dashed: 'no'. Use selector edge[dashed = "yes"].
Always write /tmp/diagram.html and open it in the browser. Static images cannot be dragged or zoomed by the user.
cy.fit(cy.elements(), 60) must be the final line in the script block. Without it, the diagram may render off-screen or at wrong zoom.
Use mcp__chrome-devtools__new_page with url: file:///tmp/diagram.html. Only use navigate_page with type: reload for subsequent reloads.
Call wait_for on a text string that appears after Cytoscape renders (legend text or a node label). Never call take_screenshot immediately after new_page.
Always use explicit pixel widths and heights (e.g. width: 200px, height: 80px). The label value causes unpredictable sizing.
Without these, long labels overflow node boundaries invisibly.

​
Reference files

FileContents
TEMPLATE.mdComplete Cytoscape.js HTML template, color palette, layout patterns for common diagram types
TROUBLESHOOTING.mdFailure diagnosis table: symptoms, causes, fixes