AIAny
AI Agent2026
Icon for item

Diagram Design

Generates editorial-quality diagrams as self-contained HTML files with inline SVG across 27 visual types; includes brand onboarding, agent-skill integrations (Claude Code, Codex, Pi), draw.io/Mermaid import, and static-first output with optional accessible motion.

Introduction

One core workflow problem this project solves: diagrams that match a site's brand and editorial tone instead of generic rounded-box outputs from LLMs. By embedding a small design system into an agent skill, it produces ready-to-use, accessible diagram HTML that reads your site for colors/fonts, redraws draw.io/Mermaid sources to an editorial style, and exports SVG/PNG for slides or Figma without a build step.

What Sets It Apart
  • Inline, offline-first deliverables: every diagram is a self-contained HTML file with inline SVG/CSS (no external images or runtime dependencies), so outputs open and render identically when double-clicked or embedded.
  • Brand-aware onboarding: an automated flow extracts dominant palette and font stack from a website, maps them to semantic tokens (paper, ink, accent), checks contrast, and applies them across all diagram types — reducing manual styling work.
  • Agent-first integration and import tooling: ships as a skill for Claude Code, Codex, and Pi, can redraw draw.io and Mermaid sources at controlled detail/audience/size dials, and emits a fidelity ledger describing what changed in conversion.
  • Accessibility and editorial restraint: accessible SVG naming, reduced-motion defaults, a one-accent editorial rule, and rules for node density and label placement to avoid generic, AI-like visuals.
Who it's for & tradeoffs

Great fit if you embed diagrams into documentation, blog posts, or slide decks and need them to align with your brand or editorial voice — especially teams using agent workflows (Claude/Codex/Pi) who want reproducible, exportable diagram artifacts. It’s also useful when you need faithful-but-simplified redraws of draw.io or Mermaid sources for different audiences (engineer vs executive).

Look elsewhere if you only need quick ASCII/inline diagrams, one-off decorative images, or an interactive/design-heavy Figma-first workflow. The project intentionally avoids being a full-fledged visual editor or replacing dedicated design tools; its strength is reproducible, accessible, editorial-quality static output and scripted agent integration.

Information

  • Websitegithub.com
  • OrganizationsBestSelf.co, Littlemight
  • AuthorsCathryn Lavery
  • Published date2026/04/16

Categories

More Items

GitHub
AI Agent2026

Shows what fills a DeepSeek Harness agent's context and how it changes per request. Browse prompts, tools and messages, trace compaction, and inspect token usage, estimated costs and parent/subagent relationships.

GitHub
AI Coding2026

Adds file editing, Git views, task monitoring and side chats to DeepSeek Harness. An extensible sidebar and split bottom workbench keep files, terminals and agent activity beside the conversation.

GitHub
AI Agent2026

Runs coding, research and document tasks through a desktop or Web agent. Its Cordis plugin system lets developers replace model adapters, tools and even the agent loop, or embed the runtime through SDKs.