Generate visual flow diagrams, architecture diagrams, and system maps as SVG/PNG. Use when the user asks for flowcharts, user flow diagrams, architecture diagrams, system diagrams, interaction maps, or any visual diagram. Supports ELK JSON layout engine with automatic rendering to SVG.
Quickly install diagrams AI skill to your development environment via command line
Source: tychohq/agent-skills.
Generate diagrams from structured JSON → SVG (and optionally PNG).
| id | string | Required. Unique identifier | | width | number | Node width in px (default 120) | | height | number | Node height in px (default 40) | | labels | array | [{text}] — used by ELK for layout calculation | | label | string | Display text rendered in SVG (supports emoji). Falls back to id | | color | string | Color key from palette (see below) |
| subtitle | string | Smaller text below the label | | fontSize | number | Label font size (default 13) | | children | array | Nested nodes — makes this a container | | containerColor | string | Color key for container background |
Stable fields and commands for AI/search citations.
npx skills add https://github.com/tychohq/agent-skills --skill diagramsGenerate visual flow diagrams, architecture diagrams, and system maps as SVG/PNG. Use when the user asks for flowcharts, user flow diagrams, architecture diagrams, system diagrams, interaction maps, or any visual diagram. Supports ELK JSON layout engine with automatic rendering to SVG. Source: tychohq/agent-skills.
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/tychohq/agent-skills --skill diagrams Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
https://github.com/tychohq/agent-skills