graphilizer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Graphilizer Skill

Graphilizer 技能

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.

生成可在浏览器中打开的交互式图形可视化效果，支持实时探索。你只需描述一个领域（代码库、基础设施、关系、知识图谱等均可），该技能就能生成一个带有搜索、筛选和详情查看功能的React Flow应用。与flow-graph（录制视频）不同，Graphilizer会保持一个实时开发服务器运行，用户可以平移、缩放、点击节点进行探索。

Workflow

工作流程

1. Understand the Request

1. 理解需求

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

解析用户的描述，明确以下信息：

领域 — 要可视化的数据类型（代码库、基础设施、关系等）
节点类型 — 实体的类别（例如基础设施场景下的
```
service
```
、
```
database
```
、
```
user
```
）
边类型 — 关系的类别（例如
```
depends-on
```
、
```
calls
```
、
```
reads-from
```
）
分组 — 相关节点的逻辑集群

2. Define Node and Edge Types

2. 定义节点与边类型

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:

Shape	Best for	Visual
`default`	Services, entities, generic items	Icon + label + type badge (horizontal)
`card`	People, products, detailed entities	Large icon/image, title, description, tags
`table`	Databases, configs, specs, inventories	Header + visible key-value rows
`pill`	Milestones, statuses, tags, phases	Compact inline rounded label

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.

在

settings.nodeTypes

和

settings.edgeTypes

中创建特定领域的类型定义。每种类型都包含颜色、可选图标（表情符号或图片URL）、可选边框/线条样式，以及控制节点视觉渲染的形状。类型完全可自定义——可根据领域需求定义任意类型。

为每种实体类型选择合适的形状：

形状（Shape）	最适用场景	视觉样式
`default`	服务、实体、通用项	图标 + 标签 + 类型标识（水平布局）
`card`	人物、产品、详情类实体	大图标/图片、标题、描述、标签
`table`	数据库、配置、规格、库存	表头 + 可见的键值对行
`pill`	里程碑、状态、标签、阶段	紧凑的内联圆角标签

可自由混合形状——单个图谱中可以同时包含用于团队成员的卡片节点、用于数据库的表格节点、用于服务的默认节点，以及用于部署阶段的胶囊节点，所有节点通过边连接。

3. Generate Graph JSON

3. 生成图谱JSON

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

json

{
  "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" }
  ]
}

遵循references/graphilizer-schema.md中的 schema 创建图谱数据JSON。

json

{
  "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

4. 写入JSON文件

Write the graph JSON to a temporary file, e.g.

/tmp/graphilizer-data.json

将图谱JSON写入临时文件，例如

/tmp/graphilizer-data.json

。

5. Setup (first run only)

5. 初始化（仅首次运行）

Install the skill's dependencies if not yet done:

bash

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.

如果尚未安装技能的依赖项，请执行以下操作：

bash

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

其中

<skill-dir>

是包含此SKILL.md文件的目录。

6. Launch the Interactive Visualization

6. 启动交互式可视化

Run the serve script:

bash

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.

运行启动脚本：

bash

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

这将启动一个Vite开发服务器，并在用户的默认浏览器中打开可视化页面。服务器会持续运行，直到用户结束探索。

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

节点和边类型与领域无关 — 可根据用例定义任意类型
形状控制每种类型的渲染方式：
```
default
```
（方框）、
```
card
```
（带图片/标签的垂直布局）、
```
table
```
（键值对行）、
```
pill
```
（紧凑内联）。可在单个图谱中自由混合使用
图标可以是表情符号、图片URL，或完全省略（显示彩色圆点）
位置为可选参数 — 未指定位置时，dagre自动布局会处理节点定位
节点和边上的元数据是自由格式的键值对数据，点击节点时会在详情面板中显示
分组通过带标签的容器将相关节点进行视觉聚类
搜索功能可根据标签和元数据值进行筛选
未在定义中的类型会自动从默认调色板分配颜色
卡片节点专属字段：
```
description
```
（文本）、
```
tags
```
（字符串数组）、
```
image
```
（URL）——直接在节点上设置
表格节点专属字段：
```
rows
```
（
```
{key, value}
```
数组）——若省略，元数据会自动显示为行
图层将节点和边分配到逻辑分区（例如“团队”、“架构”、“发布”），侧边栏中会显示切换胶囊按钮

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

为任意节点或边添加
```
layer
```
字段（字符串类型）
当存在多个图层时，侧边栏会显示每个图层的切换胶囊按钮
关闭图层会将其节点和边的透明度降低至约8%（而非移除）
如果边的显式图层被禁用，或者其两个端点都被变暗，边也会变暗
图层可与类型和分组筛选器配合使用——所有筛选器可组合生效

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

使用图层分离同一图谱中的概念领域（例如“团队” vs “架构” vs “发布”）
使用分组在图层内聚类相关项（例如“架构”图层中的“后端服务”分组）
使用类型区分跨图层的实体种类（例如
```
service
```
、
```
database
```
、
```
person
```
可出现在任意图层中）
没有
```
layer
```
字段的节点和边始终可见

Example

示例

json

{
  "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" }
  ]
}

json

{
  "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.

当边包含

order

字段（整数类型）时，会出现一个时间线播放器，带有播放/暂停、 scrubber 滑块和重置按钮。这适用于展示序列：一段时间内的传输、构建步骤、事件链、部署顺序等。

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

带有
```
order
```
值的边会按顺序动画——每步持续3秒
未来的边（order > 当前步骤）会半透明显示，以便完整查看图谱结构
当前活动的边（order === 当前步骤）会高亮显示，带有光晕效果，同时有一个动画圆点沿路径移动。连接的节点也会发光
已完成的边（order < 当前步骤）会以完全不透明度、正常样式显示
滑块在播放期间可平滑拖动，也可手动拖拽
当选中节点（聚焦模式）时，时间线会仅显示该子图谱中的边

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.

边可以包含

subtitle

字段——在该边的动画步骤中，会在画布底部以图文电视风格显示一行简短描述。当多个边共享相同的order时，它们的字幕会分多行堆叠显示。

Edge Fields for Timeline

时间线相关的边字段

Property	Type	Required	Description
`order`	integer	no	Sequence position for timeline animation
`subtitle`	string	no	Text shown at bottom of canvas during this step

属性（Property）	类型（Type）	是否必填（Required）	描述（Description）
`order`	integer	否	时间线动画的序列位置
`subtitle`	string	否	此步骤中显示在画布底部的文本

Example: Animated Transfer Timeline

示例：动画传输时间线

json

{
  "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" }
  ]
}

json

{
  "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

示例：绝命毒师角色关系网

json

{
  "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" }
  ]
}

json

{
  "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

Schema 参考

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

完整的JSON格式规范请参见references/graphilizer-schema.md。