Diagram Design Skill for AI Agents Supports 39 Diagram Types

Diagram Design, released on GitHub, is a diagram generation skill usable in AI agent hosts such as Claude Code, Codex, Factory Droid, and Pi, supporting a total of 39 editable diagram types.

Key Features and Design Principles

• Output Format: Generates static outputs based on HTML+SVG without requiring JS builds, excluding Mermaid dependencies. The default is static HTML, with optional motion features for sequential explanations.
• Design Rules: Prohibits the use of shadows and limits the maximum radius of rounded boxes to 10px. Accent colors are limited to 1, and all coordinates and spacing are maintained as multiples of 4 to ensure consistent design.
• Accessibility and Validation: Includes accessibility attributes in SVG and detects design rule violations via the lint-skin.py script. The CI system validates semantic routing, motion assets, controller contracts, etc.
• Import Functionality: When importing draw.io, Mermaid, and Excalidraw files, it ignores the original design and retains only relationships and directions, re-rendering them with its own design system.

Popularity and License

• Released under the MIT license, it has recorded 39.2k Stars on GitHub.