graphilizer

SKILL.md

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.

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.

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

Ver original