skills.rest
hiddink-ai
hiddink-aiOFFICIAL
Explore all skills by this author →
GitHub

diagram-design

Generate brand-consistent SVG editorial diagrams from design tokens.

1|Updated May 21, 2026
Search Tags:#branding#documentation#svg#design-system#diagram#infographic
One-click install
npx skills add https://github.com/hiddink-ai/hiddink-harness --skill diagram-design-hiddink-ai
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Kirankumar2604Kirankumar2604

branding-generator

Generate brand identity kits with naming, color palettes, and typography.

Community
Advanced
tsukhanitsukhani
12

diagram-design

Generate self-contained HTML and SVG technical diagrams with semantic token styling.

Community
Intermediate
Jaderson-bitJaderson-bit
71

mindmap-markmap-viewer

Convert Markdown outlines into interactive SVG mind maps.

Community
Advanced
iani-kuliiani-kuli

diagrams

Generate technical diagrams from text-based markup languages like Mermaid, D2, or PlantUML.

Community
Intermediate