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 Client2026

Local-first AI agent workspace that unifies coding, writing, design, research and automation under one runtime shared between a desktop GUI and a terminal TUI. Features Agent Graph for long-running, auditable workflows, multi-provider model support, and local-by-default data storage.

GitHub
Chatbot2026

Self-hosted sales CRM that runs native AI agents (RAG per tenant) to handle WhatsApp conversations, qualify leads, trigger automations and move deals through configurable pipelines. Multi-tenant with LGPD-minded controls and a one-command VPS installer for full data ownership.

GitHub
AI Infra2026

Ingests and normalizes security telemetry, runs multi-model AI agents to produce replayable investigations and automated triage/response; key features include a step-by-step Investigation Ledger, CI-gated eval harness, and self-hostable deployments.