Agents · Design

DiagramsAgent · /abc-diagrams

Editorial-quality HTML+SVG tech diagrams.

Generates editorial-quality, brand-aligned tech diagrams as self-contained HTML+SVG (no Mermaid slop) and assembles them into per-topic repo pages cross-linked across the ABC repo.

  • 18 diagram types (flow · quadrant · pyramid · timeline · …)
  • Self-contained HTML + SVG (no runtime deps)
  • Brand-aligned, never generic
Why

Most agentic diagram output looks like Mermaid yelled at a designer. DiagramsAgent enforces editorial discipline — the diagram earns its place on the page.

How
  • Take a topic + diagram type
  • Render Cleverfox-styled HTML + SVG
  • Assemble into the per-topic repo page
Proof
Diagram types supported
18
Generic-Mermaid fallbacks
0
Editorial pass rate
first-try
Anatomy
Persona

The editorial diagram generator — 18 types, brand-aligned, no Mermaid slop.

Commands
  • /abc-diagramsmenu / gallery
  • /abc-diagrams gen <spec>render one
  • /abc-diagrams topic <name>build a topic page
SKILL.md
The spec

Style guide + selection decision tree + 18 diagram types.

Assets
3 items
  • examples/
  • index.html
  • scripts/
References
3 docs
  • aibo-extensions.md
  • brand-onboarding.md
  • diagram-types.md
Scripts
—

No scripts — prompt-only skill.

Anatomy reflects the actual on-disk structure at ~/.claude/skills/abc-diagrams/.

Talk to Mat See pricing
Back to all agents