✨ New canvas type: Network / Graph visualization

[guillaumeang]

What

Add a graph body type for rendering node-edge network diagrams — knowledge graphs, dependency trees, org charts, architecture diagrams.

Why

Agents frequently reason about relationships (dependencies, hierarchies, connections). A force-directed or hierarchical graph view would be incredibly powerful for:

• Architecture diagrams
• Knowledge graphs
• Org charts
• Dependency trees
• Social network analysis

Proposed Schema

{
  "header": { "title": "System Architecture" },
  "body": {
    "type": "graph",
    "layout": "force",
    "nodes": [
      { "id": "api", "label": "API Gateway", "color": "#7B2FBE", "prompt": "Tell me about the API" },
      { "id": "db", "label": "PostgreSQL", "color": "#E91E63" },
      { "id": "cache", "label": "Redis", "color": "#FF6D00" }
    ],
    "edges": [
      { "from": "api", "to": "db", "label": "queries" },
      { "from": "api", "to": "cache", "label": "reads" }
    ]
  }
}

Implementation hints

• d3-force for force-directed layout, or dagre for hierarchical
• SVG-based rendering for clean interactions
• Support prompt on nodes for click-to-ask
• Layout options: force, tree, radial