This skill should be used when the user asks to create an interactive diagram, flowchart, flow visualization, dependency tree, architecture map, state machine, or pipeline view. Common trigger phrases include "visualize", "diagram", "flowchart", "graph", "map out", "show the flow", "draw the dependencies", "create a diagram", or any request where a visual representation of nodes and connections would communicate better than text.
How this skill is triggered — by the user, by Claude, or both
Slash command
/genesys-cloud-architect:flow-diagramThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create interactive flow diagrams as standalone HTML files using React Flow (@xyflow/react). The diagrams are self-contained (no build step, no npm install), use a dark theme, and open directly in a browser.
Create interactive flow diagrams as standalone HTML files using React Flow (@xyflow/react). The diagrams are self-contained (no build step, no npm install), use a dark theme, and open directly in a browser.
Generate a React Flow diagram when:
Prefer plain text (ASCII, markdown table) when the graph has fewer than 3 nodes or no edges. For large diagrams (30+ nodes), consider grouping related nodes into composite cards or splitting into multiple diagrams — browser rendering remains smooth up to ~100 nodes, but readability degrades well before that.
Copy assets/template.html to the target location. The template contains the tested import map, dark-theme CSS, and React Flow scaffolding. Do not modify the import map URLs or ?external parameters — they are calibrated to avoid duplicate-React issues.
Create node components using createElement (aliased as h). Every node needs Handle components for connections. Consult references/patterns.md for ready-made node designs:
Register node types in a nodeTypes object outside the App component.
Build the initialNodes and initialEdges arrays from the data being visualized.
Each node needs: id, type (matching a key in nodeTypes), position: { x, y }, and data (props passed to the node component).
Each edge needs: id, source (node id), target (node id). Optional: animated, label, type ('smoothstep' for flowcharts, default bezier for trees).
For manual layout strategies (trees, grids, multi-level), see references/patterns.md under "Layout Strategies". Use fitView on the ReactFlow component to auto-zoom.
Use the .diagram-title and .legend overlay classes from the template. Add type badge CSS using the accent color pattern from references/patterns.md.
The template has %%PLACEHOLDER%% comments marking where to insert content:
%%TITLE%% — page title%%CUSTOM_STYLES%% — type badge classes and additional CSS%%NODE_TYPES%% — custom node components and nodeTypes object%%DATA%% — the initialNodes and initialEdges arrays%%LAYOUT%% — (already part of data if positions are inline)%%TITLE_OVERLAY%% — title createElement call%%LEGEND%% — legend createElement callThe resulting HTML file opens directly in any modern browser. No server needed.
createElement (aliased h). No Babel, no build step.nodeTypes must be defined outside components — React Flow remounts nodes if the object identity changes per render.#0f172a background. Changing to light theme requires restyling all components.references/patterns.md — Import map details, createElement syntax, layout strategies (tree/grid/multi-level), edge types, color palette, and ready-made node component patternsassets/template.html — Base HTML template with the working import map, dark-theme CSS, and React Flow scaffolding. Copy this as the starting point for every diagram.examples/dependency-tree.html — Complete working diagram showing a Genesys Cloud Architect flow dependency tree with 3 nodes, custom card nodes with sub-item lists, animated edges, title overlay, and legend. Use as a reference for the expected end result.Provides a checklist for code reviews covering functionality, security, performance, maintainability, tests, and quality. Use for pull requests, audits, team standards, and developer training.
npx claudepluginhub makingchatbots/genesys-cloud-architect --plugin genesys-cloud-architect