From e3d74c4647e2c8ac98307c865f81674c01dd0151 Mon Sep 17 00:00:00 2001 From: Lucas Woodward <31957045+SketchingDev@users.noreply.github.com> Date: Wed, 15 Jul 2026 00:11:27 +0100 Subject: [PATCH 1/3] Update name --- .claude-plugin/marketplace.json | 2 +- README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json index d301097..1db7a49 100644 --- a/.claude-plugin/marketplace.json +++ b/.claude-plugin/marketplace.json @@ -1,5 +1,5 @@ { - "name": "makingchatbots-genesys-cloud-architect", + "name": "makingchatbots-genesys-cloud-plugins", "owner": { "name": "Lucas Woodward", "url": "https://makingchatbots.com/" diff --git a/README.md b/README.md index 0a4508b..1c9a8ba 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Create, debug and test Genesys Cloud Architect Flows using Claude Code. ``` # Add the marketplace -/plugin marketplace add MakingChatbots/genesys-cloud-architect +/plugin marketplace add MakingChatbots/genesys-cloud-plugins # Install the plugin /plugin install genesys-cloud-architect@makingchatbots From 211a42fe1a3b2568a22934ee34d23b8b71ab469e Mon Sep 17 00:00:00 2001 From: Lucas Woodward <31957045+SketchingDev@users.noreply.github.com> Date: Wed, 15 Jul 2026 00:15:09 +0100 Subject: [PATCH 2/3] Update plugin command --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1c9a8ba..d75dd18 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ Create, debug and test Genesys Cloud Architect Flows using Claude Code. /plugin marketplace add MakingChatbots/genesys-cloud-plugins # Install the plugin -/plugin install genesys-cloud-architect@makingchatbots +/plugin install genesys-cloud-architect@makingchatbots-genesys-cloud-plugins ``` ## Getting Started From 7817ae4801ad1af44c70abbed74043b13c497560 Mon Sep 17 00:00:00 2001 From: Lucas Woodward <31957045+SketchingDev@users.noreply.github.com> Date: Tue, 28 Jul 2026 23:08:43 +0100 Subject: [PATCH 3/3] Update skill --- skills/flow-diagram/SKILL.md | 120 +++---- skills/flow-diagram/assets/template.html | 166 ---------- .../examples/dependency-tree.html | 310 ------------------ skills/flow-diagram/references/patterns.md | 244 -------------- 4 files changed, 63 insertions(+), 777 deletions(-) delete mode 100644 skills/flow-diagram/assets/template.html delete mode 100644 skills/flow-diagram/examples/dependency-tree.html delete mode 100644 skills/flow-diagram/references/patterns.md diff --git a/skills/flow-diagram/SKILL.md b/skills/flow-diagram/SKILL.md index 77e8132..bf191fd 100644 --- a/skills/flow-diagram/SKILL.md +++ b/skills/flow-diagram/SKILL.md @@ -1,83 +1,89 @@ --- name: flow-diagram -description: 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. +description: This skill should be used when the user asks to create a diagram, flowchart, flow visualization, dependency tree, architecture map, state machine, or pipeline view — including when they ask for an interactive, explorable, or pan-and-zoom diagram (this skill produces static diagrams and sets that expectation). Common trigger phrases include "visualize", "diagram", "flowchart", "graph", "map out", "show the flow", "draw the dependencies", "create a diagram". --- # Flow Diagram 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 flow diagrams as Mermaid — text-based with automatic layout. Mermaid is diffable, cheap to generate, and renders natively in GitHub markdown (READMEs, PR and issue descriptions), Claude artifacts, and most docs tooling. -## When to Use +For graphs with fewer than 3 nodes or no edges, prefer plain text (ASCII or a markdown table) — not worth a diagram. -Generate a React Flow diagram when: -- Displaying hierarchical relationships (dependency trees, org charts, call chains) -- Showing data/control flow between components (pipelines, workflows, request paths) -- Visualizing state machines or decision trees -- Mapping architecture (service dependencies, module relationships) -- Any scenario where a graph of connected nodes communicates better than a table or list +## Workflow -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. +### 1. Pick the diagram type -## How to Create a Diagram +| Data | Mermaid type | +|---|---| +| Flows, pipelines, decision branches | `flowchart TD` (or `LR` for wide/shallow graphs) | +| State machines | `stateDiagram-v2` | +| Dependencies, architecture maps | `flowchart LR` with `subgraph` groupings | +| Sequences of calls between systems | `sequenceDiagram` | -### 1. Start from the template +### 2. Write the diagram -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. +```mermaid +flowchart TD + Welcome["Welcome message"] --> Hours{"Business hours?"} + Hours -->|open| Queue["Route to Sales queue"] + Hours -->|closed| AfterHours["After-hours message"] + AfterHours --> Offer{"Leave a voicemail?"} + Offer -->|yes| Record["Record voicemail"] + Offer -->|no| Finish["End call"] + Queue --> Finish + Record --> Finish +``` -### 2. Define custom node types +Syntax gotchas: +- Quote any label containing parentheses, colons, or other punctuation: `A["Play message (after hours)"]` +- `end` (lowercase) is a reserved word in flowcharts — use a different node id like `Finish` +- Edge labels use pipes: `A -->|open| B` +- Colour node categories with `classDef` + `class`, e.g. `classDef queue fill:#1d4ed8,color:#fff` then `class Queue queue` -Create node components using `createElement` (aliased as `h`). Every node needs `Handle` components for connections. Consult `references/patterns.md` for ready-made node designs: -- **Card with sub-items** — for nodes with child lists (e.g., a flow listing its data actions) -- **Simple labeled node** — for minimal states or pipeline steps -- **Status node** — for nodes with a health/status indicator +### 3. Deliver it where it will actually render -Register node types in a `nodeTypes` object **outside the App component**. +Mermaid source is only a picture where something renders it. A fenced block printed into a Claude Code terminal shows as **raw source text, not a diagram** — so pick the delivery form from the destination: -### 3. Define data, nodes, and edges +| Destination | Deliver as | +|---|---| +| GitHub PR or issue description, README, a committed `.md` file | Fenced ` ```mermaid ` block — inline in the response for the user to paste, or written to the file | +| The user wants to look at the diagram now, in a Claude Code session ("show me", "let me see it") | A standalone HTML file they can open (section 5), or a published Artifact — never bare source in the terminal | +| Web or desktop chat, or docs tooling that renders Mermaid | Fenced ` ```mermaid ` block | -Build the `initialNodes` and `initialEdges` arrays from the data being visualized. +When delivering a file or Artifact, still show the Mermaid source inline if it is short — it is the reviewable, diffable form. -Each node needs: `id`, `type` (matching a key in `nodeTypes`), `position: { x, y }`, and `data` (props passed to the node component). +### 4. Nodes with internal detail -Each edge needs: `id`, `source` (node id), `target` (node id). Optional: `animated`, `label`, `type` (`'smoothstep'` for flowcharts, default bezier for trees). +When a node needs to show a list of sub-items (e.g., a flow listing the data actions it calls), use multi-line labels with `
` bullets, or group children in a `subgraph`: -### 4. Layout the nodes +```mermaid +flowchart LR + Main["Main IVR flow
• Lookup-Customer
• Check-Balance"] --> Bot["Billing bot
• Get-Invoice"] +``` -For manual layout strategies (trees, grids, multi-level), see `references/patterns.md` under "Layout Strategies". Use `fitView` on the ReactFlow component to auto-zoom. +### 5. Standalone HTML -### 5. Add title, legend, and type-specific CSS +To give the user something openable in a browser, wrap the diagram. The page background must match the Mermaid theme — a `dark` theme diagram on a default white page is washed out and low contrast: -Use the `.diagram-title` and `.legend` overlay classes from the template. Add type badge CSS using the accent color pattern from `references/patterns.md`. +```html + + + +
+flowchart TD
+    A["..."] --> B["..."]
+
+ + + +``` -### 6. Replace template placeholders +This wrapper needs internet access when opened (Mermaid loads from a CDN); the markdown form has no such dependency. -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 call +## Limits -### 7. Open in browser - -The resulting HTML file opens directly in any modern browser. No server needed. - -## Key Constraints - -- **No JSX** — use `createElement` (aliased `h`). No Babel, no build step. -- **No additional CDN dependencies** — the import map in the template is sufficient. -- **`nodeTypes` must be defined outside components** — React Flow remounts nodes if the object identity changes per render. -- **Dark theme only** — the CSS is designed for the `#0f172a` background. Changing to light theme requires restyling all components. - -## Additional Resources - -### Reference Files -- **`references/patterns.md`** — Import map details, createElement syntax, layout strategies (tree/grid/multi-level), edge types, color palette, and ready-made node component patterns - -### Asset Files -- **`assets/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. - -### Example Files -- **`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. \ No newline at end of file +- Layout is automatic and cannot be hand-tuned. For dense graphs (30+ heavily cross-linked nodes), split into multiple diagrams or use `subgraph` groupings rather than fighting the layout. +- Output is static — no pan, zoom, or drag. If the user asks for an interactive or explorable diagram, say plainly that this skill produces static Mermaid diagrams, then offer a browser-viewable HTML file (section 5) and splitting a large graph into focused views. Do not build a bespoke interactive diagram instead. \ No newline at end of file diff --git a/skills/flow-diagram/assets/template.html b/skills/flow-diagram/assets/template.html deleted file mode 100644 index 6e6bbc7..0000000 --- a/skills/flow-diagram/assets/template.html +++ /dev/null @@ -1,166 +0,0 @@ - - - - - - %%TITLE%% - - - - - - -
- - - - \ No newline at end of file diff --git a/skills/flow-diagram/examples/dependency-tree.html b/skills/flow-diagram/examples/dependency-tree.html deleted file mode 100644 index 2eb44ce..0000000 --- a/skills/flow-diagram/examples/dependency-tree.html +++ /dev/null @@ -1,310 +0,0 @@ - - - - - - Flow Dependency Diagram - - - - - - -
- - - - diff --git a/skills/flow-diagram/references/patterns.md b/skills/flow-diagram/references/patterns.md deleted file mode 100644 index d3ac279..0000000 --- a/skills/flow-diagram/references/patterns.md +++ /dev/null @@ -1,244 +0,0 @@ -# React Flow Diagram Patterns - -## Import Map (Critical) - -The import map in the template uses esm.sh to load React and @xyflow/react without a build step. This exact pattern is tested and working — do not modify the URLs or query parameters. - -Key details: -- `?external=react,react-dom` on `@xyflow/react` prevents bundling a separate React copy, which would break hooks -- `"react/": "https://esm.sh/react@18.3.1/"` handles subpath imports like `react/jsx-runtime` -- The CSS is loaded from jsdelivr (not esm.sh) because esm.sh does not serve CSS files - -## createElement Pattern - -Since there is no build step, all components use `createElement` (aliased as `h`) instead of JSX: - -```js -import { createElement as h } from 'react'; - -// JSX equivalent:
Hello
-h('div', { className: 'card' }, h('span', null, 'Hello')) - -// JSX equivalent: -h(Handle, { type: 'target', position: Position.Top }) - -// Conditional rendering -condition ? h('div', null, 'Yes') : null - -// Mapping arrays (spread into parent's children) -h('div', null, ...items.map((item, i) => h('span', { key: i }, item))) -``` - -## Custom Node Types - -Every custom node must be defined as a component and registered in a `nodeTypes` object **outside the App component** (React Flow requirement — defining inside causes remounts): - -```js -function MyNode({ data }) { - return h('div', { className: 'node-card' }, - h(Handle, { type: 'target', position: Position.Top, style: { background: '#475569', width: 8, height: 8 } }), - h('div', { className: 'node-title' }, data.label), - h(Handle, { type: 'source', position: Position.Bottom, style: { background: '#475569', width: 8, height: 8 } }), - ); -} - -// MUST be outside the component -const nodeTypes = { myNode: MyNode }; -``` - -Nodes reference the type by key: `{ id: '1', type: 'myNode', position: { x: 0, y: 0 }, data: { label: 'Hello' } }`. - -## Layout Strategies - -### Manual Tree Layout - -For small trees (< 20 nodes), calculate positions directly: - -```js -const childCount = children.length; -const spacing = 300; -const totalWidth = (childCount - 1) * spacing; -const startX = -totalWidth / 2; - -const nodes = [ - { id: 'root', position: { x: 0, y: 0 }, ... }, - ...children.map((child, i) => ({ - id: child.id, - position: { x: startX + i * spacing, y: 320 }, - ... - })), -]; -``` - -### Multi-Level Tree Layout - -For deeper trees, assign y based on depth and x based on sibling index: - -```js -const LEVEL_HEIGHT = 300; -const SIBLING_SPACING = 280; - -function layoutTree(node, depth = 0, siblingIndex = 0, siblingCount = 1) { - const totalWidth = (siblingCount - 1) * SIBLING_SPACING; - return { - id: node.id, - position: { - x: -totalWidth / 2 + siblingIndex * SIBLING_SPACING, - y: depth * LEVEL_HEIGHT, - }, - ... - }; -} -``` - -### Grid Layout - -For flat collections (no hierarchy): - -```js -const COLS = 4; -const COL_WIDTH = 300; -const ROW_HEIGHT = 200; - -const nodes = items.map((item, i) => ({ - id: item.id, - position: { - x: (i % COLS) * COL_WIDTH, - y: Math.floor(i / COLS) * ROW_HEIGHT, - }, - ... -})); -``` - -## Edge Patterns - -### Basic directed edge - -```js -{ id: 'e1', source: 'a', target: 'b', animated: true, style: { stroke: '#475569', strokeWidth: 2 } } -``` - -### Labeled edge - -```js -{ id: 'e1', source: 'a', target: 'b', label: 'calls', labelStyle: { fill: '#94a3b8', fontSize: 11 }, labelBgStyle: { fill: '#1e293b' } } -``` - -### Edge types - -- `default` — bezier curve (best for trees) -- `smoothstep` — right-angled with rounded corners (best for flowcharts) -- `step` — right-angled sharp corners -- `straight` — direct line - -Set via `type` property: `{ id: 'e1', source: 'a', target: 'b', type: 'smoothstep' }`. - -## Color Palette (Dark Theme) - -| Purpose | Color | Usage | -|---------|-------|-------| -| Background | `#0f172a` | Page/canvas | -| Card bg | `#1e293b` | Node cards | -| Card border | `#334155` | Default border | -| Card border hover | `#475569` | Hover state | -| Primary text | `#f1f5f9` | Titles, names | -| Secondary text | `#cbd5e1` | List items | -| Muted text | `#64748b` | Labels, captions | -| Dim text | `#475569` | Disabled, empty states | -| Edge default | `#475569` | Connection lines | -| Edge animated | `#60a5fa` | Active connections | -| Blue accent | `#3b82f6` / `#60a5fa` | — | -| Purple accent | `#8b5cf6` / `#a78bfa` | — | -| Green accent | `#10b981` / `#34d399` | — | -| Amber accent | `#f59e0b` / `#fbbf24` | — | -| Red accent | `#ef4444` / `#f87171` | — | - -### Type badge CSS pattern - -```css -.type-example { - background: rgba(59, 130, 246, 0.15); - color: #60a5fa; - border: 1px solid rgba(59, 130, 246, 0.3); -} -``` - -Replace the RGB values with any accent color. The pattern is: 15% opacity background, full-brightness text, 30% opacity border. - -## Title and Legend - -### Title overlay - -```js -h('div', { className: 'diagram-title' }, - 'Main Title', - h('div', { className: 'subtitle' }, 'Subtitle text'), -) -``` - -### Legend overlay - -```js -h('div', { className: 'legend' }, - h('div', { className: 'legend-item' }, - h('div', { className: 'legend-dot', style: { background: '#3b82f6' } }), - 'Label', - ), - // ... more items -) -``` - -## Common Node Designs - -### Card with sub-items - -For nodes that have a list of children (e.g., a flow with data actions): - -```js -function CardWithList({ data }) { - return h('div', { className: 'node-card' }, - h(Handle, { type: 'target', position: Position.Top, style: { background: '#475569', width: 8, height: 8 } }), - h('div', { className: `type-badge ${data.badgeClass}` }, data.badgeLabel), - h('div', { className: 'node-title' }, data.label), - data.items.length > 0 - ? h('div', null, - h('div', { className: 'section-label' }, data.itemsLabel), - ...data.items.map((item, i) => - h('div', { key: i, className: 'list-item' }, item) - ) - ) - : h('div', { className: 'muted' }, `No ${data.itemsLabel.toLowerCase()}`), - h(Handle, { type: 'source', position: Position.Bottom, style: { background: '#475569', width: 8, height: 8 } }), - ); -} -``` - -### Simple labeled node - -For minimal nodes (state machine states, simple pipeline steps): - -```js -function SimpleNode({ data }) { - return h('div', { className: 'node-card', style: { textAlign: 'center', minWidth: 120 } }, - h(Handle, { type: 'target', position: Position.Top, style: { background: '#475569', width: 8, height: 8 } }), - h('div', { className: 'node-title', style: { marginBottom: 0 } }, data.label), - h(Handle, { type: 'source', position: Position.Bottom, style: { background: '#475569', width: 8, height: 8 } }), - ); -} -``` - -### Node with status indicator - -```js -function StatusNode({ data }) { - const statusColors = { healthy: '#10b981', warning: '#f59e0b', error: '#ef4444' }; - return h('div', { className: 'node-card' }, - h(Handle, { type: 'target', position: Position.Top, style: { background: '#475569', width: 8, height: 8 } }), - h('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } }, - h('div', { style: { width: 8, height: 8, borderRadius: '50%', background: statusColors[data.status] || '#475569' } }), - h('div', { className: 'node-title', style: { marginBottom: 0 } }, data.label), - ), - h(Handle, { type: 'source', position: Position.Bottom, style: { background: '#475569', width: 8, height: 8 } }), - ); -} -``` \ No newline at end of file