skills.rest
Aradotso
AradotsoOFFICIAL
Explore all skills by this author →
Website𝕏@aradotsoGitHub

diagram-design-editorial

Generate branded HTML and SVG diagrams with extracted colors and fonts.

3|Updated May 16, 2026
Search Tags:#design tokens#architecture diagrams#flowcharts#sequence diagrams#diagram generation#brand styling#html svg
One-click install
npx skills add https://github.com/Aradotso/design-skills --skill diagram-design-editorial
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram-design-editorial
Source: https://github.com/Aradotso/design-skills/tree/main/skills/diagram-design-editorial
Command: npx skills add https://github.com/Aradotso/design-skills --skill diagram-design-editorial

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

It helps you produce high-quality architecture, flowchart, and other diagram visuals that look editorial and match your brand, without manually tweaking colors, typography, spacing, or SVG layout.

Core Features & Use Cases

  • Brand extraction & token mapping: Reads your website and extracts palette and font stack, mapping them into semantic diagram roles for consistent styling.
  • Multiple diagram types in one output format: Generates self-contained HTML + SVG for architecture, flowcharts, sequence/state machine, ER/data models, timelines, swimlanes, quadrants, org charts, venn, layers, tree, nested, and pyramid/funnel diagrams.
  • Design-system constraints for quality: Enforces editorial rules (grid/spacing divisibility, limited accent usage, specific font roles, no shadows/gradients) to avoid generic “AI-looking” diagrams.

Quick Start

Ask: "Create an architecture diagram of my app and apply it to my brand using https://example.com."

Frequently Asked Questions about diagram-design-editorial

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

FAQPage Schema
How do I generate an architecture diagram that automatically matches my brand's colors and fonts?▼

To generate a brand-matching architecture diagram, provide a website URL so the tool can extract your palette and font stack, mapping them into semantic roles for consistent HTML + SVG diagram styling.

Can I create sequence diagrams and ER data models using HTML and SVG?▼

Yes, you can create sequence diagrams and ER data models as self-contained HTML + SVG files, applying design constraints like grid divisibility, hairline borders, and specific font roles to ensure editorial-quality output.

What is the best way to prevent AI-generated flowcharts from looking generic?▼

The best way to avoid generic-looking flowcharts is to enforce editorial design rules, such as single accent color usage, grid divisibility, specified font sizes, and strict avoidance of shadows and gradients.

Does this diagram generation approach support swimlanes and state machine visuals?▼

Yes, this approach supports generating swimlanes, state machine visuals, timelines, and hierarchical diagrams by applying extracted brand design tokens consistently across nodes, labels, and connectors.

How do I apply my website's design tokens to a flowchart without manually tweaking SVG layout?▼

You can apply website design tokens to a flowchart by providing your URL for automatic brand extraction, which maps colors and fonts into semantic roles to style the HTML + SVG output automatically.

What diagram types can I build using design tokens and brand styling in HTML SVG?▼

Using design tokens and brand styling in HTML + SVG, you can build architecture, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, org chart, and venn diagrams with consistent spacing.

Related Skills

Explore More Design & Creative Skills→
SoufianouassifSoufianouassif

branding-generator

Generate three brand directions with color palettes, typography, and SVG logos.

Community
Advanced
tsukhanitsukhani
12

diagram-design

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

Community
Intermediate
marchattonmarchatton
5

brand-dna-extractor

Extract brand identity signals from websites into guidelines, prompt libraries, and design tokens.

Community
Advanced
alissimorealissimore

ui-styling

Apply Nexus design system and Tailwind CSS tokens to UI components.

Community
Basic