diagram-design

Name: diagram-design
Availability: InStock
Author: hiddink-ai

Generate brand-consistent SVG editorial diagrams from design tokens.

1|Updated May 21, 2026

Search Tags:#branding #documentation #svg #design-system #diagram #infographic

Ready to run

npx skills add https://github.com/hiddink-ai/hiddink-harness --skill diagram-design-hiddink-ai

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: diagram-design
Source: https://github.com/hiddink-ai/hiddink-harness/tree/main/templates/skills/diagram-design
Command: npx skills add https://github.com/hiddink-ai/hiddink-harness --skill diagram-design-hiddink-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill eliminates the manual effort of creating professional, brand-aligned diagrams for technical documentation and marketing materials, ensuring visual consistency across all project assets.

Core Features & Use Cases

Automated SVG Generation: Creates high-quality, editorial-grade SVG diagrams without requiring external design tools or complex dependencies.
Brand Alignment: Automatically extracts design tokens like palettes and typography from your website to ensure every diagram matches your brand identity.
Use Case: Quickly generate a set of three variations (minimal light, minimal dark, and full editorial) for an architecture diagram to be included in your project's README or release notes.

Quick Start

Invoke the diagram-design skill followed by a natural language description of the architecture or infographic you wish to generate.

Frequently Asked Questions about diagram-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate architecture diagrams for technical documentation?▼

To generate architecture diagrams for technical documentation, you can use a tool that creates brand-consistent SVG editorial diagrams from a natural language description of your system.

How do I create SVG infographics that match my website's branding?▼

Creating SVG infographics that match your website's branding involves automatically extracting design tokens like color palettes and typography from your existing web system to ensure visual consistency.

Do I need Mermaid or PlantUML to generate SVG diagrams for my README?▼

You do not need Mermaid or PlantUML to generate SVG diagrams for your README; this skill operates as a standalone module without requiring external build dependencies or integration.

What's the best way to create dark and light theme variations for an architecture diagram?▼

The best way to create dark and light theme variations for an architecture diagram is to generate multiple editorial styles, such as minimal light, minimal dark, and full editorial versions, from a single description.

Can I extract design tokens from an existing website to use in my infographic generation?▼

Yes, you can extract design tokens such as color palettes and typography directly from your existing website to apply to your infographic generation, ensuring all assets align with your brand identity.