cathrynlavery/diagram-design: 29 editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop.

In a significant update to the diagram design capabilities for Claude Code, version 2.0 introduces a new feature called the Loop, which utilizes flywheels with a shared-memory hub. This enhancement allows for more dynamic interactions within diagrams, with dashed lines indicating write-backs. The subsequent version, 2.3, adds semantic system patterns and optional accessible motion, while maintaining static output as the default setting. This progression reflects a commitment to improving both functionality and accessibility in diagram creation.

The tool now boasts 27 distinct visual types, which can be utilized by Claude Code, Codex, and Pi. A key feature of these types is that semantic patterns describe behavior independently from layout. This means that elements such as queues, policy traces, or trust boundaries can leverage existing visual types without the need to increase the overall type count. The default output remains static HTML, but there is an option for motion to be included in ordered explanations. Furthermore, the skill can redraw existing diagrams from draw.io or Mermaid formats, allowing users to specify the desired format, size, and detail level.

The motivation behind developing this skill stems from personal experiences with diagram creation. The creator, Cathryn Lavery, noted that previous attempts to generate diagrams through Claude often resulted in generic designs that did not align with her brand. This led to time-consuming efforts in design software like Figma or, at times, opting to forgo diagrams altogether. To address this issue, Lavery created a skill that produces high-quality diagrams that can be tailored to match a user’s brand within a minute by analyzing their website.

Features and Functionality

The new skill emphasizes the importance of quality in diagram creation, adhering to the principle that the highest-quality move is often deletion. Each node in a diagram is carefully considered for its relevance, with accent colors reserved for the most critical elements that should capture the reader's attention. The targeted density for visual elements is set at 4 out of 10, ensuring clarity and focus.

All 27 visual types are available in three static variants: minimal light, minimal dark, and full-editorial. These can be opened directly in a web browser without the need for a build step, JavaScript, or external image dependencies. Users can explore a live gallery of these diagrams, which showcases the various styles and formats available.

To keep users updated, the skill allows for auto-updates through a simple command, ensuring that the latest features and improvements are readily accessible. For organizations utilizing Claude Cowork, a private or internal repository is required to mirror the public repository and enable automatic synchronization of updates.

The skill also provides a seamless onboarding experience, pulling branding elements directly from a user's website. This includes adapting the background color of diagrams to match the site’s paper color, using the call-to-action color as the accent, and applying the body font stack for node labels. This level of customization ensures that diagrams are not just functional but also visually aligned with the user's brand identity.

Accessibility and Semantic Design

Accessibility is a crucial aspect of the new diagram design skill. Each diagram template includes inline SVG with accessible names and descriptions, ensuring compliance with web accessibility standards. The skill verifies color contrast to meet WCAG AA standards, proposing adjustments when necessary to enhance readability. This attention to detail reflects a growing awareness of the importance of inclusivity in digital design.

For users who prefer manual control over their design tokens, the skill allows customization through a dedicated style guide file. This ensures that any changes made are respected by all 27 diagram types and related components, providing flexibility for users who wish to maintain a unique design aesthetic.

The skill is designed to prioritize behavior over layout, selecting semantic patterns first and visual types second. This approach allows for a more logical structuring of diagrams, particularly when dealing with complex relationships and interactions. Additionally, the optional motion feature enhances the user experience by providing animated elements without complicating the visual types.

Why it matters

The introduction of the diagram design skill for Claude Code represents a significant advancement in the field of digital diagramming. By offering a tool that produces high-quality, brand-aligned diagrams with a focus on accessibility, it empowers creators and technologists to communicate complex ideas more effectively. The ability to seamlessly integrate branding elements and ensure compliance with accessibility standards positions this tool as a valuable asset for professionals across various industries.

As the demand for visually engaging content continues to grow, tools like this will play a crucial role in enabling users to create compelling visual narratives that resonate with their audiences. The emphasis on semantic design and user-friendly features not only streamlines the diagram creation process but also enhances the overall quality of digital communication. This development is a testament to the evolving landscape of AI and design tools, where functionality and aesthetics converge to support the needs of modern creators.