reloadium.com

showGraph

Show an interactive node-link graph (network diagram) in the chat — for relationships, dependencies, hierarchies, or flows between things, when a picture of connections is clearer than prose. Provide nodes as {id, label, category?, root?} and edges as {source, target, label?, directed?, weight?} using node ids. When the nodes fall into natural groups (roughly 2-6 of them — e.g. 'frontend'/'backend'/'infra', teams, statuses), set each node's 'category': nodes sharing a category are colored alike and the categories render as an automatic color legend on the card. Don't invent groupings for a uniform set, and don't pick colors yourself — the category IS the color assignment. Pick 'layout' based on the graph's actual shape, using real Cytoscape.js layout names: 'dagre' for a directed hierarchy/dependency graph ranked top-to-bottom (e.g. which tasks block which, an org chart, a breakdown); 'breadthfirst' for a tree branching outward from one starting point — mark that node with root:true (e.g. an intro path from person to person, a decision tree); 'circle' for a cyclical process or loop; or 'cose' (default) — a force-directed layout with no imposed structure — for a general relationship network with no clear hierarchy or root. Renders as a small card the user can expand full-screen to pan/zoom. Not a good fit for positional/spatial diagrams where exact placement carries meaning (e.g. word-by-word translation alignment) — these algorithms arrange nodes for readability, not to preserve a specific spatial correspondence. Keep it to what's actually relevant — dozens of nodes make a card unreadable even expanded.

Page: /

Input schema

{
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "layout": {
      "type": "string",
      "enum": [
        "cose",
        "dagre",
        "breadthfirst",
        "circle"
      ]
    },
    "nodes": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "id": {
            "type": "string"
          },
          "label": {
            "type": "string"
          },
          "category": {
            "type": "string"
          },
          "root": {
            "type": "boolean"
          }
        },
        "required": [
          "id",
          "label"
        ]
      }
    },
    "edges": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "source": {
            "type": "string"
          },
          "target": {
            "type": "string"
          },
          "label": {
            "type": "string"
          },
          "directed": {
            "type": "boolean"
          },
          "weight": {
            "type": "number"
          }
        },
        "required": [
          "source",
          "target"
        ]
      }
    }
  },
  "required": [
    "nodes",
    "edges"
  ]
}