Skills
.Work. You
Rest

diagram-design-editorial

Official

Create brand-matching editorial diagrams in HTML + SVG.

Design & Creative#design tokens#architecture diagrams#flowcharts#sequence diagrams#diagram generation#brand styling#html svg
AuthorAradotso
Version1.0.0
Installs0

System Documentation

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."

Dependency Matrix

Required Modules

None required

Components

assetsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: diagram-design-editorial
Download link: https://github.com/Aradotso/design-skills/archive/main.zip#diagram-design-editorial

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.