What is diagram-design?

A tool for creating many kinds of diagrams, including architecture diagrams, flowcharts, timelines, data models, charts, and organizational diagrams, as self-contained HTML files with inline graphics and styles.

It is for drawing software architecture, processes, data relationships, schedules, charts, and other structured information for documents or presentations.

It provides a consistent visual system for diagrams and checks project style settings before creating the first diagram. This helps avoid silently using default branding in a project with its own design rules.

diagram-design — Skill for Claude Code by nikeyes

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add nikeyes/stepwise-dev --skill diagram-design

Clone the repo

git clone --depth 1 https://github.com/nikeyes/stepwise-dev

Made for: Claude Code.

Or install diagram-design, the plugin that ships this one along with the rest of its 1 skill, 5 commands.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/nikeyes/stepwise-dev/diagram-design/github.svg)](https://agentmods.dev/skills/nikeyes/stepwise-dev/diagram-design)

Your own site

<a href="https://agentmods.dev/skills/nikeyes/stepwise-dev/diagram-design"><img src="https://agentmods.dev/badge/skills/nikeyes/stepwise-dev/diagram-design/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/nikeyes/stepwise-dev/diagram-design"><img src="https://agentmods.dev/badge/skills/nikeyes/stepwise-dev/diagram-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 188 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 10,212 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin 92% copy Near-identical to another mod in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00188	$0.10212
Opus 5	$0.00094	$0.05106
Sonnet 5	$0.00038	$0.02042
Haiku 4.5	$0.00019	$0.01021

Measured yesterday against content hash 1801db2ce04d, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, from the pricing page.

Security

Grade A, and why

diagram-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

92% identical to diagram-design — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

diagrams/skills/diagram-design/SKILL.md · 586 lines

How it starts

The opening of the file, as written. The whole thing — 586 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Diagram Design

Create visual diagrams as self-contained HTML files with inline SVG and CSS, following an opinionated editorial design system.

Thirty-nine visual types. Semantic patterns describe behavior independently; type references describe layout. Details load from references/ only when selected.

0. First-time setup — style guide gate

Before generating your first diagram in a new project, verify the style guide has been customized.

Don't silently ship default-skinned diagrams into a branded project.

First check the project root for a .diagram-design marker and resolve it per references/profiles.md. A valid marker whose profile exists selects that file directly and skips this gate; profile: default also skips it. A malformed or missing-profile marker follows the visible failure handling in that reference. Never copy a marker-selected profile over the installed working copy.

Open references/style-guide.md and check the default tokens. If they're still the shipped defaults (paper #f5f5f5, ink #2d3142, accent #eb6c36 atomic-tangerine), pause and ask the user:

"This is your first diagram in this project. The style guide is still at the default (neutral white-smoke + atomic-tangerine). Do you want to customize it to match your brand first? Options: (a) pull from your website URL, (b) extract from an installed skill, (c) extract from a local folder / design-system directory, (d) paste tokens manually, (e) proceed with the default for now, (f) load a saved client profile."

Then branch per the matching section of references/onboarding.md; for (f) follow references/profiles.md.

Once the style guide has been customized (or the user explicitly opted for default), skip this gate on subsequent runs. A leading profile header names the copied-in active profile. Without a header, any semantic-role value or typography family differing from shipped defaults means custom-unsaved: skip the gate and offer to save it as a profile. All-default tokens with no marker/header trigger the gate. At the end of every onboarding method, offer to save the result as a named client profile per references/profiles.md.

Read the full file on GitHub · 586 lines

Files

What ships with it

60 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

yesterday First seen · 586 lines · 188 tokens per session scan A 1801db2ce04d

Subscribe to this mod's changes

diagram-design is a skill published in the GitHub repository nikeyes/stepwise-dev (24 stars, last pushed yesterday), licensed Apache-2.0. It adds 188 tokens to every session and 10,212 once invoked, about $0.0009 per session on Opus 5. A static security scan graded it A with 0 findings. It is 92% identical to diagram-design, differing in 0 lines, and is treated as a copy.

Design and UX

webgl-holographic-foil

A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.

nexu-io/open-design · 41 tokens

html-ppt-hermes-cyber-terminal

OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

nexu-io/open-design · 53 tokens

html-ppt-taste-brutalist

16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).

nexu-io/open-design · 78 tokens

diagram-design