27-Type Diagram Auto-Generation Skill for Claude Code Released

AFFILIATE_PRODUCTS:

According to a post by cathrynlavery on GitHub Trending, the diagram generation skill “diagram-design” for AI coding assistants has been released. It works on three platforms—Claude Code, Codex, and Pi—and automatically generates 27 types of editorial-quality diagrams customized to your brand.

Development Background and Challenges

The author, cathrynlavery, runs littlemight.com and also handles BestSelf.co. According to the author, whenever they created technical architecture sketches, flowcharts, pyramid diagrams, etc., what AI returned were generic rounded-box diagrams. Since they looked completely different from the site’s design, they were forced to choose between fighting for 30 minutes in Figma or abandoning the diagram altogether.

To solve this burden, they developed a skill for Claude Code. Unlike conventional generic AI diagram generation, it claims editorial quality. Nodes have set meanings, and accent colors are used only for one or two elements the reader should look at first. The target information density is set to 4/10.

27 Diagram Types

Architecture, Flowchart, Sequence, State Machine, ER Data Model, Timeline, Swimlane, Quadrant, Nested, Tree, Org Chart, Venn, Layer Stack, Pyramid/Funnel, Consultant 2×2, Radar/Spider, Loop, IT Current-State, High-Level, Bar Chart, Line Chart, Gantt, Scatter Plot, Process, Medallion, Data Flow, and DP Security Matrix—27 types in total.

Each type is output in three patterns: minimal light, minimal dark, and full-editorial. The generated diagrams can be opened directly in a browser without build steps, JavaScript, or external images.

Automatic Brand Matching

The biggest feature is the ability to load a website and apply its brand colors and fonts to each diagram in 60 seconds. It automatically ensures consistency with the existing site design. If you already have diagrams created in draw.io or Mermaid, specifying the source redraws them in the desired format, size, and level of detail.

Installation

For Pi, install with the “pi install” command and apply it with “/reload”. For Claude Code, you can add it from the plugin marketplace with “/plugin marketplace add cathrynlavery/diagram-design”. For Claude Cowork, the procedure is to sync and install it as a plugin from the customization directory.

Editorial Opinion

In the short term, the release of this skill is a sign that AI coding assistants are accelerating their encroachment not only into code generation but also into documentation and visualization. As an example of the practicality of the Claude Code plugin ecosystem, it could influence other developers.

In the long term, it may become standard for AI agents to natively possess diagram generation skills. The quality standard for technical documentation could be raised across the board, and the division of roles between designers and engineers is likely to change.

What is at issue is whether the quality of automatically generated diagrams can be maintained consistently across diverse contexts. In addition, verification data will be needed in the future to determine how accurately the automatic brand matching actually delivers results.

References

• “cathrynlavery /

  diagram-design", by **cathrynlavery** — GitHub Trending, 2026-08-13 (ARR)

• Source URL: https://github.com/cathrynlavery/diagram-design