diagram-design: Editorial SVG and HTML Diagrams for AI Coding Agents

X postTrending GitHub RepositoriesTool

The diagram-design repository by Cathryn Lavery introduces a plugin for Claude Code, Codex, and compatible agents that generates 39 editorial-quality diagram types as self-contained HTML and SVG. It aims to eliminate generic Mermaid-style layouts and manual Figma redesigns.

Key points

  1. Provides 39 visual diagram types, including architecture, sequence, Sankey, Wardley maps, and database schemas.
  2. Generates completely self-contained HTML and SVG without JavaScript, build steps, or external image dependencies.
  3. Offers three variants per type: minimal light, minimal dark, and full-editorial.
  4. Adapts to brand styling within 60 seconds by reading an existing website and can redraw existing Mermaid or draw.io inputs.
  5. Integrates directly as a skill or plugin for Claude Code, Codex, Factory Droid, and Pi.

Why it matters

AI-generated diagrams typically rely on tools like Mermaid, which often produce cluttered or visually unappealing boxes that clash with company branding. This utility allows developers and writers to produce publication-ready vector diagrams straight from their agent workflows.

Analysis

The project addresses a common friction point in AI-assisted technical writing and documentation. By restricting output to zero-dependency HTML and SVG, it ensures assets are lightweight, version-controllable, and immediately renderable in any browser. The intentional aesthetic restraint ('target density: 4/10') keeps visual noise to a minimum.

Original post

Trending GitHub Repositories

@trending_repos · 13 August 2026

Trending repository of the day 📈 diagram-design 29 editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop. Last 24h: 2,855 ⭐ Total: 12,709 ⭐️ t.co/3bqL2cQa7e

591 likes15 replies1.2k bookmarks86.3k views

View on X
Selected replies (5)
  • @eboygarcia @trending_repos Been using t.co/9K9sR0syTp Will try this
  • @herpes_fan @trending_repos hmm… I got an idea! t.co/S9WNeNIFmJ
  • @aibuilderhq_ @trending_repos mermaid slop is real. this is a good direction.
  • @Elon_Orbit @trending_repos No shadows, no Mermaid-slop, no Figma fights. Self-contained HTML + SVG. I'm in.
  • @ajs6888 @trending_repos 没有 Mermaid 垃圾”这句怨念很真实，先收了。

Mentioned links

Links and tools from this entry

Summary generated by AI (Gemini 3.8 Flash, 27 September 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Repository:cathrynlavery/diagram-design

    Diagram Design: Editorial HTML and SVG Diagrams for AI Coding Agents

    Diagram Design is a skill and template framework for AI agents like Claude Code, Codex, and Pi. It produces 39 editorial diagram types as self-contained HTML and SVG, avoiding common Mermaid clichés and generic AI styling.

    30.2kstarsHTML

    AI & LLMs· Tool

  • Repository:tt-a1i/archify

    Archify: Interactive Architecture and System Diagrams for AI Coding Agents

    Archify is an open-source Node.js rendering and validation engine designed as a skill for coding agents like Cursor, Claude Code, Codex CLI, and OpenCode. Agents produce a typed JSON Intermediate Representation (IR), which Archify deterministically compiles into self-contained, interactive HTML, SVG, and media exports.

    45.5kstarsJavaScript

    AI & LLMs· Tool

  • Repository:display-dev/visualize

    visualize: On-Brand HTML Artifacts for AI Coding Agents

    visualize is an open-source skill for AI coding assistants such as Claude Code, Cursor, and Codex, designed to eliminate generic AI styling in generated HTML by applying persistent brand profiles and structured refinement commands.

    67starsHTML

    AI & LLMs· Tool

  • X post:Marco Ramilli

    Archify: Interactive Architecture Diagrams via AI Agents

    Marco Ramilli highlights Archify, an open-source skill for coding agents like Claude Code, Cursor, and Codex that turns codebases or system concepts into interactive HTML diagrams.

    1.1kbookmarks80.3kviews

    AI & LLMs· Tool

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.