Graphilizer Skill

Generate interactive graph visualizations that open in the browser for live exploration. You describe a domain — codebases, infrastructure, relationships, knowledge maps, anything — and this skill produces a React Flow app with search, filtering, and detail inspection. Unlike flow-graph which records videos, graphilizer keeps a live dev server running so the user can pan, zoom, click nodes, and explore.

Workflow

1. Understand the Request

Parse the user's description to identify:

• Domain — what kind of data is being visualized (codebase, infrastructure, relationships, etc.)
• Node types — categories of entities (e.g. service, database, user for infrastructure)
• Edge types — categories of relationships (e.g. depends-on, calls, reads-from)
• Grouping — logical clusters of related nodes

2. Define Node and Edge Types

Create domain-specific type definitions in settings.nodeTypes and settings.edgeTypes. Each type gets a color, optional icon (emoji or image URL), optional border/line style, and a shape that controls how the node is rendered visually. Types are fully custom — define whatever makes sense for the domain.

Choose the right shape for each entity type:

Mix shapes freely — a single graph can have card nodes for team members, table nodes for databases, default nodes for services, and pill nodes for deployment phases, all connected with edges.

3. Generate Graph JSON

Create the graph data JSON following the schema in references/graphilizer-schema.md.

{
  "settings": {
    "title": "My Service Map",
    "description": "Production microservices and their dependencies",
    "layout": { "direction": "LR", "nodeSpacing": 80, "rankSpacing": 120 },
    "nodeTypes": {
      "service":  { "color": "#4A90D9", "icon": "🔧" },
      "database": { "color": "#E8A838", "icon": "🗄️", "shape": "table" },
      "person":   { "color": "#53d769", "icon": "👤", "shape": "card" },
      "phase":    { "color": "#a855f7", "icon": "🏁", "shape": "pill" }
    },
    "edgeTypes": {
      "calls": { "color": "#4A90D9", "style": "solid", "animated": true },
      "reads": { "color": "#E8A838", "style": "dashed" }
    }
  },
  "groups": [
    { "id": "backend", "label": "Backend Services" }
  ],
  "nodes": [
    { "id": "api", "label": "API Gateway", "type": "service", "group": "backend", "metadata": { "language": "Go", "team": "platform" } },
    { "id": "db", "label": "PostgreSQL", "type": "database", "metadata": { "version": "15", "size": "200GB", "tables": "42" } },
    { "id": "sarah", "label": "Sarah Chen", "type": "person", "description": "Tech Lead", "tags": ["Go", "Kubernetes"] },
    { "id": "beta", "label": "Beta Launch", "type": "phase" }
  ],
  "edges": [
    { "id": "e1", "source": "api", "target": "db", "label": "queries", "type": "reads" },
    { "id": "e2", "source": "sarah", "target": "api", "label": "leads" },
    { "id": "e3", "source": "beta", "target": "api", "label": "deploys" }
  ]
}

4. Write the JSON File

Write the graph JSON to a temporary file, e.g. /tmp/graphilizer-data.json.

5. Setup (first run only)

Install the skill's dependencies if not yet done:

cd <skill-dir> && npm install --prefer-offline --no-audit --no-fund
cd <skill-dir>/assets/graphilizer-template && npm install --prefer-offline --no-audit --no-fund

Where <skill-dir> is the directory containing this SKILL.md file.

6. Launch the Interactive Visualization

Run the serve script:

node <skill-dir>/scripts/serve.mjs /tmp/graphilizer-data.json --open

This starts a Vite dev server and opens the visualization in the user's default browser. The server stays running until the user is done exploring.

Key Points

• Node and edge types are domain-agnostic — define whatever types make sense for the use case
• Shapes control how each type renders: default (box), card (vertical with image/tags), table (key-value rows), pill (compact inline). Mix freely in one graph
• Icons can be emojis, image URLs, or omitted entirely (shows a colored dot)
• Positions are optional — dagre auto-layout handles positioning when positions are not specified
• Metadata on nodes and edges is freeform key-value data that appears in the detail panel when clicked
• Groups cluster related nodes visually with a labeled container
• Search filters across labels and metadata values
• Types not in the definitions get auto-assigned colors from a default palette
• Card-specific fields: description (text), tags (array of strings), image (URL) — set directly on the node
• Table-specific fields: rows (array of {key, value}) — or omit and metadata is auto-displayed as rows
• Layers assign nodes and edges to logical sections (e.g. "Team", "Architecture", "Rollout") with toggle pills in the sidebar

Layers

Layers let you partition a graph into logical sections that users can toggle on and off. This is essential for complex graphs that combine multiple concerns — e.g. an infrastructure graph with team responsibilities, architecture diagrams, and rollout phases all in the same view.

How It Works

• Add a layer field (string) to any node or edge
• When more than one layer exists, the sidebar shows toggle pills for each layer
• Toggling a layer off dims (not removes) its nodes and edges to ~8% opacity
• Edges are dimmed if their explicit layer is disabled, or if both endpoints are dimmed
• Layers work alongside type and group filters — all filters compose

Usage Guidelines

• Use layers to separate conceptual domains that exist in the same graph (e.g. "Team" vs "Architecture" vs "Rollout")
• Use groups to cluster related items within a layer (e.g. "Backend Services" group within the "Architecture" layer)
• Use types to distinguish entity kinds across layers (e.g. service, database, person can appear in any layer)
• Nodes and edges without a layer field are always visible

Example

{
  "nodes": [
    { "id": "sarah", "label": "Sarah Chen", "type": "lead", "layer": "Team" },
    { "id": "api", "label": "API Gateway", "type": "service", "layer": "Architecture" },
    { "id": "m-beta", "label": "Private Beta", "type": "milestone", "layer": "Rollout" }
  ],
  "edges": [
    { "id": "e1", "source": "sarah", "target": "api", "label": "leads", "layer": "Team" },
    { "id": "e2", "source": "api", "target": "auth", "label": "validates", "layer": "Architecture" },
    { "id": "e3", "source": "m-beta", "target": "webapp", "label": "ships", "layer": "Rollout" }
  ]
}

Timeline Animation

When edges have an order field (integer), a timeline player appears with play/pause, a scrubber slider, and a reset button. This is useful for showing sequences: transfers over a window, build steps, event chains, deployment order, etc.

How It Works

• Edges with order values are animated in sequence — 3 seconds per step
• Future edges (order > current step) render translucent so the full graph structure is visible
• Active edges (order === current step) are highlighted with a glow and an animated dot traveling along the path. Connected nodes also glow
• Past edges (order < current step) render at full opacity, normal style
• The slider scrubs smoothly during playback and can be dragged manually
• When a node is selected (focus mode), the timeline scopes to only the edges visible in that subgraph

Subtitles

Edges can include a subtitle field — a short descriptive line displayed teletext-style at the bottom of the canvas during that edge's animation step. When multiple edges share the same order, their subtitles stack on separate lines.

Edge Fields for Timeline

Example: Animated Transfer Timeline

{
  "edges": [
    { "id": "e1", "source": "a", "target": "b", "label": "Step 1", "type": "big", "order": 1, "subtitle": "First transfer completes" },
    { "id": "e2", "source": "b", "target": "c", "label": "Step 2a", "type": "medium", "order": 2, "subtitle": "Two things happen at once" },
    { "id": "e3", "source": "d", "target": "e", "label": "Step 2b", "type": "small", "order": 2, "subtitle": "This runs in parallel with 2a" },
    { "id": "e4", "source": "c", "target": "f", "label": "Step 3", "type": "big", "order": 3, "subtitle": "Final step wraps up" }
  ]
}

Example: Breaking Bad Character Network

{
  "settings": {
    "title": "Breaking Bad",
    "description": "Character relationships",
    "layout": { "direction": "TB", "nodeSpacing": 100, "rankSpacing": 150 },
    "nodeTypes": {
      "protagonist": { "color": "#4CAF50", "icon": "🧪" },
      "antagonist": { "color": "#F44336", "icon": "💀" },
      "family": { "color": "#2196F3", "icon": "👨‍👩‍👦" },
      "dea": { "color": "#FF9800", "icon": "🔫" }
    },
    "edgeTypes": {
      "family": { "color": "#2196F3", "style": "solid" },
      "business": { "color": "#4CAF50", "style": "dashed", "animated": true },
      "conflict": { "color": "#F44336", "style": "dotted" }
    }
  },
  "groups": [
    { "id": "white-family", "label": "White Family" },
    { "id": "cartel", "label": "Drug Trade" }
  ],
  "nodes": [
    { "id": "walt", "label": "Walter White", "type": "protagonist", "group": "white-family", "metadata": { "alias": "Heisenberg", "occupation": "Chemistry Teacher" } },
    { "id": "jesse", "label": "Jesse Pinkman", "type": "protagonist", "group": "cartel", "metadata": { "role": "Cook", "catchphrase": "Yeah, science!" } },
    { "id": "skyler", "label": "Skyler White", "type": "family", "group": "white-family" },
    { "id": "hank", "label": "Hank Schrader", "type": "dea", "metadata": { "role": "DEA Agent" } },
    { "id": "gus", "label": "Gus Fring", "type": "antagonist", "group": "cartel", "metadata": { "front": "Los Pollos Hermanos" } }
  ],
  "edges": [
    { "id": "e1", "source": "walt", "target": "jesse", "label": "partners", "type": "business" },
    { "id": "e2", "source": "walt", "target": "skyler", "label": "married", "type": "family" },
    { "id": "e3", "source": "hank", "target": "skyler", "label": "in-laws", "type": "family" },
    { "id": "e4", "source": "walt", "target": "gus", "label": "rivals", "type": "conflict" },
    { "id": "e5", "source": "gus", "target": "jesse", "label": "employer", "type": "business" }
  ]
}

Schema Reference

See references/graphilizer-schema.md for the complete JSON format specification.