diagram-design: Diagramming Skill for Claude Code and Codex

X postDan McAteerTool

Dan McAteer highlights the 'diagram-design' skill, allowing developers using Codex and Claude Code to generate 39 different diagram types.

Key points

  1. The 'diagram-design' skill adds diagramming capabilities to Codex and Claude Code.
  2. According to Dan McAteer, it supports 39 different diagram types that produce high-quality visual results.
  3. A link to access and try the skill was provided in the author's thread.

Why it matters

Creating architecture and process diagrams directly inside coding agents saves developers from context-switching between terminals and standalone visual tools.

Analysis

Generating diagrams from code often produces tangled, unreadable layouts. Skills tailored for developer agents like Claude Code and Codex streamline visual documentation within the regular development environment. Community discussion notes the value of clean architecture visualizations, while pointing out that editable underlying formats and predictable regeneration during code updates remain crucial.

Original post

Dan McAteer

@daniel_mac8 · 9 September 2026

Oh boy. This is amazingly cool. Very happy I found this. ‘diagram-design’ skill for Codex & Claude Code. Create 39 different diagrams types that are actually good. t.co/Fi0z7ipcDz

686 likes14 replies1.2k bookmarks52.1k views

View on X
More posts in the thread (1)
  1. Try ‘diagram-design’: t.co/Ge2qpTVcLG
Selected replies (5)
  • @JustJorshin @daniel_mac8 Does it pick up the diagram skill when you just describe what you need, or do you have to name it? That's the difference between a handy shortcut and something I'd forget I installed.
  • @gurtej__gill_ @daniel_mac8 Finally clean Sankey diagrams without wrestling raw mermaid syntax
  • @TannerPowell @daniel_mac8 I don’t see fluffer(?)
  • @nickgraynews @daniel_mac8 Is that the peptide pharmacy trophy wife girl who made that skill? cc @cathrynlavery
  • @DGlushakov41949 @daniel_mac8 Keeping the visual and the code in the same working context could save a lot of back-and-forth. If it can update architecture diagrams cleanly as the code changes, even better.

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.

  • X post:Trending GitHub Repositories

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

    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.

    1.2kbookmarks86.3kviews

    AI & LLMs· Tool

  • 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

  • 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

  • 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

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.