Skill

generate-tech-diagram

Use when the user wants to generate a tech diagram from a text description (network topology, architecture, flowchart, mind map, K8s cluster, etc.).

npx claudepluginhub danielrosehill/claude-code-plugins --plugin nano-tech-diagrams

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Generate a diagram from a text description using the Nano Banana 2 model. The MCP tool `text_to_image` accepts a description, optional diagram-type preset (network, flowchart, K8s, mind-map, etc.), and visual style preset (chalkboard, blueprint, pixel-art, neon-sign, corporate-clean, etc.).

SKILL.md

Similar Skills

cache-components

139.3k

Guides Next.js Cache Components and Partial Prerendering (PPR): 'use cache' directives, cacheLife(), cacheTag(), revalidateTag() for caching, invalidation, static/dynamic optimization. Auto-activates on cacheComponents: true.

cache-components

mcp-builder

124.2k

Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).

9 files

anthropics-skills-13

Stats

Stars0

Forks0

Last CommitApr 30, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

Generate Tech Diagram

Generate a diagram from a text description using the Nano Banana 2 model. The MCP tool text_to_image accepts a description, optional diagram-type preset (network, flowchart, K8s, mind-map, etc.), and visual style preset (chalkboard, blueprint, pixel-art, neon-sign, corporate-clean, etc.).

When to use

User describes a diagram idea in words (e.g., "draw a 3-tier microservice architecture")
User wants to visualize a system topology, flowchart, data pipeline, or conceptual model
User wants to experiment with different visual styles for the same diagram

Inputs to gather

Description (required) — free-text description of what the diagram should show
Diagram type (optional) — preset from list-diagram-types (e.g. network, flowchart, kubernetes, mind-map). If not provided, the model infers from description.
Style preset (optional) — preset from list-diagram-styles (e.g. blueprint, pixel-art, corporate-clean). Default: corporate-clean. Offer to run list-diagram-styles if user is unsure.
Aspect ratio (optional) — e.g. 16:9, 1:1, 4:3. Default: 16:9.
Output path (optional) — where to save the PNG. Default: ${CLAUDE_USER_DATA:-${XDG_DATA_HOME:-$HOME/.local/share}/claude-plugins}/nano-tech-diagrams/diagrams/<slug>-<timestamp>.png

Procedure

If the MCP is not installed, show the user: claude mcp add nano-tech-diagrams -- npx -y nano-tech-diagrams-mcp and stop.
Call list-diagram-types silently to validate the diagram-type preset (if provided); skip if user is confident.
Call mcp__nano-tech-diagrams__text_to_image with description, diagram_type, style, aspect_ratio.
The MCP returns a fal.media URL and base64 PNG data. Extract the base64.
Compute output path (use default if not specified), ensuring parent directories exist.
Write the base64 as PNG to disk.
Report the file path and the fal.media URL to the user.

Output / side effects

PNG saved to disk at the computed output path.
User sees the local path and a fal.media URL (for preview/sharing).

Safety / constraints

Never dump raw base64 into the chat — always write to disk first.
If the MCP call fails, offer to retry with a simpler description or suggest list-diagram-styles to pick a more stable style preset.