Render complex relationships and workflows as interactive Cytoscape.js browser diagrams.
npx skills add https://github.com/npow/claude-skills --skill diagram-npow
Please help me install this Agent Skill. Skill: diagram Source: https://github.com/npow/claude-skills/tree/main/diagram Command: npx skills add https://github.com/npow/claude-skills --skill diagram-npow
This Skill turns complex relationships, workflows, and structures into readable, interactive browser-based diagrams that users can drag, zoom, and explore.
Ask the diagram skill to render the relationships, labels, and dependencies from your project as an interactive browser diagram.
High-intent search queries and answers about installing and using this skill.
To create interactive architecture diagrams in your browser, this Skill uses Cytoscape.js to render node-and-edge structures with draggable nodes, zooming, panning, and visual grouping. It requires explicit node dimensions and browser rendering through Chrome DevTools.
Yes, you can visualize dependency graphs and flowcharts dynamically. This Skill renders complex relationships as interactive browser-based diagrams, allowing users to drag, zoom, and explore structured layouts like hub-and-spoke diagrams instead of using static images.
Yes, this diagram tool requires Cytoscape.js for rendering workflows. It relies on the framework to apply string-based edge styling, configure CDN settings, and render interactive node-and-edge structures directly within Chrome DevTools.
The best way to map software architecture and data flows visually is by defining explicit node positions and string-based edge styling flags. This Skill validates layout fit, node readability, and browser rendering before delivering the interactive diagram.
When rendering network visualizations through Chrome DevTools, limitations include the strict requirement for explicit node dimensions and positions. The Skill must perform visual verification of layout fit and edge styling before delivery to ensure readability.
Yes, you need to specify node positions for dependency graphs. The Skill requires explicit node dimensions and positions to generate structured layouts like two-column comparisons, roadmaps, and hub-and-spoke diagrams with consistent positioning and color legends.
amazingsypBuilds interactive ontology graphs in the browser with Cytoscape.js from node and edge slice data.
ldzhhxxDebug Node.js applications via the Chrome DevTools Protocol.
pecorapromotionsllc-cellTest UI components in real browsers using Chrome DevTools MCP.
planetofthewebGenerate interactive mind maps from OPML outlines and XML color palettes.
