# Universal Anti-Patterns That Suggest AI Slop in Diagrams: 12 Rules From the cathrynlavery/diagram-design System
> Discover 12 universal anti-patterns in diagrams that signal AI slop. Learn how to identify and avoid these visual flaws for better diagram design from cathrynlavery/diagram-design.
- Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design)
- Tags: best-practices
- Published: 2026-08-20
---
**The cathrynlavery/diagram-design repository defines 12 universal anti-patterns—ranging from cyan glows and blanket monospaced fonts to unmasked arrow labels—that automatically flag low-effort "AI slop" and enforce editorial visual standards.**
The `cathrynlavery/diagram-design` repository collects its diagram-quality rules inside the [`SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/SKILL.md) specification, which lists universal anti-patterns that suggest AI slop in diagrams across every visual grammar. These rules target generic, unthinking defaults that break readability, hierarchy, and design intent, regardless of whether the diagram is a flowchart, tree, or Venn diagram.
## The 12 Universal Anti-Patterns
The "Universal Anti-patterns" table in [[`skills/diagram-design/SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/SKILL.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/SKILL.md) defines the following automatic failures:
1. **Dark mode with cyan or purple glow** — Creates a false "technical" impression without conveying any actual design decision.
2. **JetBrains Mono as a blanket "dev" font** — Monospaced fonts belong to technical content such as ports, commands, and URLs. Node names should use the readable *Geist* sans-serif, while *Geist Mono* is reserved for code-like labels.
3. **Identical boxes for every node** — Erases visual hierarchy so the viewer cannot infer which elements are more important.
4. **Legend floating inside the diagram area** — Collides with nodes, obscures content, and breaks the layout's visual flow.
5. **Arrow labels with no masking rectangle** — Text bleeds through the line, making the connection hard to trace.
6. **Vertical `writing-mode` text on arrows** — Becomes unreadable; arrows should stay horizontal for legibility.
7. **Three equal-width summary cards as default** — A generic grid lacks emphasis; varying widths signals relative importance.
8. **Shadow on any element** — Shadows are deprecated in this design system; crisp borders provide clearer separation.
9. **`rounded-2xl` on boxes** — Radius should be limited to 6–10 px, or omitted entirely, to keep edges sharp and consistent.
10. **Coral on every "important" node** — Coral is reserved for one or two editorial accents; over-using it dilutes impact.
11. **Reproducing Mermaid's renderer layout** — Importing automatic spacing and routing defeats the purpose of an editorial, hand-crafted layout.
12. **Any breach of the six §6 connector rules** — Violations such as diagonal slants, overlapping labels, or misplaced masks are automatic fails; these rules guarantee a clean, traceable graph.
These patterns are universal because they apply to **all** diagram types, catching artifacts that might pass a casual review but fail the system's rigor.
## How the Anti-Patterns Fit the Architecture
### Design System Consistency
The repository's design system, defined in [[`references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/references/style-guide.md)](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md), relies on a small set of semantic tokens such as `paper`, `ink`, `muted`, and `accent`. Over-using colors like coral or adding extraneous shadows breaks the token-driven palette and makes diagrams harder to theme consistently.
### Connector Integrity
Section §6 of the [`SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/SKILL.md) document (lines 64–89) outlines six mandatory connector rules. Any violation—for example, diagonal connectors or overlapping masks—is captured by the "breach of the six §6 connector rules" anti-pattern. The repository ships an automated verifier script, [`scripts/verify-geometry.py`](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/verify-geometry.py), that flags these infractions before publication.
### Typography Discipline
The type hierarchy (lines 95–101) mandates *Geist* for node names and *Geist Mono* only for technical labels. Using a generic monospaced font such as JetBrains Mono everywhere eliminates the visual distinction between narrative text and code-like data.
### Visual Hierarchy
Uniform node boxes and equal-size summary cards flatten the information architecture. The design system explicitly limits accent elements to a maximum of two and prescribes varied widths as a signal of relative importance, preventing the generic "AI slop" look of undifferentiated elements.
## Code Examples: Violations vs. Correct SVG
### Arrow Labels Without a Mask
An unmasked label bleeds through the connector line. The [`primitive-annotation.md`](https://github.com/cathrynlavery/diagram-design/blob/main/primitive-annotation.md) reference specifies that arrow labels must sit atop an opaque masking rectangle.
```svg
WRITE
```
```svg
WRITE
```
### Shadows on Nodes
Shadows are deprecated; crisp borders provide clearer separation without visual noise.
```svg
```
```svg
```
### Over-Using Coral Accent
Coral is reserved for one or two editorial accents. Highlighting every node dilutes the signal.
```svg
```
```svg
```
## Key Files Behind the Rules
The following files collectively define, enforce, and exemplify the universal anti-patterns that suggest AI slop in diagrams:
- **[`skills/diagram-design/SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/SKILL.md)** — Master specification containing the "Universal Anti-patterns" table and the full design rule set.
- **[`skills/diagram-design/references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md)** — Token-driven color palette, typography, and spacing rules.
- **[`scripts/verify-geometry.py`](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/verify-geometry.py)** — Automated checker that enforces connector rules and catches infractions such as missing label masks or diagonal connectors.
- **[`skills/diagram-design/references/primitive-annotation.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/primitive-annotation.md)** — Correct markup for arrow-label masks and annotation primitives.
- **[`skills/diagram-design/references/semantic-patterns.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/semantic-patterns.md)** — Lists the six connector rules (§6) underlying the connector-integrity anti-pattern.
## Summary
- The `cathrynlavery/diagram-design` repository defines **12 universal anti-patterns** that flag AI slop in any diagram type.
- Violations include generic aesthetics such as **cyan glows**, **blanket monospace fonts**, **identical node boxes**, **unmasked arrow labels**, and **breaches of the six §6 connector rules**.
- The system enforces these rules through semantic design tokens, mandatory connector geometry, and automated verification via [`scripts/verify-geometry.py`](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/verify-geometry.py).
- Correct SVG markup requires **opaque label masks**, **crisp borders instead of shadows**, and **strict limits on accent colors** like coral.
## Frequently Asked Questions
### What is "AI slop" in diagram design?
"AI slop" refers to generic, low-effort visual artifacts produced by naive generation tools that lack editorial intent. In the `cathrynlavery/diagram-design` system, this includes default glows, uniform node sizing, and unthinking font choices that undermine readability and hierarchy.
### How does the repository enforce these universal anti-patterns?
Enforcement happens at three levels: the [`SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/SKILL.md) specification documents the rules, the [`style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/style-guide.md) defines the semantic tokens, and the [`scripts/verify-geometry.py`](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/verify-geometry.py) script automatically flags connector violations such as diagonal slants and missing label masks.
### Why is JetBrains Mono considered an anti-pattern for node names?
According to the typography rules in [`SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/SKILL.md) (lines 95–101), monospaced fonts are reserved for technical labels such as ports and URLs. Node names should use the *Geist* sans-serif to maintain visual distinction between narrative content and code-like data.
### Can these anti-patterns apply to Mermaid-generated diagrams?
Yes. One explicit anti-pattern is **reproducing Mermaid's renderer layout**, because importing automatic spacing and routing contradicts the system's goal of hand-crafted, editorial layouts. The rules are universal and apply regardless of the generator used.