Skill

diagram

Display an architecture diagram in the Lux window with auto-laid-out boxes, arrows, and labels. Use when the user asks to "show architecture", "draw a diagram", "visualize the system", "show dependencies", "architecture diagram", or wants a visual overview of components and their relationships. Also triggered by "box and arrow diagram", "system diagram", "component diagram", or "dependency graph".

From lux-dev

Install

Run in your terminal

npx claudepluginhub punt-labs/claude-plugins --plugin lux

Tool Access

This skill is limited to using the following tools:

mcp__plugin_lux_lux__show_diagrammcp__plugin_lux-dev_lux__show_diagrammcp__lux__show_diagram

Skill Content

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

138.6k

claude-opus-4-5-migration

2 files

Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.

claude-opus-4-5-migration

83.2k

cost-optimization

1 file

Optimizes cloud costs on AWS, Azure, GCP via rightsizing, tagging strategies, reserved instances, spot usage, and spending analysis. Use for expense reduction and governance.

cloud-infrastructure

33.0k

Stats

Stars0

Forks0

Last CommitMar 9, 2026

Actions

View Source View Plugin View on GitHub View README

diagram

From lux-dev

Step 1: Identify components

Analyze the system or codebase to identify:

Layers — logical groupings rendered top-to-bottom (e.g., Frontend, Backend, Storage)

Nodes — individual components within each layer (e.g., Web App, API Server, Database)

Edges — connections between components across layers (e.g., "REST", "SQL", "gRPC")

Each node has:

id — unique identifier (used in edge routing)

label — display name shown in the box

detail (optional) — subtitle shown below the label

Notes

Layers render top-to-bottom. Put callers/clients at the top, infrastructure at the bottom.

Edges route from the bottom-center of the source node to the top-center of the destination.

Edge labels appear at the midpoint of the arrow.

Empty layers are skipped. Layers with no nodes are harmless but produce no output.

The color palette cycles through 6 colors (blue, orange, green, red, purple, teal).

/lux:diagram — Architecture Diagram

Display a layered architecture diagram with auto-layout in the Lux window.

Step 1: Identify components

Analyze the system or codebase to identify:

Layers — logical groupings rendered top-to-bottom (e.g., Frontend, Backend, Storage)
Nodes — individual components within each layer (e.g., Web App, API Server, Database)
Edges — connections between components across layers (e.g., "REST", "SQL", "gRPC")

Each node has:

id — unique identifier (used in edge routing)
label — display name shown in the box
detail (optional) — subtitle shown below the label

Step 2: Call show_diagram

Call the show_diagram MCP tool with the layers, nodes, and edges.

The tool handles all layout automatically — box sizing, spacing, arrow routing, color coding per layer, and safe margins. No manual coordinates needed.

Step 3: Tell the user

After the tool returns ack:<scene_id>, tell the user the diagram is live. Each layer is color-coded and nodes are auto-sized to their content.

Notes

Layers render top-to-bottom. Put callers/clients at the top, infrastructure at the bottom.
Edges route from the bottom-center of the source node to the top-center of the destination.
Edge labels appear at the midpoint of the arrow.
Empty layers are skipped. Layers with no nodes are harmless but produce no output.
The color palette cycles through 6 colors (blue, orange, green, red, purple, teal).