What is this?
It is a skill that gives Claude Code (or any coding agent that supports skills) the ability to generate Excalidraw diagrams from natural language descriptions, with layouts that actually reflect the concept (fan-outs, timelines, convergence) instead of generic boxes.
It is a skill that gives Claude Code (or any coding agent that supports skills) the ability to generate Excalidraw diagrams from natural language descriptions, with layouts that actually reflect the concept (fan-outs, timelines, convergence) instead of generic boxes.Is this a standalone app or something I add to my coding agent?It is a skill file bundle you drop into your agent's skills folder, not a separate application. Agents that read from .claude/skills/ (like Claude Code and OpenCode) pick it up automatically.
It is a skill file bundle you drop into your agent's skills folder, not a separate application. Agents that read from .claude/skills/ (like Claude Code and OpenCode) pick it up automatically.Do I need to configure anything before the agent can render diagrams?Yes, the render pipeline needs a one-time setup; you can either ask your coding agent to run the setup commands from SKILL.md for you, or do it manually.
Yes, the render pipeline needs a one-time setup; you can either ask your coding agent to run the setup commands from SKILL.md for you, or do it manually.Does the diagram just get generated blindly, or does the agent check its own work?The skill uses a Playwright-based render pipeline so the agent can see its own output, catch issues like overlapping text or misaligned arrows, and fix them in a loop before delivering the final diagram.
The skill uses a Playwright-based render pipeline so the agent can see its own output, catch issues like overlapping text or misaligned arrows, and fix them in a loop before delivering the final diagram.How do I actually ask it to make a diagram?You just describe what you want in plain language, e.g. 'Create an Excalidraw diagram showing how the AG-UI protocol streams events from an AI agent to a frontend UI,' and the skill handles concept mapping, layout, JSON generation, and rendering.
You just describe what you want in plain language, e.g. 'Create an Excalidraw diagram showing how the AG-UI protocol streams events from an AI agent to a frontend UI,' and the skill handles concept mapping, layout, JSON generation, and rendering.Can I change the colors and branding of the diagrams?Yes, all colors and brand styles live in a single file, references/color-palette.md, and editing it changes every diagram the skill produces.
Yes, all colors and brand styles live in a single file, references/color-palette.md, and editing it changes every diagram the skill produces.What is included besides shapes and arrows?Diagrams can include evidence artifacts such as real code snippets and actual JSON payloads, not just generic boxes.
Diagrams can include evidence artifacts such as real code snippets and actual JSON payloads, not just generic boxes.Does this only work with Claude Code?No, it works with any coding agent that supports skills; agents that read from a .claude/skills/ folder, like Claude Code and OpenCode, can use it directly.
No, it works with any coding agent that supports skills; agents that read from a .claude/skills/ folder, like Claude Code and OpenCode, can use it directly.What are similar projects?live-panel-skill, huashu-art-motion, drawio-skill, claude-ads, archify, procedural-film, geo-sleuth, guizang-product-video-skill
live-panel-skill, huashu-art-motion, drawio-skill, claude-ads, archify, procedural-film, geo-sleuth, guizang-product-video-skillWhich topics is it in?diagrams-as-code, diagram, claude-code-skill, playwright, opencode, visualization, design, json, skill, agent-skills, agent, claude-code
diagrams-as-code, diagram, claude-code-skill, playwright, opencode, visualization, design, json, skill, agent-skills, agent, claude-code