# diagram-design | Cathryn Lavery | Knowledge Base | Instagit 29 editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop. GitHub Stars: 14.7k Repository: https://github.com/cathrynlavery/diagram-design --- ## Articles ### [What Is the Difference Between Light, Dark, and Full-Editorial Variants in Diagram-Design?](/cathrynlavery/diagram-design/difference-light-dark-full-editorial-variants) Understand the differences between light, dark, and full-editorial variants in diagram-design. Explore how these variants offer distinct visual styles while maintaining identical underlying data for clarity and consistency. - Tags: deep-dive - Published: 2026-09-13 ### [How to Create a New Diagram Type in diagram-design: A Step-by-Step Guide](/cathrynlavery/diagram-design/create-new-diagram-type-reference-pattern) Learn to create a new diagram type in diagram-design. Follow this guide to register, implement parsers, and update the export registry following existing patterns for seamless integration. - Tags: how-to-guide - Published: 2026-09-13 ### [Diagram-Design Animation Modes: A Complete Guide to None, Reveal, Step, and Loop](/cathrynlavery/diagram-design/four-animation-modes-accessibility-contract) Explore Diagram Design's four animation modes: none, reveal, step, and loop. Understand their accessibility contract, ensuring diagrams are available for all users before motion. - Tags: deep-dive - Published: 2026-09-13 ### [Progressive Loading Architecture in diagram-design: On-Demand File Loading Explained](/cathrynlavery/diagram-design/progressive-loading-architecture-diagram-design) Learn about progressive loading architecture in diagram-design. Discover how SKILL.md loads at startup and other files are fetched on-demand for efficient performance. - Tags: architecture - Published: 2026-09-13 ### [How to Add the Sketchy/Hand-Drawn Filter Primitive to a Diagram in Diagram-Design](/cathrynlavery/diagram-design/add-sketchy-hand-drawn-filter-primitive-diagram) Learn how to add the sketchy hand-drawn filter primitive to your diagrams in Diagram-Design. Apply a wobbly stroke effect easily to enhance your graphics. - Tags: how-to-guide - Published: 2026-09-13 ### [How Excalidraw Import Handles Scene Parsing and Adversarial Labels in diagram-design](/cathrynlavery/diagram-design/excalidraw-import-scene-parsing-adversarial-labels) Discover how Excalidraw import in diagram-design parses scenes and neutralizes adversarial labels. Learn about size checks, geometry normalization, and secure Markdown escaping for safe diagram design. - Tags: deep-dive - Published: 2026-09-13 ### [Diagram-Design Size Presets: Complete Guide to Aspect Ratios and Export Targets](/cathrynlavery/diagram-design/different-size-presets-diagram-design-usage) Explore diagram-design size presets like doc-inline, slide-16x9, and social-og. Optimize diagrams for docs, presentations, and social media with aspect ratios and export targets. - Tags: how-to-guide - Published: 2026-09-13 ### [How to Customize Design System Tokens (Colors, Fonts, Spacing) in Diagram-Design](/cathrynlavery/diagram-design/customize-design-system-tokens-colors-fonts-spacing) Learn to customize design system tokens like colors, fonts, and spacing in diagram-design. Modify the style-guide.md file to define your visual identity and generate unique diagrams. - Tags: how-to-guide - Published: 2026-09-13 ### [Traceable Block Decomposition in Diagram-Design: A Complete Guide](/cathrynlavery/diagram-design/traceable-block-decomposition-diagram-design-usage) Learn about traceable block decomposition in Diagram-Design. Assign stable identifiers to components for audit trails and cross-references. Enhance your system design with this semantic pattern. - Tags: deep-dive - Published: 2026-09-13 ### [How the Style Guide Theming System Maps Semantic Roles to Colors in Diagram-Design](/cathrynlavery/diagram-design/style-guide-theming-map-semantic-roles-colors) Discover how the DiagramDesign style guide maps semantic roles to colors using a central lookup table. Learn how human-readable tokens link to hex values for consistent theming. - Tags: deep-dive - Published: 2026-09-13 ### [Diagram-Design Primitives: Annotation Callouts, Sketchy Filter, and Icons Explained](/cathrynlavery/diagram-design/primitives-annotation-callout-sketchy-filter-icons) Explore diagram-design primitives like annotation callouts, sketchy filters, and icons. Add editorial notes, hand-drawn styles, and scalable symbols to your diagrams with this YAML-based tool. - Tags: deep-dive - Published: 2026-09-13 ### [How the draw.io Import Process Works in Diagram-Design](/cathrynlavery/diagram-design/drawio-import-process-diagram-design) Understand the drawio import process in diagram-design. Discover the three-stage pipeline that normalizes, analyzes, and redraws diagrams for a seamless workflow. - Tags: internals - Published: 2026-09-13 ### [Universal Anti-Patterns: Distinguishing AI Slop from Editorial Diagrams in diagram-design](/cathrynlavery/diagram-design/universal-anti-patterns-ai-slop-editorial-diagrams) Distinguish AI slop from editorial diagrams in diagram design. Learn universal anti-patterns like generic boxes and unlimited colors versus strict visual languages for clarity. - Tags: best-practices - Published: 2026-09-13 ### [How to Export Diagrams to PNG and SVG with Proper Font Handling in Diagram-Design](/cathrynlavery/diagram-design/export-diagrams-png-svg-font-handling) Easily export diagrams to PNG and SVG with robust font handling in Diagram-Design. Learn to use the export command for high-quality vector and raster graphics. - Tags: how-to-guide - Published: 2026-09-13 ### [Accessibility Features Built Into SVG Diagrams in Diagram-Design: WCAG 2.1 AA Compliance](/cathrynlavery/diagram-design/accessibility-features-svg-diagrams) Discover how Diagram-Design's SVG diagrams meet WCAG 2.1 AA standards with built-in accessibility features like semantic roles, descriptive text, and ARIA labeling. Improve your accessible diagrams. - Tags: deep-dive - Published: 2026-09-13 ### [How the Client Profile System Works with Project Markers in diagram-design](/cathrynlavery/diagram-design/client-profile-system-project-markers) Discover how the diagram-design client profile system utilizes project markers to load custom client profiles, overriding defaults for personalized workflows. - Tags: how-to-guide - Published: 2026-09-13 ### [Understanding Complexity Budgets for Different Diagram Types in diagram-design](/cathrynlavery/diagram-design/complexity-budgets-diagram-types) Discover complexity budgets for diagram-design diagrams. Learn about drawable node and edge limits, plus parsing caps for nodes, edges, and file size. Optimize your diagrams now. - Tags: deep-dive - Published: 2026-09-13 ### [Animation Modes in Diagram-Design: A Complete Guide to Accessible Motion](/cathrynlavery/diagram-design/animation-modes-diagram-design-accessibility) Explore four animation modes in diagram-design: none, reveal, step, and loop. Ensure accessibility and comprehension with reduced-motion preferences and keyboard navigation. - Tags: deep-dive - Published: 2026-09-13 ### [How Mermaid Imports Are Redrawn into the Editorial Style System in diagram-design](/cathrynlavery/diagram-design/mermaid-import-redraw-diagrams-editorial-style-system) Learn how Mermaid imports are redrawn into the editorial style system in diagram-design. Discover how raw Mermaid source becomes a styled diagram using internal conventions, not direct rendering. - Tags: internals - Published: 2026-09-13 ### [Understanding the Four Dials (Format, Size, Detail, Audience) in the Diagram-Design Import Process](/cathrynlavery/diagram-design/four-dials-import-process-format-size-detail-audience) Master the four dials format size detail audience in cathrynlavery/diagram-design import process. Control output type dimensions density and labeling depth for better diagrams. - Tags: deep-dive - Published: 2026-09-13 ### [How to Configure Brand Onboarding to Extract Colors from a Website URL in Diagram-Design](/cathrynlavery/diagram-design/configure-brand-onboarding-extract-colors-website-url) Learn to configure brand onboarding in diagram-design. Extract website colors via URL using the agent-browser navigate command and map them to semantic roles in style-guide.md. - Tags: how-to-guide - Published: 2026-09-13 ### [How cathrynlavery/diagram-design's Semantic Pattern Routing System Maps Behavior to Visual Types](/cathrynlavery/diagram-design/how-does-semantic-pattern-routing-system-work) Discover how cathrynlavery/diagram-design's semantic pattern routing system maps behavior to visual types by evaluating requests and selecting predefined patterns from the routing table. - Tags: deep-dive - Published: 2026-09-13 ### [How to Customize Accent Colors and Focal Elements in Instagit Diagrams](/cathrynlavery/diagram-design/customize-accent-colors-focal-elements) Learn to customize accent colors and focal elements in Instagit diagrams. Set focal elements to true in JSON data and define your accent color in style-guide.md for unique designs. - Tags: how-to-guide - Published: 2026-09-12 ### [How the Traceable Block Decomposition Pattern Works in Diagram Design](/cathrynlavery/diagram-design/traceable-block-decomposition-pattern) Explore the traceable block decomposition pattern to model systems as hierarchical blocks. Learn how stable identifiers and data attributes link diagrams to code for precise traceability. - Tags: deep-dive - Published: 2026-09-12 ### [How to Validate Generated Diagrams with self_check.py in the Diagram-Design Repository](/cathrynlavery/diagram-design/validate-diagrams-self-check-py) Validate generated diagrams using self_check.py in the diagram-design repository. This script enforces security, accessibility, and motion rules, ensuring diagram integrity with detailed error reporting. - Tags: how-to-guide - Published: 2026-09-12 ### [How to Troubleshoot Rendering Issues with lint-render.py](/cathrynlavery/diagram-design/troubleshoot-rendering-issues-lint-render-py) Troubleshoot rendering issues with lint-render.py, a headless Chromium linter for HTML examples. Detect clipping, overflow, and missing assets by rendering pages and comparing screenshots. - Tags: how-to-guide - Published: 2026-09-12 ### [How to Add Custom Icons to Architecture Diagrams in Diagram Design](/cathrynlavery/diagram-design/add-custom-icons-architecture-diagrams) Easily add custom icons to architecture diagrams. Create monochrome SVGs, register them in the primitive icons catalog, and reference them in your components. - Tags: how-to-guide - Published: 2026-09-12 ### [Import Detail Level Options in diagram-design: Faithful, Balanced, and Simplified Explained](/cathrynlavery/diagram-design/import-detail-level-options) Explore diagram-design's import detail levels: faithful, balanced, and simplified. Control diagram complexity effectively with these options. - Tags: deep-dive - Published: 2026-09-12 ### [How Semantic Patterns Differ from Visual Types in Diagram Design](/cathrynlavery/diagram-design/semantic-patterns-vs-visual-types) Understand how semantic patterns differ from visual types in diagram design. Learn about abstract logical flow versus concrete graphical representation for better clarity and accessibility. - Tags: deep-dive - Published: 2026-09-12 ### [How to Apply Terminal/CLI-Window Styling to Diagrams in the Diagram Design Repository](/cathrynlavery/diagram-design/apply-terminal-cli-window-styling) Learn to apply terminal CLI window styling to diagrams using the cathrynlavery/diagram-design repository. Enhance your diagrams with a fake console UI and title bar. - Tags: how-to-guide - Published: 2026-09-12 ### [How the First-Run Style-Guide Gate Works in Diagram Design](/cathrynlavery/diagram-design/first-run-style-guide-gate) Understand the first run style guide gate in diagram design. This pre-output validation ensures accessibility and semantic rules are met before rendering. - Tags: internals - Published: 2026-09-12 ### [What Is the Complexity Budget and Its Effect on Diagram Density?](/cathrynlavery/diagram-design/complexity-budget-diagram-density) Discover the complexity budget and how it controls diagram density by limiting nodes and edges. Learn to maintain readability in your technical diagrams. - Tags: deep-dive - Published: 2026-09-12 ### [How to Apply Sketchy Hand-Drawn Styling to Diagrams in Diagram-Design](/cathrynlavery/diagram-design/apply-sketchy-hand-drawn-styling) Easily apply sketchy hand-drawn styling to your diagrams in Diagram-Design using the --style sketchy flag or API option. Transform your visuals with a unique artistic touch. - Tags: how-to-guide - Published: 2026-09-12 ### [How to Add Annotation Callout Primitives to Diagrams: A Complete Guide to Editorial Annotations](/cathrynlavery/diagram-design/add-annotation-callout-primitives) Learn to add annotation callout primitives to diagrams with this comprehensive guide. Master editorial annotations using SVG elements for clearer visuals. - Tags: how-to-guide - Published: 2026-09-12 ### [Universal Anti-Patterns to Avoid in Diagram Design](/cathrynlavery/diagram-design/universal-anti-patterns-diagram-design) Discover universal diagram design anti-patterns that reduce clarity and mislead readers. Learn how to avoid common pitfalls for more effective diagrams. - Tags: best-practices - Published: 2026-09-12 ### [How to Add Optional Accessible Motion to Diagrams in Diagram-Design](/cathrynlavery/diagram-design/add-accessible-motion-diagrams) Enhance diagrams with optional accessible motion using Diagram-Design. Add CSS animations and JavaScript controls for dynamic visuals while ensuring static fallbacks for all users. - Tags: how-to-guide - Published: 2026-09-12 ### [How to Set Up Client Profiles for Multiple Brands in Diagram Design](/cathrynlavery/diagram-design/setup-client-profiles-multiple-brands) Learn how to set up client profiles for multiple brands in Diagram Design. Keep your style guides separate and organized in the `~/.diagram-design/profiles/` directory. - Tags: how-to-guide - Published: 2026-09-12 ### [How to Export Diagrams to PNG and SVG in Diagram Design](/cathrynlavery/diagram-design/export-diagrams-png-svg) Easily export diagrams to PNG and SVG formats using Diagram Design's built-in slash commands for vector or high-resolution raster output. Learn how now. - Tags: how-to-guide - Published: 2026-09-12 ### [How to Import and Redraw Excalidraw Sketches Using Diagram-Design](/cathrynlavery/diagram-design/import-redraw-excalidraw-sketches) Learn how to import and redraw Excalidraw sketches with Diagram-Design. Our pipeline extracts semantic meaning, applies constraints, and redraws your sketches into clean, production-ready diagrams. - Tags: how-to-guide - Published: 2026-09-12 ### [How to Import and Redraw Mermaid Diagrams with Diagram-Design](/cathrynlavery/diagram-design/import-redraw-mermaid-diagrams) Easily import and redraw Mermaid diagrams using Diagram Design. Securely convert your diagrams into SVG, PNG, and HTML formats for editorial use. Get started today. - Tags: how-to-guide - Published: 2026-09-12 ### [How to Import and Redraw draw.io Diagrams Using Diagram-Design](/cathrynlavery/diagram-design/import-redraw-drawio-diagrams) Easily import and redraw draw.io diagrams with Diagram-Design. Extract semantic content and rebuild layouts, ignoring original geometry and styling. Learn how today! - Tags: how-to-guide - Published: 2026-09-12 ### [How to Onboard a Brand from a Website URL into Diagram-Design](/cathrynlavery/diagram-design/onboard-brand-from-website-url) Effortlessly onboard a brand from a website URL into Diagram-Design. Our tool extracts visual styles automatically, creating branded diagrams in five stages for a seamless workflow. - Tags: how-to-guide - Published: 2026-09-12 ### [When to Use Semantic Pattern Routing for Diagrams: 5 Critical Scenarios](/cathrynlavery/diagram-design/when-to-use-semantic-pattern-routing) Discover when to use semantic pattern routing for diagrams. Learn 5 critical scenarios for conveying behavior, state changes, security, and domain primitives effectively. Optimize your diagrams today. - Tags: how-to-guide - Published: 2026-09-12 ### [How Semantic Pattern Routing Works in diagram-design: From Intent to Visualization](/cathrynlavery/diagram-design/how-does-semantic-pattern-routing-work) Discover how semantic pattern routing translates user intent into visual diagrams. Learn its decision mechanism, pattern mapping, and layout selection in diagram design. - Tags: deep-dive - Published: 2026-09-12 ### [Gallery index.html Tabbed Interface Architecture Explained](/cathrynlavery/diagram-design/what-is-the-architecture-of-the-galleryindexhtml-tabbed-interface) Explore the three-layer architecture of the gallery tabbed interface in cathrynlavery/diagram-design. Learn how CSS presentation, JS state, and event handlers manage diagram selection and navigation. - Tags: architecture - Published: 2026-09-11 ### [How Import Filters Transform Source Content During Diagram Redrawing](/cathrynlavery/diagram-design/how-do-import-filters-transform-source-content-during-diagram-redrawing) Discover how cathrynlavery/diagram-design import filters transform source content through sanitisation, normalization, and tracking. Convert Mermaid, Excalidraw, and Draw.io to SVG for redrawing. - Tags: internals - Published: 2026-09-11 ### [How `self_check.py` Validates Diagram HTML Output: A Complete Technical Breakdown](/cathrynlavery/diagram-design/how-is-theselfcheckpy-output-validation-implemented) Explore how self_check.py validates diagram HTML output. This script ensures security, SVG accessibility, and motion control compliance in the cathrynlavery/diagram-design repository. - Tags: internals - Published: 2026-09-11 ### [How the Output-Spec Format/Size/Detail Degradation Ladder Works in Diagram-Design](/cathrynlavery/diagram-design/how-does-the-outputspec-formatsizedetail-degradation-ladder-work) Understand the output-spec format size detail degradation ladder in diagram-design. This six-step process automatically reduces diagram complexity to fit your budget. - Tags: deep-dive - Published: 2026-09-11 ### [Technical Differences Between Light, Dark, and Full Diagram Variants](/cathrynlavery/diagram-design/what-are-the-technical-differences-between-the-light-dark-and-full-diagram-variants) Explore the technical differences between light, dark, and full diagram variants. Understand how each rendering option offers unique features for your design needs. - Tags: deep-dive - Published: 2026-09-11 ### [Icon Set Architecture and Integration in Diagram-Design: A Technical Deep Dive](/cathrynlavery/diagram-design/what-is-the-architecture-of-the-icon-set-and-how-are-icons-integrated) Explore the Diagram-Design icon set architecture. Learn how SVGs are fetched, normalized, and cached for seamless integration using a centralized manifest and currentColor. - Tags: deep-dive - Published: 2026-09-11 ### [How the Style Guide Token System Maps to Semantic Roles in Diagram-Design](/cathrynlavery/diagram-design/how-does-the-style-guide-token-system-map-to-semantic-roles-in-diagram-design) Discover how the style guide token system in DiagramDesign maps semantic roles like paper and ink to color values for automatic light and dark mode switching without altering diagrams. - Tags: deep-dive - Published: 2026-09-11 ### [What Verification Scripts Are Run in CI: Complete Guide to diagram-design Testing](/cathrynlavery/diagram-design/what-verification-scripts-are-run-in-ci-and-what-is-their-structure) Explore the cathrynlavery/diagram-design CI pipeline and discover its 30+ verification scripts. Learn about their structure and role in validating diagram generation and more. - Tags: how-to-guide - Published: 2026-09-11 ### [How the Diagram-Design Animation System Handles Reduced-Motion Accessibility](/cathrynlavery/diagram-design/how-does-the-animation-system-in-diagram-design-handle-reducedmotion-accessibility) Learn how Diagram-Design's animation system respects reduced-motion accessibility by automatically disabling animations for users who prefer less motion, with manual control available. - Tags: accessibility - Published: 2026-09-11 ### [Semantic Patterns vs. Visual Types in Diagram-Design: Understanding Meaning and Layout](/cathrynlavery/diagram-design/what-are-semantic-patterns-and-how-do-they-differ-from-visual-types-in-diagram-design) Discover semantic patterns vs visual types in diagram-design. Understand meaning and layout to create effective diagrams. Learn how semantic patterns guide visual types for better design. - Tags: deep-dive - Published: 2026-09-11 ### [How Export-Registry JSON Sidecar Generation Works in Diagram‑Design](/cathrynlavery/diagram-design/explain-the-exportregistry-json-sidecar-generation-process) Learn how export-registry JSON sidecar generation creates deterministic metadata files by parsing HTML with data-block-id attributes using the --registry flag in diagram-design. - Tags: internals - Published: 2026-09-11 ### [How the Progressive Loading Mechanism for SKILL.md References Works in Diagram Design](/cathrynlavery/diagram-design/how-does-the-progressive-loading-mechanism-for-skillmd-references-function) Learn how the progressive loading mechanism in SKILL.md references works. It safely resolves links, loads content on-demand, and caches results for efficient diagram design validation. - Tags: internals - Published: 2026-09-11 ### [How to Onboard Brand Color Extraction in Diagram-Design: A Complete Technical Guide](/cathrynlavery/diagram-design/what-is-the-technique-for-onboarding-brand-color-extraction-in-diagram-design) Learn how Diagram Design automates brand color extraction by scraping CSS and parsing design tokens. This guide shows you how to onboard brand colors for seamless adoption. - Tags: how-to-guide - Published: 2026-09-11 ### [How the Client Profile Marker Resolution System Works in Diagram Design](/cathrynlavery/diagram-design/how-does-the-client-profile-marker-resolution-system-operate) Learn how the client profile marker resolution system works in diagram design. Discover how .diagram-design files prevent workspace clashes and ensure effective style guide application. - Tags: deep-dive - Published: 2026-09-11 ### [How lint-render.py Detects Visual Clipping in SVG Diagrams](/cathrynlavery/diagram-design/what-is-the-functionality-of-the-lintrenderpy-script-for-clipping-detection) Discover how lint-render.py detects visual clipping in SVG diagrams by rendering SVGs, releasing constraints, and performing pixel diffing for accurate results. - Tags: how-to-guide - Published: 2026-09-11 ### [How Label Placement Geometric Verification Prevents Clipping in Diagrams](/cathrynlavery/diagram-design/how-does-label-placement-geometric-verification-prevent-clipping-in-diagrams) Learn how label placement geometric verification prevents clipping in diagrams by analyzing SVG paint order to ensure label masks don't overlap nodes. - Tags: how-to-guide - Published: 2026-09-11 ### [Waterfall Running Total Verification Mechanism in Diagram-Design](/cathrynlavery/diagram-design/describe-the-waterfall-running-total-verification-mechanism) Learn about the waterfall running total verification mechanism in diagram design. This nine-step pipeline ensures SVG waterfall charts maintain mathematical integrity by validating declared data values against rendered geometry. - Tags: how-to-guide - Published: 2026-09-11 ### [Treemap Geometric Verification: How Diagram-Design Ensures Area Accuracy](/cathrynlavery/diagram-design/how-is-treemap-geometric-verification-implemented-to-ensure-area-accuracy) Learn how cathrynlavery/diagram-design ensures treemap geometric verification for area accuracy using relative error calculations and glyph-width budgeting. Discover the Python verifier's techniques. - Tags: deep-dive - Published: 2026-09-11 ### [How Diagram-Design Parses Excalidraw Import Scenes: A 10-Step Pipeline](/cathrynlavery/diagram-design/what-is-the-process-for-parsing-excalidraw-import-scenes-in-diagram-design) Discover how Diagram-Design parses Excalidraw import scenes through a 10-step pipeline. Learn about the untrusted JSON treatment and intermediate representation extraction process. - Tags: internals - Published: 2026-09-11 ### [How the Mermaid Import Parser Handles Edge Cases in Diagram Generation](/cathrynlavery/diagram-design/how-does-the-mermaid-import-parser-handle-edge-cases-in-diagram-generation) Discover how the Mermaid import parser handles edge cases in diagram generation. Learn about its ten-phase pipeline, strict boundaries, and efficient resource management. - Tags: internals - Published: 2026-09-11 ### [How the Draw.io Import Extraction Process Works Internally in the Diagram-Design Repository](/cathrynlavery/diagram-design/how-does-the-drawio-import-extraction-process-work-internally) Discover the draw.io import extraction process internally. Learn how this four-stage pipeline decodes, parses, analyzes, and renders draw.io files into an intermediate representation and Markdown report. - Tags: internals - Published: 2026-09-11 ### [Understanding the Block Registry Metadata System in Diagram-Design](/cathrynlavery/diagram-design/explain-the-block-registry-metadata-system-in-diagram-design) Explore diagram-design's block registry metadata system. Discover how it catalogs reusable components for CLI export, validation, and marketplace publishing. - Tags: deep-dive - Published: 2026-09-11 ### [Motion Controller Contract in diagram-design: Validation Rules and Canonical Implementation](/cathrynlavery/diagram-design/what-is-the-motion-controller-contract-and-how-is-it-verified-in-diagram-design) Explore the motion controller contract in diagram design. Learn how strict HTML schema validation ensures consistent, accessible animated diagrams with canonical JavaScript controllers. - Tags: deep-dive - Published: 2026-09-11 ### [How Semantic Pattern Routing Works in Diagram‑Design: A Complete Technical Guide](/cathrynlavery/diagram-design/how-does-the-semantic-pattern-routing-system-work-in-diagram-design) Learn how semantic pattern routing in diagram-design works. This technical guide explains the decision engine that maps behavioral cues to visual layouts for effective diagram creation. - Tags: deep-dive - Published: 2026-09-11 ### [Where to Find Reference Files for Each Diagram Type in Diagram Design](/cathrynlavery/diagram-design/where-can-i-find-reference-files-for-each-specific-diagram-type-in-diagram-design) Locate diagram reference files in the skills diagram-design references directory. Find grammar, layout rules, and styling tokens for each diagram type. - Tags: api-reference - Published: 2026-09-10 ### [How Many Distinct Visual Diagram Types Does Diagram Design Support?](/cathrynlavery/diagram-design/how-many-distinct-visual-diagram-types-does-diagram-design-support) Explore Diagram Design's extensive capabilities. Discover the 40 distinct visual diagram types supported, meticulously documented for your convenience. - Tags: getting-started - Published: 2026-09-10 ### [Source-Level Style Checking for Diagram Design Anti-Patterns: Complete Guide](/cathrynlavery/diagram-design/which-script-performs-source-level-style-checking-for-diagram-design-anti-patterns) Discover the scripts/lint-skin.py script in the cathrynlavery/diagram-design repository for comprehensive source-level style checking. Prevent Diagram Design anti-patterns effectively. - Tags: how-to-guide - Published: 2026-09-10 ### [AI Slop Patterns Explicitly Banned by Diagram Design: Complete Taxonomy List](/cathrynlavery/diagram-design/what-are-the-ai-slop-patterns-explicitly-banned-by-diagram-design) Diagram Design explicitly bans eight AI slop patterns like type-llm and type-gpt. Discover the complete taxonomy list to ensure your diagrams meet repository quality standards. - Tags: deep-dive - Published: 2026-09-10 ### [Compensating Layers Pattern: Visual Routing and Constraints in Diagram Design](/cathrynlavery/diagram-design/what-diagram-type-does-the-compensating-layers-pattern-route-to-and-what-are-its-constraints) Explore the compensating layers pattern for diagram design. Learn its Layer-stack visual type and constraints for clear residual risk propagation. - Tags: deep-dive - Published: 2026-09-10 ### [Secure Paved Road Pattern: Architecture Visual Type and Design Constraints](/cathrynlavery/diagram-design/what-diagram-type-does-the-secure-paved-road-pattern-route-to-and-what-are-its-constraints) Explore the Secure Paved Road pattern's Architecture visual type and its design constraints including trust zones, components, paths, and privileged gates. Learn more today. - Tags: architecture - Published: 2026-09-10 ### [Fan-In Queue/Bottleneck Pattern: Diagram Routing and Budget Constraints](/cathrynlavery/diagram-design/what-diagram-type-does-the-fan-in-queue-bottleneck-pattern-route-to-and-what-are-its-budget-constraints) Explore the fan-in queue/bottleneck pattern, learn its default Data flow visual type, and understand its strict budget constraints for efficient diagram routing. Optimize your designs now. - Tags: tutorial - Published: 2026-09-10 ### [The Eight Behavioral Patterns Defined in Diagram Design's semantic-patterns.md](/cathrynlavery/diagram-design/what-are-the-eight-behavioral-patterns-defined-in-diagram-designs-semantic-patterns.md) Explore eight behavioral patterns in Diagram Design's semantic-patterns.md, including fan-in queues and stage frameworks. Learn to separate system semantics from visual layout for standardized documentation. - Tags: deep-dive - Published: 2026-09-10 ### [Type-Specific Complexity Budgets for Sequence and Flowchart Diagrams](/cathrynlavery/diagram-design/how-do-type-specific-complexity-budgets-vary-for-sequence-and-flowchart-diagrams) Discover type-specific complexity budgets for sequence and flowchart diagrams. Learn how strict caps on lifelines, messages, and nodes ensure clarity and maintainability in your designs. - Tags: deep-dive - Published: 2026-09-10 ### [Universal Complexity Budgets for Nodes, Arrows, and Accent Elements in Diagram Design](/cathrynlavery/diagram-design/what-are-the-universal-complexity-budgets-for-nodes-arrows-and-accent-elements-in-diagram-design) Discover universal complexity budgets for diagram design: 9 nodes, 12 arrows, and 2 accent elements. Maintain readability and visual density with these essential limits. - Tags: deep-dive - Published: 2026-09-10 ### [Rendered Layout Checking for Diagram Design Compliance: Inside lint-render.py](/cathrynlavery/diagram-design/which-script-performs-rendered-layout-checking-for-diagram-design-compliance) Discover how lint-render.py checks diagram compliance. This script uses Playwright and headless Chromium to find clipping and layout defects missed by static analysis. - Tags: internals - Published: 2026-09-10 ### [What Are the Six Mandatory Connector Rules in Diagram Design?](/cathrynlavery/diagram-design/what-are-the-six-mandatory-connector-rules-in-diagram-design) Learn the six mandatory connector rules in diagram design for clear, professional visuals. Discover how to implement orthogonal elbows, label margins, non-overlapping routes, and more. - Tags: deep-dive - Published: 2026-09-10 ### [How Component Types Are Semantically Styled in Diagram Design Nodes](/cathrynlavery/diagram-design/how-are-different-component-types-semantically-styled-in-diagram-design-nodes) Discover how Diagram Design semantically styles nodes using the kind attribute for consistent visual meaning across diagrams. Learn about standard focal and external component types. - Tags: deep-dive - Published: 2026-09-10 ### [Diagram Design Grid System Dimensions: Complete Guide to Coordinates, Widths, and Gaps](/cathrynlavery/diagram-design/what-are-the-dimensions-of-coordinates-widths-and-gaps-in-the-diagram-design-grid-system) Master the Diagram Design grid system. Understand coordinates, widths, and gaps based on the 4px grid and Layout & Spacing specs for consistent diagrams. - Tags: deep-dive - Published: 2026-09-10 ### [Typography Structure in Diagram Design Diagrams: The Three-Font System Explained](/cathrynlavery/diagram-design/how-is-typography-structured-in-diagram-design-diagrams) Explore the three-font system for typography structure in Diagram Design. Learn how a strict serif, sans-serif, and monospace setup ensures visual consistency in SVG diagrams. - Tags: deep-dive - Published: 2026-09-10 ### [Diagram Design Light Mode Hex Codes: Primary Color Palette Reference](/cathrynlavery/diagram-design/what-are-the-hex-codes-for-the-primary-colors-in-diagram-designs-light-mode) Find Diagram Design light mode primary color hex codes. Discover hex codes for ink, primary accents, and brand metadata to enhance your diagrams. - Tags: api-reference - Published: 2026-09-10 ### [Where to Find the Single Source of Truth for Diagram Design Tokens](/cathrynlavery/diagram-design/where-can-i-find-the-single-source-of-truth-for-diagram-design-tokens) Discover the single source of truth for Diagram Design tokens in the style-guide.md file. Access all colors, typography, and semantic tokens for consistent diagram generation. - Tags: getting-started - Published: 2026-09-10 ### [The Four Distinct Layers in the Diagram Design System Architecture](/cathrynlavery/diagram-design/what-are-the-four-distinct-layers-in-the-diagram-design-system-architecture) Explore the four distinct layers in the Diagram Design system architecture: CLI, Skill, Renderer, and Plugin. Understand how each layer isolates concerns in the cathrynlavery/diagram-design repo. - Tags: architecture - Published: 2026-09-10 ### [What Is the Target Information Density for Diagram Design Diagrams?](/cathrynlavery/diagram-design/what-is-the-target-information-density-for-diagram-design-diagrams) Understand the target information density for Diagram Design at 4/10. Learn how this standard ensures technically complete diagrams without needing extra documentation. - Tags: deep-dive - Published: 2026-09-10 ### [Editorial Quality Standards for Diagrams Generated by Diagram Design: The Complete Style Guide](/cathrynlavery/diagram-design/what-are-the-editorial-quality-standards-for-diagrams-generated-by-diagram-design) Discover Diagram Design's editorial quality standards. Learn about visual language, color tokens, grid alignment, and typography for polished diagrams. - Tags: best-practices - Published: 2026-09-10 ### [How Diagram Design Integrates with Claude Code and Other Agent Skills](/cathrynlavery/diagram-design/how-does-diagram-design-integrate-with-claude-code-and-other-agent-skills) Discover how Diagram Design integrates seamlessly with Claude Code and other agent skills via synchronized manifests. Learn how it eliminates code duplication and provides consistent commands across platforms. - Tags: deep-dive - Published: 2026-09-10 ### [Block Registry Structural Gate: Validating data-block-id and Parent Chain Integrity in Diagram Design](/cathrynlavery/diagram-design/block-registry-structural-gate-data-block-id-parent-chain-validation) Enhance diagram design with the block registry structural gate. Validate data-block-id and parent chain integrity for robust SVG files in cathrynlavery/diagram-design. - Tags: deep-dive - Published: 2026-09-09 ### [How to Contribute Diagram Examples Using lint-skin.py and CI Validation Gates](/cathrynlavery/diagram-design/contribute-diagram-examples-lint-skin.py-ci-gates) Learn to contribute diagram examples to cathrynlavery/diagram-design. Validate HTML locally with lint-skin.py and pass CI gates for successful pull requests. - Tags: how-to-guide - Published: 2026-09-09 ### [Understanding Brand Profile Resolution Order in Diagram Design: Project Markers vs. Shared Library](/cathrynlavery/diagram-design/brand-profile-resolution-order-project-markers-shared-library) Learn how Diagram Design resolves brand profiles prioritizing project markers over shared libraries for workspace isolation. Understand the four-layer hierarchy. - Tags: deep-dive - Published: 2026-09-09 ### [Adversarial Test Cases for the draw.io Import Validation Path](/cathrynlavery/diagram-design/adversarial-test-cases-drawio-import-validation-path) Discover adversarial test cases for draw.io import validation. Secure your diagrams against Markdown injection, XXE attacks, and malformed PNG metadata with this essential guide. - Tags: testing - Published: 2026-09-09 ### [Using the Four Dials: Format, Size, Detail, and Audience for Diagram-Design Imports](/cathrynlavery/diagram-design/using-four-dials-format-size-detail-audience-imports) Master diagram-design imports with four dials: Format, Size, Detail, and Audience. Configure output, dimensions, density, and tone before redrawing for optimal results. Learn more. - Tags: how-to-guide - Published: 2026-09-09 ### [Motion Controller Security Contract and Rejected Patterns in Diagram Design](/cathrynlavery/diagram-design/motion-controller-security-contract-rejected-patterns) Explore motion controller security contracts and rejected patterns in diagram design. Learn how static-first security ensures accessibility and prevents vulnerabilities. - Tags: tutorial - Published: 2026-09-09 ### [How to Map Semantic Patterns to Nearest Visual Types in Diagram Design](/cathrynlavery/diagram-design/map-semantic-patterns-to-visual-types) Learn how to map semantic patterns to nearest visual types in diagram design. Identify meaning, select visuals, and render via CLI with this guide. - Tags: how-to-guide - Published: 2026-09-09 ### [Sankey Diagram Conservation and Geometry Gate Verification in Diagram-Design](/cathrynlavery/diagram-design/sankey-diagram-conservation-geometry-gate-verification) Diagram Design verifies Sankey diagrams using flow conservation and geometry gate validation for accurate data and visual integrity. Ensure your diagrams are correct. - Tags: deep-dive - Published: 2026-09-09 ### [How to Run self_check.py on Agent-Generated Diagram Output](/cathrynlavery/diagram-design/run-self_check.py-agent-generated-diagram-output) Easily run self_check.py on agent-generated diagram output to ensure safety and accessibility without extra installs. Validate HTML diagrams quickly with our guide. - Tags: how-to-guide - Published: 2026-09-09 ### [Treemap Area Encoding Gate and Relative Measurement Verification in Diagram Design](/cathrynlavery/diagram-design/treemap-area-encoding-gate-relative-measurement-verification) Ensure treemap accuracy with Diagram Design's verification gate. Validate area-share fidelity within 8% tolerance and confirm label/marker fit. Discover robust treemap area encoding and relative measurement verification. - Tags: deep-dive - Published: 2026-09-09 ### [WCAG Contrast Checking During Website Brand Extraction in Diagram-Design](/cathrynlavery/diagram-design/wcag-contrast-checking-website-brand-extraction) Automate WCAG contrast checking for website brand colors. Diagram-Design ensures your diagrams meet accessibility standards automatically during brand extraction. - Tags: tutorial - Published: 2026-09-09 ### [How to Create Accessible SVG Exports with `role="img"` and `aria-labelledby` in Diagram Design](/cathrynlavery/diagram-design/accessible-svg-exports-role-img-aria-labelledby) Learn to create accessible SVG exports with role="img" and aria-labelledby in Diagram Design. Ensure WCAG 2.1 AA compliance for your diagrams automatically. - Tags: how-to-guide - Published: 2026-09-09 ### [Troubleshooting Exporting Diagrams to PNG with Playwright: A Complete Guide](/cathrynlavery/diagram-design/troubleshoot-export-diagrams-png-playwright) Troubleshoot exporting diagrams to PNG with Playwright. Learn how to fix common issues with installation, fonts, and scale factors for crisp, accurate images. Get the complete guide. - Tags: how-to-guide - Published: 2026-09-09 ### [Cross-Host Plugin Manifest Architecture for Claude Code, Codex, Factory Droid, and Pi](/cathrynlavery/diagram-design/cross-host-plugin-manifest-architecture-claude-codex-factory-droid-pi) Discover the cross-host plugin manifest architecture for Claude Code, Codex, Factory Droid, and Pi. This unified system streamlines skill consumption across multiple platforms from a single source. - Tags: architecture - Published: 2026-09-09 ### [Mermaid Import Pipeline for Multi-Block Markdown and Adversarial Labels: A Complete Technical Guide](/cathrynlavery/diagram-design/mermaid-import-pipeline-multiblock-markdown-adversarial-labels) Explore the secure three-stage Mermaid import pipeline from cathrynlavery/diagram-design. Extract, sanitize, and redraw diagrams from Markdown with adversarial label normalization. Get the complete technical guide. - Tags: how-to-guide - Published: 2026-09-09 ### [Geometric Label Placement Validation Rules and CI Enforcement in Diagram Design](/cathrynlavery/diagram-design/geometric-label-placement-validation-rules-ci-enforcement) Enforce geometric label placement rules in diagram design with CI validation. Learn how scripts prevent visual clipping and integrate with GitHub Actions for robust diagram validation. - Tags: how-to-guide - Published: 2026-09-09 ### [First-Run Style Guide Gating in Diagram Design: Preventing Silent Brand Mismatches](/cathrynlavery/diagram-design/first-run-style-guide-gating-prevent-brand-mismatches) Learn about first-run style guide gating in diagram design. This method prevents silent brand mismatches by ensuring users select custom branding before generating output. - Tags: best-practices - Published: 2026-09-09 ### [How the Export Registry JSON Sidecar Captures Block Metadata](/cathrynlavery/diagram-design/export-registry-json-sidecar-capture-block-metadata) Learn how the export registry JSON sidecar captures block metadata by parsing HTML attributes into a machine readable .registry.json file. Run diagram-design export with the registry flag. - Tags: how-to-guide - Published: 2026-09-09 ### [How to Configure Optional Motion Animations with the Accessibility Contract in Diagram Design](/cathrynlavery/diagram-design/configure-motion-animations-accessibility-contract) Learn to configure optional motion animations in Diagram Design using the accessibility contract. Ensure semantic content and reduced-motion fallbacks for all users. - Tags: how-to-guide - Published: 2026-09-09 ### [Understanding the draw.io Import Pipeline and Compressed Payload Handling](/cathrynlavery/diagram-design/drawio-import-pipeline-compressed-payload-handling) Explore the draw.io import pipeline and compressed payload handling. Learn how draw.io securely processes files with decompression limits and zip bomb prevention. - Tags: deep-dive - Published: 2026-09-09 ### [Traceable Block Decomposition Pattern: Creating Traceable Diagrams in diagram-design](/cathrynlavery/diagram-design/traceable-block-decomposition-pattern-traceable-diagrams) Learn the traceable block decomposition pattern for creating traceable diagrams. This semantic pattern uses stable identifiers for auditability and compliance, letting you cite and trace each element. - Tags: deep-dive - Published: 2026-09-09 ### [How to Create and Manage Client Brand Profiles with the Marker System in Diagram Design](/cathrynlavery/diagram-design/create-manage-client-brand-profiles-marker-system) Learn to create and manage client brand profiles using the marker system in Diagram Design. Apply specific branding to workspaces automatically with this efficient workflow. - Tags: how-to-guide - Published: 2026-09-09 ### [How Semantic Pattern Routing Separates Behavior from Visual Layout in Diagram Design](/cathrynlavery/diagram-design/how-semantic-pattern-routing-separates-behavior-from-visual-layout) Learn how semantic pattern routing in diagram design separates behavior from visual layout. Discover the two-step process and automated validation for cleaner diagrams. - Tags: architecture - Published: 2026-09-09 ### [How Geometry Verification Prevents Overlapping Labels and Nodes in SVG Diagrams](/cathrynlavery/diagram-design/how-does-geometry-verification-prevent-overlapping-labels-and-nodes) Learn how geometry verification stops SVG diagrams from having overlapping labels and nodes. Discover how it parses SVG rectangles and respects paint order for clear visuals. - Tags: how-to-guide - Published: 2026-09-08 ### [Render Linting Script Checks in Diagram-Design: 8 Automated Validations Explained](/cathrynlavery/diagram-design/what-checks-are-performed-by-the-render-linting-script) Discover the 8 automated validations in the diagram-design render linting script, including error detection, geometry checks, and network isolation for robust diagram rendering. - Tags: how-to-guide - Published: 2026-09-08 ### [How to Export Motion-Enabled HTML Diagrams in a Static State](/cathrynlavery/diagram-design/how-to-export-motion-enabled-html-diagrams-in-a-static-state) Export motion-enabled HTML diagrams as static SVGs or PNGs by appending ?motion=static to your diagram URL. Freeze animations for clean exports with all semantic elements. - Tags: how-to-guide - Published: 2026-09-08 ### [How to Export Diagrams in SVG and PNG Formats in Diagram Design](/cathrynlavery/diagram-design/how-to-export-diagrams-in-svg-and-png-formats) Easily export diagrams in SVG and PNG formats using the diagram-design export-diagram command. Get vector or rasterized images with optional scaling for your projects. - Tags: how-to-guide - Published: 2026-09-08 ### [What Specialized Diagram Types Does the Diagram-Design Skill Offer?](/cathrynlavery/diagram-design/what-are-the-specialized-diagram-types-offered) Explore the cathrynlavery/diagram-design skill's specialized diagram types: flowchart, sequenceDiagram, stateDiagram-v2, and erDiagram. Get full parsing and rendering for these Mermaid formats. - Tags: deep-dive - Published: 2026-09-08 ### [Diagram Types for Composition in Diagram-Design: A Complete Guide to UML Class Relationships](/cathrynlavery/diagram-design/what-are-the-available-diagram-types-for-composition) Discover UML Class Diagrams for composition in diagram-design. Learn to model strict whole-part hierarchies with the filled diamond notation. Understand this essential relationship type. - Tags: tutorial - Published: 2026-09-08 ### [Diagram Types for Comparison: A Complete Guide to the Diagram-Design Repository](/cathrynlavery/diagram-design/what-are-the-available-diagram-types-for-comparison) Explore nine diagram types for comparison in the cathrynlavery/diagram-design repository, including Bar, Radar, Quadrant, Scatter, Line, Sankey, and Polar charts. Learn their visual grammars. - Tags: getting-started - Published: 2026-09-08 ### [Available Diagram Types for Flow in diagram-design: Supported Mermaid Kinds](/cathrynlavery/diagram-design/what-are-the-available-diagram-types-for-flow) Discover the four flow diagram types supported by diagram-design: flowchart, sequenceDiagram, stateDiagram-v2, and erDiagram. Visualize your processes effectively with Mermaid. - Tags: api-reference - Published: 2026-09-08 ### [Diagram Types for Structure in Diagram Design: 4 Supported Mermaid Kinds Explained](/cathrynlavery/diagram-design/what-are-the-available-diagram-types-for-structure) Explore four structural diagram types flowchart sequenceDiagram stateDiagram-v2 and erDiagram supported by the Diagram Design library using Mermaid. Learn how to create clear structural diagrams. - Tags: deep-dive - Published: 2026-09-08 ### [How to Ensure Diagrams Are Accessible with Animation Constraints](/cathrynlavery/diagram-design/how-to-ensure-diagrams-are-accessible-with-animation-constraints) Ensure diagram accessibility with animation constraints. Isolate motion as an optional layer and enforce strict contracts using markdown and canonical controllers for verified semantic motion. - Tags: best-practices - Published: 2026-09-08 ### [Diagram Design Animation Modes: The Complete Guide to None, Reveal, Step, and Loop](/cathrynlavery/diagram-design/what-animation-modes-are-available-in-diagram-design) Explore Diagram Design's four animation modes: none, reveal, step, and loop. Transform static diagrams into interactive presentations for clearer understanding. - Tags: deep-dive - Published: 2026-09-08 ### [How to Import Mermaid Diagrams into the Diagram Design Tool](/cathrynlavery/diagram-design/how-to-import-mermaid-diagrams-into-the-diagram-design-tool) Easily import Mermaid diagrams into the Diagram Design tool using the import-mermaid command. Convert .mmd or Markdown files for clean, style-agnostic redesigns. - Tags: how-to-guide - Published: 2026-09-08 ### [What Are the Four Dials That Shape draw.io Imports?](/cathrynlavery/diagram-design/what-are-the-four-dials-that-shape-drawio-imports) Master draw.io imports with four key dials Format, Size, Detail, and Audience. Control output media, dimensions, fidelity, and styling for editorial-quality diagrams. - Tags: deep-dive - Published: 2026-09-08 ### [How to Import draw.io Diagrams into the Diagram Design Tool: A Complete Technical Guide](/cathrynlavery/diagram-design/how-to-import-drawio-diagrams-into-the-diagram-design-tool) Learn to import draw.io diagrams into Diagram Design with our technical guide. Our script securely normalizes XML for structured representation. Explore the process now. - Tags: how-to-guide - Published: 2026-09-08 ### [How to Set Up and Use the Client Profile System for Multiple Brands](/cathrynlavery/diagram-design/how-to-set-up-and-use-the-client-profile-system-for-multiple-brands) Learn to set up and use the client profile system for multiple brands with a single installation. Isolate style guides for unlimited clients efficiently. - Tags: how-to-guide - Published: 2026-09-08 ### [How to Extract a Dominant Palette and Font Stack from a Website for Diagram Branding](/cathrynlavery/diagram-design/how-to-extract-dominant-palette-and-font-stack-from-a-website-for-diagram-branding) Automate brand extraction for diagram design. Learn how to get a dominant palette and font stack from any website to ensure consistent, accessible branding with cathrynlavery/diagram-design. - Tags: how-to-guide - Published: 2026-09-08 ### [How URL-Based Brand Onboarding Works in Diagram Design](/cathrynlavery/diagram-design/how-does-the-url-based-brand-onboarding-work) Learn how diagram design uses URL based brand onboarding to automatically extract color palettes and typography from any website URL for branded diagrams. See the pipeline in action. - Tags: how-to-guide - Published: 2026-09-08 ### [How to Map Semantic Patterns to Visual Types in Diagram Design](/cathrynlavery/diagram-design/how-to-map-semantic-patterns-to-visual-types-in-diagram-design) Learn how to map semantic patterns to visual types in diagram design. Discover the two-layer architecture and validation methods for clear, enforced diagram layouts. - Tags: how-to-guide - Published: 2026-09-08 ### [Diagram Design Core Design System: 10 Key Rules Explained](/cathrynlavery/diagram-design/what-are-the-key-rules-of-the-diagram-design-core-design-system) Explore the 10 key rules of the Diagram Design core design system. Learn about semantic color roles, accent limits, 4px grids, and WCAG AA contrast for consistent, accessible visuals. - Tags: best-practices - Published: 2026-09-08 ### [How to Customize the Diagram Design System: 4 Configuration Methods Explained](/cathrynlavery/diagram-design/how-can-i-customize-the-diagram-design-system) Customize the diagram design system using four methods: manual edits, automated brand extraction, or named profiles. Learn to override default tokens easily. - Tags: how-to-guide - Published: 2026-09-08 ### [What Types of Diagrams Can the Agent Skills Plugin Generate? Complete Catalog of 39 Visual Types](/cathrynlavery/diagram-design/what-types-of-diagrams-can-the-agent-skills-plugin-generate) Explore the Agent Skills plugin's catalog of 39 diagram types, including architecture, flowcharts, Gantt charts, and Wardley maps. Generate diagrams as HTML, SVG, or PNG. - Tags: getting-started - Published: 2026-09-08 ### [How to Generate Diagrams Using the Agent Skills Plugin](/cathrynlavery/diagram-design/how-to-generate-diagrams-using-the-agent-skills-plugin) Easily generate SVG and PNG diagrams from Mermaid text or Draw.io XML with the Agent Skills plugin. No manual parsing needed for cathrynlavery/diagram-design. - Tags: how-to-guide - Published: 2026-09-08 ### [How to Generate Editorial-Quality Diagrams for AI Coding Assistants Using Diagram Design](/cathrynlavery/diagram-design/how-can-i-generate-editorial-quality-diagrams-for-ai-coding-assistants-using-this-tool) Generate editorial-quality diagrams for AI coding assistants with Diagram Design. Render 39 diagram types in pure HTML + SVG using slash commands and lazy-loaded reference files. - Tags: how-to-guide - Published: 2026-09-06 ### [What Is the Purpose of the `assets` Directory in the Diagram-Design Repository?](/cathrynlavery/diagram-design/what-is-purpose-of-assets-directory-in-diagram-design-repository) Discover the purpose of the assets directory in the diagram-design repository. Learn how it stores static content, powers the live gallery, and provides diagram templates and examples. - Tags: how-to-guide - Published: 2026-09-06 ### [Where Are Named Client Profiles Stored in diagram-design? Complete Guide to Profile Location and Management](/cathrynlavery/diagram-design/where-are-named-client-profiles-stored-for-diagram-design) Discover where named client profiles are stored in diagram-design. Learn to manage these Markdown files located in ~/.diagram-design/profiles/ for your style guides. - Tags: how-to-guide - Published: 2026-09-06 ### [How diagram-design Supports Multi-Client Workflows with Named Profiles](/cathrynlavery/diagram-design/how-does-diagram-design-support-multi-client-workflows-with-named-profiles) Diagram-design uses named profiles to manage multi-client workflows. Isolate client branding colors fonts and diagram settings in separate style-guide files for seamless project management. - Tags: how-to-guide - Published: 2026-09-06 ### [How Different Node Types Are Treated With Fill and Stroke in diagram-design](/cathrynlavery/diagram-design/how-are-different-node-types-treated-with-fill-and-stroke-in-diagram-design) Discover how diagram-design applies fill and stroke to different node types using semantic color families. Learn the rules for default and focal elements. - Tags: deep-dive - Published: 2026-09-06 ### [Default Color Values for Paper, Ink, Muted, Accent, and Link in Diagram Design](/cathrynlavery/diagram-design/what-are-default-light-and-dark-mode-color-values-for-paper-ink-muted-accent-and-link) Discover default light and dark mode color values for paper ink muted accent and link in Diagram Design. Optimize your designs with these essential color tokens. - Tags: getting-started - Published: 2026-09-06 ### [How Color Tokens Are Defined and Used in diagram-design's Style Guide](/cathrynlavery/diagram-design/how-are-color-tokens-defined-and-used-in-diagram-designs-style-guide) Learn how diagram design centralizes visual colors using semantic tokens in its style guide. Discover reusable color names like paper, ink, and accent that adapt to light or dark mode. - Tags: deep-dive - Published: 2026-09-06 ### [Diagram-Design Font Families: Title, Node Name, and Sublabel Typography Explained](/cathrynlavery/diagram-design/what-font-families-are-used-for-titles-node-names-and-sublabels-in-diagram-design) Discover the exact font families used for titles, node names, and sublabels in Diagram-Design. Learn how Instrument Serif and Geist fonts enhance your diagrams. - Tags: deep-dive - Published: 2026-09-06 ### [How Diagram-Design's Typography Hierarchy Works: A Complete Guide to Font Roles, Sizes & Constraints](/cathrynlavery/diagram-design/how-does-typography-hierarchy-work-in-diagram-designs-design-system) Master Diagram-Design's typography hierarchy. Learn font roles, sizes, and constraints for Instrument Serif, Geist Sans, and Geist Mono to create clear, consistent diagrams. - Tags: deep-dive - Published: 2026-09-06 ### [What Target Density Is Recommended for Diagrams Generated by diagram-design?](/cathrynlavery/diagram-design/what-is-target-density-recommended-for-diagrams-generated-by-diagram-design) Discover the recommended target density for diagram-design. Learn how 4/10 ensures technical completeness without clutter. - Tags: faq - Published: 2026-09-06 ### [How to Verify the Output of an Installed Diagram-Design Agent](/cathrynlavery/diagram-design/how-can-i-verify-output-of-installed-diagram-design-agent) Verify your diagram-design agent output using self_check.py. Ensure HTML diagrams meet accessibility, structural, and motion-safety standards. Run the script now for validation. - Tags: how-to-guide - Published: 2026-09-06 ### [How to Convert Mermaid Diagrams to Diagram-Design IR: The Complete Guide](/cathrynlavery/diagram-design/is-there-way-to-convert-mermaid-diagrams-to-diagram-design-ir) Easily convert Mermaid diagrams to Diagram-Design IR with the built-in import-mermaid command. Follow this complete guide to streamline your diagramming workflow. - Tags: how-to-guide - Published: 2026-09-06 ### [How to Convert .drawio Files to Diagram-Design Structured IR: A Complete Guide](/cathrynlavery/diagram-design/how-can-i-convert-drawio-files-to-diagram-design-structured-ir) Convert drawio files to diagram-design structured IR using the drawio_extract.py script. Easily parse XML, PNG, or SVG files into JSON or Markdown. - Tags: how-to-guide - Published: 2026-09-06 ### [Motion Primitives in Diagram-Design: Complete Guide to Available Types and Budget Limits](/cathrynlavery/diagram-design/what-are-the-motion-primitives-available-in-diagram-design-and-their-budgets) Explore eight semantic motion primitives in Diagram-Design with budget limits to ensure visual clarity and prevent animation overuse. Discover available types and their caps. - Tags: deep-dive - Published: 2026-09-06 ### [How to Use Step Animation Mode for Teaching and Policy Traces in Diagram Design](/cathrynlavery/diagram-design/how-do-i-use-step-animation-mode-for-teaching-or-policy-traces) Master the step animation mode in diagram design for effective teaching and policy traces. Pause and inspect states for clear walkthroughs. Learn how now. - Tags: how-to-guide - Published: 2026-09-06 ### [Diagram-Design Animation Modes: A Complete Guide to `none`, `reveal`, `step`, and `loop`](/cathrynlavery/diagram-design/what-are-the-available-animation-modes-in-diagram-design-system) Explore diagram-design animation modes: none, reveal, step, and loop. Master static, autoplay, interactive, and decorative animations for your diagrams. Learn more! - Tags: deep-dive - Published: 2026-09-06 ### [How Diagram-Design Ensures WCAG AA Contrast Compliance During Brand Onboarding](/cathrynlavery/diagram-design/how-does-diagram-design-ensure-wcag-aa-contrast-compliance-during-brand-onboarding) Diagram-design ensures WCAG AA contrast compliance by validating ink on paper and muted on paper colors during brand onboarding, then re-verifies with a post-build self-check. - Tags: best-practices - Published: 2026-09-06 ### [How to Onboard a Custom Brand Palette to Diagram‑Design: A Complete Step‑by‑Step Guide](/cathrynlavery/diagram-design/how-can-i-onboard-custom-brand-palette-to-diagram-design) Easily onboard a custom brand palette to Diagram-Design. This guide shows how to use the built-in flow to extract colors and fonts, map them to tokens, and update your style guide. - Tags: how-to-guide - Published: 2026-09-06 ### [How to Use the Seven Semantic Patterns in Diagram-Design: A Complete Reference](/cathrynlavery/diagram-design/what-are-the-seven-semantic-patterns-used-in-diagram-design-and-when-should-i-use-them) Master diagram-design's seven semantic patterns to separate system function from information structure. Learn when to use these domain-specific primitives for clearer diagrams. - Tags: api-reference - Published: 2026-09-06 ### [How Diagram-Design Handles Semantic Patterns Before Selecting a Visual Type](/cathrynlavery/diagram-design/how-does-diagram-design-handle-semantic-patterns-before-selecting-visual-type) Diagram-Design prioritizes semantic patterns over aesthetics for clear, meaning-driven diagrams. Discover its two-step workflow for selecting visual types. - Tags: deep-dive - Published: 2026-09-06 ### [Where to Find the Diagram-Design Style Guide for Customizing Colors and Fonts](/cathrynlavery/diagram-design/where-can-i-find-style-guide-for-diagram-design-to-customize-colors-and-fonts) Locate the diagram design style guide in the cathrynlavery/diagram-design repository. Customize colors and fonts with this essential reference. - Tags: how-to-guide - Published: 2026-09-06 ### [How Diagram Types Are Loaded On-Demand in the Diagram‑Design Skill](/cathrynlavery/diagram-design/how-are-diagram-types-loaded-on-demand-in-diagram-design-skill) Learn how the diagram-design skill uses lazy loading to fetch diagram types on-demand, reducing I/O and parsing overhead for a faster user experience. - Tags: internals - Published: 2026-09-06 ### [Routing-First Progressive Disclosure Architecture in Diagram-Design Explained](/cathrynlavery/diagram-design/what-is-routing-first-progressive-disclosure-architecture-in-diagram-design) Understand the routing-first progressive disclosure architecture in diagram-design. Discover how it efficiently loads modules based on user selection for a faster experience. - Tags: architecture - Published: 2026-09-06 ### [How the diagram-design Agent Handles Routing for Different Diagram Types](/cathrynlavery/diagram-design/how-does-diagram-design-agent-handle-routing-for-different-diagram-types) Learn how the diagram-design agent routes diagram types by parsing tokens validating against a whitelist and dispatching to dedicated parsers for efficient handling. - Tags: how-to-guide - Published: 2026-09-06 ### [Architecture Decision Records (ADRs) in the Diagram‑Design Project: Purpose and Implementation](/cathrynlavery/diagram-design/adr-design-policy-rationale) Discover the purpose and implementation of Architecture Decision Records ADRs in the diagram-design project. Understand how ADRs serve as authoritative design policy records for improved development. - Tags: architecture - Published: 2026-09-05 ### [How a Multi-Client Workflow Supports Different Brands for Parallel Workspaces in Diagram Design](/cathrynlavery/diagram-design/multi-client-workflow-different-brands-parallel-workspaces) Learn how a multi client workflow supports different brands for parallel workspaces in diagram design. Use one installation for multiple projects with external brand profiles. - Tags: architecture - Published: 2026-09-05 ### [Diagram Design Icon Set Composition and currentColor Inheritance Explained](/cathrynlavery/diagram-design/icon-set-currentcolor-inheritance) Explore the cathrynlavery/diagram-design icon set, a monochrome library of 55 icons from Tabler and Simple Icons. Understand how currentColor inheritance enables seamless color adaptation. - Tags: deep-dive - Published: 2026-09-05 ### [How to Create a Sketchy/Hand‑Drawn Primitive Using an SVG Turbulence Filter](/cathrynlavery/diagram-design/sketchy-hand-drawn-primitive-with-svg-turbulence-filter) Learn to create sketchy hand-drawn primitives with SVG turbulence filters. Combine feTurbulence and feDisplacementMap for organic, hand-drawn edges in your diagrams. - Tags: how-to-guide - Published: 2026-09-05 ### [Korean Label Handling and Hangul Font Requirements in diagram-design: A Complete Guide](/cathrynlavery/diagram-design/korean-label-handling-and-hangul-font-requirements) Master Korean label handling and Hangul font requirements in diagram-design. Learn about style guides, font stacks, and character width budgeting for clear visuals. - Tags: how-to-guide - Published: 2026-09-05 ### [How Conservation and Geometry Verification Work in Sankey Diagrams](/cathrynlavery/diagram-design/sankey-diagram-conservation-and-geometry-verification) Discover how Sankey diagrams enforce conservation using five invariants and verify geometry to prevent clipped labels. Learn about this crucial diagram design technique. - Tags: deep-dive - Published: 2026-09-05 ### [Polar Chart Quantitative Encoding and Gate Testing: A Complete Technical Guide](/cathrynlavery/diagram-design/polar-chart-quantitative-encoding-and-gate-testing) Master polar chart quantitative encoding and gate testing. Discover how SVG attributes and Python validation ensure accurate geometric data representation in this comprehensive technical guide. - Tags: technical-guide - Published: 2026-09-05 ### [lint-skin.py vs lint-render.py: What's the Difference for Checking Diagram Output?](/cathrynlavery/diagram-design/lint-skin-py-vs-lint-render-py-checking-output) Understand the difference between lint-skin.py and lint-render.py for checking diagram output. Learn how static analysis and headless browser execution differ for diagram design. - Tags: comparison - Published: 2026-09-05 ### [How to Run Installed Output Validation with self_check.py](/cathrynlavery/diagram-design/running-installed-output-validation-with-self-check-py) Easily run installed output validation using self_check.py. This script verifies SVG accessibility, motion markup, and security with no dependencies. Get started now! - Tags: how-to-guide - Published: 2026-09-05 ### [How PNG and SVG Exports Handle Sizing, Scaling, and Static Capture in Diagram Design](/cathrynlavery/diagram-design/export-png-svg-sizing-scaling-static-capture-contract) Learn how PNG and SVG exports handle sizing and scaling in diagram design. Discover vector vs raster exports with precise control for static capture. Optimize your diagrams. - Tags: deep-dive - Published: 2026-09-05 ### [SKILL.md Byte Cap and Trigger‑Rich Description Policy in the Diagram‑Design Repository](/cathrynlavery/diagram-design/skill-md-byte-cap-and-trigger-rich-description-policy) Understand the SKILL.md byte cap and trigger-rich description policy in the diagram-design repository. Learn about the 40000-byte limit and safe description practices. - Tags: policy - Published: 2026-09-05 ### [What Are the 6 Mandatory Connector Routing Rules?](/cathrynlavery/diagram-design/understanding-6-mandatory-connector-routing-rules) Master the 6 mandatory connector routing rules for clear diagrams. Learn about rounded elbows, spacing, and label masks to improve your visual communication. - Tags: how-to-guide - Published: 2026-09-05 ### [Progressive Disclosure and Lazy-Loading References Architecture in Diagram-Design](/cathrynlavery/diagram-design/progressive-disclosure-architecture-and-lazy-loading-references) Explore the diagram-design architecture for progressive disclosure and lazy-loading references. Load optional data on demand for faster rendering and a better user experience. - Tags: architecture - Published: 2026-09-05 ### [How the Client Profile System Uses .diagram-design Project Markers](/cathrynlavery/diagram-design/client-profile-system-with-diagram-design-project-markers) Discover how the client profile system uses .diagram-design project markers to load custom styling from isolated files, binding projects to specific brand profiles for unique visual identities. - Tags: how-to-guide - Published: 2026-09-05 ### [How to Redraw Mermaid Imports and Track Changes with the Fidelity Ledger](/cathrynlavery/diagram-design/mermaid-import-redraw-procedure-and-fidelity-ledger) Redraw Mermaid imports by rebuilding diagrams from scratch and track changes with the fidelity ledger which documents every operation. Learn the procedure now. - Tags: how-to-guide - Published: 2026-09-05 ### [Accessible SVG Contracts and ARIA Implementation Requirements in Diagram-Design](/cathrynlavery/diagram-design/accessible-svg-contract-requirements-and-aria-implementation) Learn accessible SVG contracts and ARIA implementation requirements. Diagram-Design validates screen-reader compatibility with role img, title, description, and aria-labelledby. - Tags: best-practices - Published: 2026-09-05 ### [Understanding Complexity Budgets for Diagram Types: When and How to Split Diagrams](/cathrynlavery/diagram-design/complexity-budgets-per-diagram-type-and-splitting-diagrams) Learn about complexity budgets for diagrams and when to split them. Enforce limits on visual primitives to ensure readability and CI compliance. Discover effective diagram design strategies. - Tags: deep-dive - Published: 2026-09-05 ### [How Design Tokens Are Extracted from a Website URL for Brand Onboarding in Diagram Design](/cathrynlavery/diagram-design/brand-onboarding-extracting-design-tokens-from-website-url) Learn how Diagram Design extracts design tokens like colors and fonts from a website URL. We map them to semantic tokens and verify WCAG AA contrast for efficient brand onboarding. - Tags: how-to-guide - Published: 2026-09-05 ### [Diagram-Design Optional Animation Modes and Accessibility Contracts: A Complete Technical Guide](/cathrynlavery/diagram-design/optional-animation-modes-and-accessibility-contracts) Explore optional animation modes none reveal step and loop in Diagram-Design. Learn about accessibility contracts ensuring static first diagrams and ARIA keyboard support. - Tags: deep-dive - Published: 2026-09-05 ### [How Draw.io Diagram Data Is Converted for Editorial Use: A Complete Technical Guide](/cathrynlavery/diagram-design/how-drawio-to-editorial-diagram-conversion-works) Learn how draw.io diagram data converts to editorial Markdown or JSON. This guide details the four-stage pipeline: XML decoding, IR building, topology analysis, and content rendering. - Tags: technical-guide - Published: 2026-09-05 ### [Understanding the 4px Grid System in Diagram-Design: Coordinate Alignment Explained](/cathrynlavery/diagram-design/understanding-4px-grid-system-and-coordinate-alignment) Master the 4px grid system in diagram design. Learn how coordinate alignment ensures pixel perfect diagrams and consistent spacing across all variants. Optimize your designs today. - Tags: deep-dive - Published: 2026-09-05 ### [How Semantic Pattern Routing Works in Diagram Design: A 4-Step Guide](/cathrynlavery/diagram-design/how-semantic-pattern-routing-works-in-diagram-design) Understand how semantic pattern routing in diagram design maps domain patterns to visual types. Follow our 4-step guide for a clear explanation. - Tags: how-to-guide - Published: 2026-09-05 ### [What Is the 4px Grid Rule in Diagram Design?](/cathrynlavery/diagram-design/what-is-the-4px-grid-rule-in-diagram-design) Master the 4px grid rule in diagram design. Learn how to align elements for visual rhythm and accuracy, ensuring consistency in your diagrams. Boost your design skills today. - Tags: deep-dive - Published: 2026-08-23 ### [Fill and Stroke Combinations for Different Node Types in Diagram-Design](/cathrynlavery/diagram-design/what-are-the-fill-and-stroke-combinations-for-different-node-types) Discover precise fill and stroke combinations for diagram-design node types. Learn how our four-color palette creates clear, accessible diagrams with one focal node. - Tags: how-to-guide - Published: 2026-08-23 ### [How the Node Type to Treatment Matrix Is Defined in Diagram-Design](/cathrynlavery/diagram-design/how-is-the-node-type-to-treatment-matrix-defined) Discover how the Node Type to Treatment Matrix is defined in cathrynlavery/diagram-design. Learn about the centralized constant NODE_TYPE_TREATMENT_MATRIX for consistent rendering logic. - Tags: internals - Published: 2026-08-23 ### [Supported Font Families in Diagram Design: A Complete Guide](/cathrynlavery/diagram-design/what-are-the-supported-font-families-in-diagram-design) Discover supported font families in Diagram Design including Geist, Geist Mono, and Instrument Serif. Learn about cross-platform compatibility and fallbacks for clear visual communication. - Tags: getting-started - Published: 2026-08-23 ### [How to Change the Brand Skin of Diagram Design Diagrams: Two Methods Explained](/cathrynlavery/diagram-design/how-to-change-the-brand-skin-of-diagram-design-diagrams) Learn how to change the brand skin of Diagram Design diagrams with two easy methods. Update semantic tokens manually or use the automated onboarding flow to extract palettes from live websites. - Tags: how-to-guide - Published: 2026-08-23 ### [How Tokens Are Used for Theming in Diagram Design](/cathrynlavery/diagram-design/how-are-tokens-used-for-theming-in-diagram-design) Explore how Diagram Design uses CSS custom-property tokens for theming. Dynamically restyle entire diagrams by swapping token blocks, not individual elements. - Tags: deep-dive - Published: 2026-08-23 ### [How Diagram Design Integrates with Factory Droid: Complete Plugin Architecture Guide](/cathrynlavery/diagram-design/how-does-diagram-design-integrate-with-factory-droid) Explore how Diagram Design integrates with Factory Droid as a native plugin using Agent Skills. Discover zero-configuration installation and execution of 39 diagram types. - Tags: architecture - Published: 2026-08-23 ### [How Diagram Design Integrates with Codex: Plugin Architecture and Installation Guide](/cathrynlavery/diagram-design/how-does-diagram-design-integrate-with-codex) Learn how Diagram Design integrates with Codex as a standardized plugin. Discover its JSON manifest, marketplace entry, and shared skill directory for consistent functionality. - Tags: how-to-guide - Published: 2026-08-23 ### [Diagram Design Claude Code Integration: Plugin Architecture Explained](/cathrynlavery/diagram-design/how-does-diagram-design-integrate-with-claude-code) Learn how Diagram Design integrates with Claude Code via its plugin architecture. Discover slash commands and on-demand skill loading for seamless integration. - Tags: architecture - Published: 2026-08-23 ### [Where Are the AI Skill Manifests Located in the Diagram-Design Repository?](/cathrynlavery/diagram-design/where-are-the-ai-skill-manifests-for-different-platforms-located) Locate AI skill manifests in the diagram-design repository within platform-specific hidden directories. Find plugin.json files for various AI models and integrations. - Tags: how-to-guide - Published: 2026-08-23 ### [Diagram Design Repository Directory Structure: A Complete File-by-File Guide](/cathrynlavery/diagram-design/what-is-the-directory-structure-of-the-diagram-design-repository) Explore the cathrynlavery/diagram-design repository's directory structure. This guide details the layered organization of agent plugins, commands, prompts, and the core skill package for efficient code management. - Tags: how-to-guide - Published: 2026-08-23 ### [How Diagram Design Separates Semantic Patterns from Visual Types](/cathrynlavery/diagram-design/how-does-diagram-design-separate-semantic-patterns-from-visual-types) Learn how Diagram Design separates semantic patterns from visual types. Discover a workflow that prioritizes function over form for clearer system understanding. - Tags: deep-dive - Published: 2026-08-23 ### [Supported Diagram Types in Diagram Design: The Complete Catalog](/cathrynlavery/diagram-design/what-are-the-supported-diagram-types-in-diagram-design) Explore the complete catalog of 39 supported diagram types in Diagram Design including Architecture UML Class Sankey Gantt and Flowchart Learn more about each type and its specifications. - Tags: api-reference - Published: 2026-08-22 ### [How Diagram Design Handles Importing Mermaid Diagrams: Architecture and Implementation](/cathrynlavery/diagram-design/how-does-diagram-design-handle-importing-mermaid-diagrams) Learn how Diagram Design imports Mermaid diagrams using a sandboxed Python extractor for secure, JavaScript-free parsing. Get your diagrams converted to Markdown or JSON. - Tags: architecture - Published: 2026-08-22 ### [What Is the Purpose of the `scripts/verify-docs-sync.py` Script in Diagram Design?](/cathrynlavery/diagram-design/what-is-the-purpose-of-the-scripts-verify-docs-sync.py-script) Understand the purpose of the scripts/verify-docs-sync.py script in Diagram Design. This validator ensures user-facing documentation stays perfectly synchronized with canonical definitions. - Tags: how-to-guide - Published: 2026-08-22 ### [How Diagram Design Ensures WCAG AA Contrast During Brand Onboarding](/cathrynlavery/diagram-design/how-does-diagram-design-ensure-wcag-aa-contrast-during-brand-onboarding) Diagram Design automatically validates brand colors against WCAG AA contrast standards during onboarding, ensuring accessibility for all. - Tags: best-practices - Published: 2026-08-22 ### [What Design Elements Does Diagram Design Extract from a Website for Onboarding?](/cathrynlavery/diagram-design/what-design-elements-does-diagram-design-extract-from-a-website-for-onboarding) Diagram Design extracts color palettes and typography from websites, mapping them to semantic tokens to ensure diagrams inherit your site's visual identity for seamless onboarding. - Tags: how-to-guide - Published: 2026-08-22 ### [How to Extract Design Tokens from a Local Folder Using Diagram Design](/cathrynlavery/diagram-design/what-is-the-process-for-extracting-design-tokens-from-a-local-folder-using-diagram-design) Learn how to extract design tokens from local folders using Diagram Design. This guide covers scanning files, mapping roles, and updating your style guide in 8 steps. - Tags: how-to-guide - Published: 2026-08-22 ### [How Diagram Design Extracts Design Tokens from an Existing Agent Skill](/cathrynlavery/diagram-design/how-can-diagram-design-extract-design-tokens-from-an-existing-agent-skill) Learn how Diagram Design extracts design tokens from your existing Agent Skill by parsing CSS and JSON files, streamlining your style guide management. - Tags: how-to-guide - Published: 2026-08-22 ### [How Diagram Design Extracts Tokens from a Website URL for Brand Onboarding](/cathrynlavery/diagram-design/how-does-diagram-design-extract-tokens-from-a-website-url-for-brand-onboarding) Diagram Design extracts website color and typography tokens for brand onboarding. It renders pages, maps CSS to roles, validates against WCAG AA, and generates style guide diffs. - Tags: how-to-guide - Published: 2026-08-22 ### [Diagram Design Styling Constraints: The Complete Guide to Preserving the Visual System](/cathrynlavery/diagram-design/what-are-the-constraints-to-preserve-in-diagram-designs-styling) Master diagram design styling constraints for visual consistency. Learn the 4px grid, contrast, fonts, and more to maintain your system's integrity. - Tags: best-practices - Published: 2026-08-22 ### [How Node Types Are Mapped to Treatments (Fill and Stroke) in Diagram Design](/cathrynlavery/diagram-design/how-are-node-types-mapped-to-treatments-in-diagram-design) Discover how node types map to treatments like fill and stroke in Diagram Design. Understand semantic node styling and reference file configurations for clear, effective diagrams. - Tags: internals - Published: 2026-08-22 ### [When to Use Mono Fonts in Diagram Design Diagrams: A Complete Technical Guide](/cathrynlavery/diagram-design/when-should-mono-fonts-be-used-in-diagram-design-diagrams) Learn when to use mono fonts in Diagram Design diagrams. Discover best practices for code blocks, sublabels, and technical abbreviations to improve visual hierarchy. - Tags: how-to-guide - Published: 2026-08-22 ### [Diagram Design Typography Settings: Semantic Font Roles and Implementation Guide](/cathrynlavery/diagram-design/what-are-the-typography-settings-for-diagram-design) Explore Diagram Design typography settings. Discover semantic font roles and implementation details using Instrument Serif, Geist, and Geist Mono via Google Fonts. - Tags: how-to-guide - Published: 2026-08-22 ### [How to Use the Accent Color in Diagram Design: Guidelines and Examples](/cathrynlavery/diagram-design/what-is-the-recommended-usage-for-the-accent-color-in-diagram-design) Learn how to use the accent color in Diagram Design to create a visual focal point. Discover guidelines and examples for effective diagram design, limiting its use to maintain signal strength. - Tags: best-practices - Published: 2026-08-22 ### [Semantic Color Roles in Diagram Design’s Token System](/cathrynlavery/diagram-design/what-are-the-semantic-color-roles-in-diagram-designs-token-system) Discover semantic color roles like paper ink muted accent link and soft in Diagram Design. Ensure consistent theming accessibility and abstract visual properties across skins. - Tags: deep-dive - Published: 2026-08-22 ### [Where Is the Single Source of Truth for Colors and Typography in Diagram Design?](/cathrynlavery/diagram-design/where-is-the-single-source-of-truth-for-colors-and-typography-in-diagram-design) Find the single source of truth for colors and typography in diagram design within the style-guide.md file in the cathrynlavery/diagram-design repository. Centralize your design assets. - Tags: best-practices - Published: 2026-08-22 ### [Directory Structure of the Diagram Design Skill: Complete Technical Guide](/cathrynlavery/diagram-design/what-is-the-directory-structure-of-the-diagram-design-skill) Explore the Diagram Design skill directory structure in cathrynlavery/diagram-design. Learn about its Commands, Prompts, and Skill Core layers for efficient documentation loading. - Tags: how-to-guide - Published: 2026-08-22 ### [How Saved Client Profiles Are Used in Diagram Design](/cathrynlavery/diagram-design/how-are-saved-client-profiles-used-in-diagram-design) Learn how Diagram Design utilizes saved client profiles to store style guide snapshots for efficient diagram generation. Discover the profile saving and resolution process. - Tags: how-to-guide - Published: 2026-08-22 ### [How to Onboard Diagram Design to a Website: The Complete Process](/cathrynlavery/diagram-design/what-is-the-process-for-onboarding-diagram-design-to-a-website) Onboard Diagram Design to your website seamlessly. Automate color and typography extraction, map to design tokens, and ensure brand consistency with style-guide.md. - Tags: how-to-guide - Published: 2026-08-22 ### [How Diagram Design Handles Requests Involving Semantic Patterns: A Complete Technical Breakdown](/cathrynlavery/diagram-design/how-diagram-design-handles-requests-involving-semantic-patterns) Diagram Design handles semantic patterns via an 8-step pipeline. It separates behavior from layout, validates with Python contracts, and renders self-contained HTML diagrams. - Tags: deep-dive - Published: 2026-08-22 ### [What Files Are Loaded When Requesting a Flowchart in Diagram Design](/cathrynlavery/diagram-design/what-files-are-loaded-when-requesting-a-flowchart-in-diagram-design) Discover the four essential files loaded for flowcharts in Diagram Design. Learn about the Mermaid parser, type reference, and HTML template for efficient diagram creation. - Tags: internals - Published: 2026-08-22 ### [How Diagram Design's Progressive Loading Architecture Works: On-Demand Resource Management](/cathrynlavery/diagram-design/how-diagram-designs-progressive-loading-architecture-works) Discover how Diagram Design's progressive loading architecture efficiently manages resources by loading only necessary files on demand. Minimize memory and I/O overhead with this innovative approach. - Tags: architecture - Published: 2026-08-22 ### [Sequence Diagram Type Use Cases: Visualizing Messages Over Time](/cathrynlavery/diagram-design/use-cases-for-sequence-diagram-type) Explore sequence diagram use cases for visualizing messages over time. Understand request-response flows, protocol exchanges, API calls, and incident reconstructions. - Tags: use-cases - Published: 2026-08-21 ### [How to Generate an Architecture Diagram Using Diagram Design: A Complete Guide](/cathrynlavery/diagram-design/how-to-generate-architecture-diagram) Learn how to generate an architecture diagram with Diagram Design. Install the skill, prepare your source file, and use simple commands for a clear visualization. Get the complete guide now. - Tags: how-to-guide - Published: 2026-08-21 ### [What Are the Different Categories of the 39 Visual Diagram Types? A Complete Guide](/cathrynlavery/diagram-design/categories-of-39-visual-diagram-types) Explore 39 visual diagram types categorized by structure, flow, comparison, hierarchy, and data views. Master diagram design with this comprehensive guide to diverse visualization techniques. - Tags: deep-dive - Published: 2026-08-21 ### [Options for Customizing style-guide.md on First Run in Diagram Design](/cathrynlavery/diagram-design/options-for-customizing-style-guide-md-first-run) Customize style-guide.md on first run with Diagram Design. Explore manual editing URL extraction profile creation or default options to define your brand's visual identity. - Tags: how-to-guide - Published: 2026-08-21 ### [What Happens During the First-Run Gate in a New Diagram-Design Project?](/cathrynlavery/diagram-design/what-happens-during-first-run-gate-new-project) Understand the first-run gate in a new diagram-design project. Learn how it validates structure, creates profiles, and caches completion markers before commands run. - Tags: internals - Published: 2026-08-21 ### [Diagram Design profiles.md Contract: Storage, Markers, and Recovery](/cathrynlavery/diagram-design/profiles-md-contract-storage-marker-recovery) Understand the profiles.md contract for Diagram Design, detailing storage locations, project markers, and default profile recovery. Learn about profile management in this technical guide. - Tags: api-reference - Published: 2026-08-21 ### [How to Use Client Profiles to Save and Apply Brand Skins in Diagram-Design](/cathrynlavery/diagram-design/how-are-client-profiles-used-save-apply-brand-skins) Learn how Diagram Design client profiles save and apply brand skins, storing style-guide snapshots to ensure consistent visual identity across all your projects. - Tags: how-to-guide - Published: 2026-08-21 ### [Which CSS Properties Are Mapped to Diagram Tokens During Onboarding?](/cathrynlavery/diagram-design/which-css-properties-mapped-to-diagram-tokens) Discover which CSS properties map to diagram tokens during onboarding in the Diagram Design engine. Understand how background color, color, and custom properties drive diagram visuals. - Tags: deep-dive - Published: 2026-08-21 ### [How the Diagram Design Brand Onboarding System Extracts Tokens from a Website](/cathrynlavery/diagram-design/how-brand-onboarding-extracts-tokens-from-website) Learn how the Diagram Design brand onboarding system extracts website color and font tokens using HTML parsing and CSS analysis. Discover semantic token mapping and generation. - Tags: how-to-guide - Published: 2026-08-21 ### [What Is the Live Gallery in Diagram Design and How to Access It](/cathrynlavery/diagram-design/what-is-live-gallery-and-how-accessed) Explore the live gallery, a browsable collection of 39 editorial-quality diagrams from Diagram Design. Access it online via GitHub Pages or offline with a local HTML file. - Tags: how-to-guide - Published: 2026-08-21 ### [What Is the Purpose of self_check.py in the Diagram-Design Repository?](/cathrynlavery/diagram-design/purpose-of-self-check-py) Discover the purpose of self_check.py in the diagram-design repository. This script validates diagram HTML for accessibility, security, and motion without dependencies. - Tags: how-to-guide - Published: 2026-08-21 ### [How Does mermaid_extract.py Work: Parsing Mermaid Diagrams into Intermediate Representation](/cathrynlavery/diagram-design/how-does-mermaid-extract-py-work) Discover how mermaid_extract.py works. This tool parses Mermaid diagrams into a normalized intermediate representation for flowcharts, sequence, state, and ER diagrams. Get JSON or Markdown output. - Tags: how-to-guide - Published: 2026-08-21 ### [How drawio_extract.py Works: Converting draw.io Files to a Normalized Intermediate Representation](/cathrynlavery/diagram-design/how-does-drawio-extract-py-work) Discover how drawio_extract.py transforms draw.io diagrams into normalized JSON or Markdown. This script parses XML, PNG, and SVG files, flattening graph models for efficient downstream processing. - Tags: how-to-guide - Published: 2026-08-21 ### [Scripts for Extracting Diagram Data in the Diagram-Design Repository](/cathrynlavery/diagram-design/what-scripts-for-extracting-diagram-data) Explore scripts in the cathrynlavery/diagram-design repo to extract diagram data. Parse draw.io XML and Mermaid text into a standardized internal format with Python. - Tags: how-to-guide - Published: 2026-08-21 ### [How the 39 Diagram Types Are Referenced and Organized in diagram-design](/cathrynlavery/diagram-design/how-are-39-diagram-types-referenced-organized) Discover how the cathrynlavery/diagram-design repository organizes 39 diagram types across documentation CLI flags HTML examples PNG assets markdown references and a constant - Tags: architecture - Published: 2026-08-21 ### [Motion Modes for Diagrams in Diagram Design: The Complete Technical Guide](/cathrynlavery/diagram-design/what-are-motion-modes-available-for-diagrams) Explore four motion modes none reveal step and loop in Diagram Design to control animation behavior using the data motion mode attribute. Learn how to animate your diagrams effectively. - Tags: deep-dive - Published: 2026-08-21 ### [How the Onboarding Process in Diagram Design Works: 6-Step Brand Integration](/cathrynlavery/diagram-design/how-does-onboarding-process-work-in-diagram-design) Discover the Diagram Design onboarding process. Our 6-step pipeline automatically transforms your designs into branded diagram skins by extracting visual tokens. Learn how it works. - Tags: how-to-guide - Published: 2026-08-21 ### [Semantic Patterns in diagram-design: A Complete Guide to the 7 System Behaviors Defined in semantic-patterns.md](/cathrynlavery/diagram-design/what-are-semantic-patterns-in-semantic-patterns-md) Explore the 7 semantic patterns in diagram-design.md to model system behavior, apply visual grammars, and avoid anti-patterns. Learn best practices for effective system design. - Tags: complete-guide - Published: 2026-08-21 ### [What Is the Role of references/style-guide.md in Diagram Design?](/cathrynlavery/diagram-design/role-of-references-style-guide-md-in-diagram-design) Discover the role of references/style-guide.md in diagram design. This file centralizes visual tokens like colors and typography for consistent and themeable diagrams. - Tags: best-practices - Published: 2026-08-21 ### [What Is the Purpose of SKILL.md in the Diagram-Design Project?](/cathrynlavery/diagram-design/purpose-of-skill-md-in-diagram-design) Understand SKILL.md's purpose in the diagram-design project. Discover how it defines skill discovery, invocation, and documentation for the Instagit platform. - Tags: how-to-guide - Published: 2026-08-21 ### [Diagram-Design Repository Structure: Complete Guide to Files and Directories](/cathrynlavery/diagram-design/diagram-design-repository-structure-directories-files) Explore the cathrynlavery/diagram-design repository structure. Understand its modular Agent Skill architecture with platform manifests, slash-command definitions, and a centralized skill core. - Tags: how-to-guide - Published: 2026-08-21 ### [How Diagram Design Loads Semantic, Type, and Animation References](/cathrynlavery/diagram-design/how-are-semantic-type-animation-references-loaded) Learn how Diagram Design loads semantic, type, and animation references using a convention-based loader. Explore markdown file parsing and runtime API access for efficient lookup. - Tags: internals - Published: 2026-08-21 ### [How the Progressive Disclosure Model Works in Diagram Design: A Three-Stage Loading Architecture](/cathrynlavery/diagram-design/how-does-progressive-disclosure-model-work-in-diagram-design) Understand how the progressive disclosure model works in Diagram Design. Explore its three-stage loading architecture for efficient semantic behavior, visual layout, and animation. - Tags: architecture - Published: 2026-08-21 ### [How Diagram Design Handles Complex Diagrams: A Layered Architecture Guide](/cathrynlavery/diagram-design/how-does-diagram-design-handle-complex-diagrams) Learn how Diagram Design handles complex diagrams using a layered architecture. Discover strategies for complexity budget, routing, and decomposition. - Tags: architecture - Published: 2026-08-20 ### [Diagram Design Advanced Features: A Complete Guide to Brand-Aware, Semantic Diagramming](/cathrynlavery/diagram-design/what-are-the-advanced-features-of-diagram-design) Explore advanced Diagram Design features like brand-aware styling and semantic patterns. Create editorial-quality visuals for multiple agent platforms with this comprehensive guide. - Tags: deep-dive - Published: 2026-08-20 ### [How to Install Diagram Design: A Complete Guide for Claude Code, Codex, Factory Droid, and Pi](/cathrynlavery/diagram-design/how-to-install-diagram-design) Install Diagram Design for Claude Code, Codex, Factory Droid, and Pi in three easy steps. Follow our complete guide to add the marketplace source, install the plugin, and refresh the cache. - Tags: how-to-guide - Published: 2026-08-20 ### [How to Troubleshoot Common Issues in Diagram Design: A Developer’s Guide](/cathrynlavery/diagram-design/how-to-troubleshoot-common-issues-in-diagram-design) Troubleshoot common diagram design issues. Use verification scripts to pinpoint failures in command parsing, reference loading, or rendering, and fix source files or templates for smoother development. - Tags: how-to-guide - Published: 2026-08-20 ### [How to Use Diagram Design for Software Architecture Diagrams: A Complete Guide](/cathrynlavery/diagram-design/how-to-use-diagram-design-for-software-architecture-diagrams) Learn to create stunning software architecture diagrams with Diagram Design. Install the plugin, select Architecture, and export to HTML, SVG, or PNG for editorial quality. - Tags: how-to-guide - Published: 2026-08-20 ### [What Are the Dependencies for Diagram Design? A Complete Guide to Installation and Requirements](/cathrynlavery/diagram-design/what-are-the-dependencies-for-diagram-design) Discover diagram design dependencies. Learn about Python 3.9 requirements and optional Playwright for PNG export. Get your setup right for seamless diagram creation. - Tags: how-to-guide - Published: 2026-08-20 ### [How to Automate Diagram Generation with Diagram Design: A Complete Guide for AI Agents](/cathrynlavery/diagram-design/how-to-automate-diagram-generation-with-diagram-design) Automate diagram generation with Diagram Design. This guide shows AI agents how to create editorial-quality diagrams using a three-layer architecture. Learn more now. - Tags: how-to-guide - Published: 2026-08-20 ### [Diagram Design Principles Explained: A Complete Guide to Editorial Minimalism, Accessibility, and Visual Systems](/cathrynlavery/diagram-design/what-are-the-design-principles-behind-diagram-design) Learn diagram design principles for editorial minimalism, accessibility, and robust visual systems. Discover how to create effective, self-contained SVG/HTML artifacts. - Tags: deep-dive - Published: 2026-08-20 ### [How to Report a Bug in Diagram Design: A Step‑by‑Step Guide](/cathrynlavery/diagram-design/how-to-report-a-bug-in-diagram-design) Learn how to report a bug in Diagram Design with this step by step guide. Follow simple instructions to file a GitHub issue or report a security vulnerability effectively. - Tags: how-to-guide - Published: 2026-08-20 ### [Benefits of Using Diagram Design: 8 Advantages for Editorial-Quality Visuals](/cathrynlavery/diagram-design/what-are-the-benefits-of-using-diagram-design) Discover the benefits of Diagram Design for editorial quality visuals. Streamline your workflow and create consistent brand diagrams efficiently. - Tags: getting-started - Published: 2026-08-20 ### [How to Use Diagram Design for Code Visualization: A Complete Guide to AI-Powered Technical Diagrams](/cathrynlavery/diagram-design/how-to-use-diagram-design-for-code-visualization) Visualize your code with Diagram Design. This guide shows how to generate AI-powered technical diagrams from natural language or existing sources for clear, engaging documentation. - Tags: how-to-guide - Published: 2026-08-20 ### [Is Diagram Design Open-Source? MIT License, Code Access, and Contribution Guide](/cathrynlavery/diagram-design/is-diagram-design-open-source) Diagram Design is open-source under the MIT License. Explore the full codebase and learn how to contribute to this collaborative project. Get started today! - Tags: getting-started - Published: 2026-08-20 ### [How to Export Diagrams from Diagram Design: SVG and PNG Export Guide](/cathrynlavery/diagram-design/how-to-export-diagrams-from-diagram-design) Easily export diagrams from Diagram Design as SVG or PNG files. Learn simple slash commands and AI agent requests for quick export of your designs. - Tags: how-to-guide - Published: 2026-08-20 ### [What Kinds of Diagrams Can Diagram Design Create? 38 Editorial-Grade Visual Types Explained](/cathrynlavery/diagram-design/what-kind-of-diagrams-can-diagram-design-create) Discover the 38 diagram types Diagram Design creates. From software architecture to business analysis, get editorial-grade visuals rendered as HTML with inline SVG. - Tags: getting-started - Published: 2026-08-20 ### [How to Integrate Diagram Design with CI/CD Pipelines: A Complete Automation Guide](/cathrynlavery/diagram-design/how-to-integrate-diagram-design-with-ci-cd-pipelines) Automate diagram design with CI/CD pipelines. Install the skill, generate diagrams as build artifacts, and export production-ready visuals for seamless integration. - Tags: how-to-guide - Published: 2026-08-20 ### [Diagram Design Installation Requirements: Complete Setup Guide for 2024](/cathrynlavery/diagram-design/what-are-the-installation-requirements-for-diagram-design) Diagram Design installation requirements: Get the complete 2024 setup guide. Discover supported AI assistants, network access, and optional Python 3 for PNG exports. - Tags: getting-started - Published: 2026-08-20 ### [How to Customize Diagram Appearance in Diagram Design: A Complete Schema Reference](/cathrynlavery/diagram-design/how-to-customize-diagram-appearance-in-diagram-design) Learn to customize diagram appearance in Diagram Design with a JSON schema. Control colors, styles, and focal elements for stunning visuals. Export your designs easily. - Tags: api-reference - Published: 2026-08-20 ### [Can Diagram Design Be Used for UML Diagrams? Yes—Here's How UML Class Diagrams Work](/cathrynlavery/diagram-design/can-diagram-design-be-used-for-uml-diagrams) Learn how Diagram Design supports UML Class diagrams with a dedicated reference file. Explore grammar, layout rules, and visual conventions to create your own UML diagrams easily. - Tags: how-to-guide - Published: 2026-08-20 ### [What Programming Languages Does Diagram Design Support?](/cathrynlavery/diagram-design/what-programming-languages-does-diagram-design-support) Diagram Design supports natural language and Mermaid/draw.io files, making it language-agnostic. Learn how to create diagrams without coding. Python is used for tooling. - Tags: getting-started - Published: 2026-08-20 ### [How to Contribute to Diagram Design: A Complete Guide to Agent Skill Development](/cathrynlavery/diagram-design/how-to-contribute-to-diagram-design) Learn how to contribute to Diagram Design by passing validation gates, adding reference files, and bumping the plugin version. Follow this guide for a smooth pull request submission. - Tags: how-to-guide - Published: 2026-08-20 ### [Diagram Design Features: A Complete Guide to the AI-Powered Diagramming Skill](/cathrynlavery/diagram-design/what-are-the-main-features-of-diagram-design) Explore Diagram Design features. Generate editorial-quality diagrams with AI. No build steps, JavaScript, or external dependencies needed. Learn more about this powerful Claude skill. - Tags: getting-started - Published: 2026-08-20 ### [How to Set Up Diagram Design Locally: A Complete Installation Guide](/cathrynlavery/diagram-design/how-to-set-up-diagram-design-locally) Install Diagram Design locally to generate diagrams offline. Clone the repo, register with your agent, and verify the installation with the HTML gallery. - Tags: how-to-guide - Published: 2026-08-20 ### [Diagram-Design Template Variants: When to Use Light, Dark, and Full](/cathrynlavery/diagram-design/what-are-the-three-template-variants-and-when-to-use-each) Learn when to use light dark and full diagram design template variants. Select the best SVG template for your documentation context with the --variant flag. - Tags: deep-dive - Published: 2026-08-20 ### [How to Add IT or Cloud Icons to Architecture Diagrams Using Diagram Design](/cathrynlavery/diagram-design/how-do-i-add-it-cloud-icons-to-architecture-diagrams) Easily add IT or cloud icons to architecture diagrams. Learn how to use the Diagram Design Icons primitive to embed monochrome SVG icons directly into your diagrams. - Tags: how-to-guide - Published: 2026-08-20 ### [How the self_check.py Script Validates Diagrams in diagram-design](/cathrynlavery/diagram-design/how-does-self_check-py-script-validate-diagrams) Learn how self_check.py validates diagram HTML files by detecting unsafe tags, verifying SVG accessibility, and enforcing script integrity for the diagram-design repository. - Tags: how-to-guide - Published: 2026-08-20 ### [Universal Anti-Patterns That Suggest AI Slop in Diagrams: 12 Rules From the cathrynlavery/diagram-design System](/cathrynlavery/diagram-design/what-are-universal-anti-patterns-for-ai-slop-in-diagrams) 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. - Tags: best-practices - Published: 2026-08-20 ### [How the First-Run Style Gate Prevents Default-Skinned Diagrams in Diagram Design](/cathrynlavery/diagram-design/how-does-the-first-run-style-gate-prevent-default-skinned-diagrams) Discover how the first-run style gate in Diagram Design stops default-skinned diagrams by requiring explicit customization before generation. - Tags: internals - Published: 2026-08-20 ### [How to Create a Sketchy or Hand-Drawn Variant of a Diagram Using the Diagram Design Skill](/cathrynlavery/diagram-design/how-do-i-create-a-sketchy-hand-drawn-variant-of-a-diagram) Easily create a sketchy or hand-drawn diagram variant with the Diagram Design skill. Apply a simple filter to transform clean SVGs into hand-drawn illustrations. - Tags: how-to-guide - Published: 2026-08-20 ### [How to Create a Terminal or CLI-Window Variant of a Diagram Using the Instagit Diagram-Design Skill](/cathrynlavery/diagram-design/how-can-i-create-a-terminal-cli-window-variant-of-a-diagram) Create a terminal or CLI-window diagram variant with InstaGit Diagram-Design. Use the `--format terminal` or `--format ansi` flag with `insta diagram export` to render diagrams directly in your shell. - Tags: how-to-guide - Published: 2026-08-20 ### [Complexity Budgets for Different Diagram Types in diagram-design: 9 Nodes, 12 Edges, and Source Limits](/cathrynlavery/diagram-design/what-are-the-complexity-budgets-for-different-diagram-types) Discover complexity budgets for diagram types in diagram-design. Learn about the 9 node and 12 edge limits for flowcharts, sequence diagrams, and more. - Tags: deep-dive - Published: 2026-08-20 ### [How to Export Diagrams to PNG or SVG Formats in Diagram Design](/cathrynlavery/diagram-design/how-do-i-export-diagrams-to-png-or-svg-formats) Easily export diagrams to PNG or SVG formats using the /export-diagram command. Get vector or high-resolution raster images for your projects. - Tags: how-to-guide - Published: 2026-08-19 ### [What Accessibility Features Are Included in Generated SVG Diagrams?](/cathrynlavery/diagram-design/what-accessibility-features-are-included-in-the-generated-svg-diagrams) Discover accessibility features in generated SVG diagrams. Learn how Diagram Design ensures WCAG 2.1 AA compliance with role img title desc and aria-labelledby. - Tags: deep-dive - Published: 2026-08-19 ### [How to Add Optional Animation to a Diagram in cathrynlavery/diagram-design](/cathrynlavery/diagram-design/how-do-i-add-optional-animation-to-a-diagram) Easily add optional animation to your diagrams in cathrynlavery/diagram-design. Learn to declare attributes, import controllers, and validate your animated diagrams. - Tags: how-to-guide - Published: 2026-08-19 ### [What the Four Import Dials Control in diagram-design: Format, Size, Detail, and Audience](/cathrynlavery/diagram-design/what-do-the-four-import-dials-control) Master diagram design by understanding the four import dials: format, size, detail, and audience. Control output file type, canvas dimensions, element budget, and lexical style effortlessly. - Tags: deep-dive - Published: 2026-08-19 ### [How Importing Diagrams from Mermaid Syntax Works in Diagram-Design: The 7-Stage Pipeline](/cathrynlavery/diagram-design/how-does-importing-diagrams-from-mermaid-syntax-work) Discover how diagram-design imports Mermaid syntax through a 7-stage pipeline. Learn how it validates, extracts, normalizes, and renders diagrams without JavaScript execution. - Tags: how-to-guide - Published: 2026-08-19 ### [How Importing from draw.io Files Works and What Data Is Preserved](/cathrynlavery/diagram-design/how-does-importing-from-draw-io-files-function-and-what-data-is-preserved) Import draw.io files into cathrynlavery/diagram-design. Discover how the three-stage pipeline preserves identifiers, geometry, styling, hierarchy, and connectivity. - Tags: how-to-guide - Published: 2026-08-19 ### [How Brand Onboarding from a URL Extracts Design Tokens in diagram-design](/cathrynlavery/diagram-design/how-does-brand-onboarding-from-a-url-extract-design-tokens) Learn how diagram-design brand onboarding extracts design tokens from a URL. It scans websites for colors and fonts, mapping them to semantic tokens for automatic brand inheritance in diagrams. - Tags: deep-dive - Published: 2026-08-19 ### [How to Customize Diagram Colors and Fonts Using `style-guide.md`](/cathrynlavery/diagram-design/how-can-i-customize-diagram-colors-and-fonts-using-style-guide-md) Learn to customize diagram colors and fonts by editing style-guide.md. Discover methods like semantic role tables, scripts, and named profiles for effortless visual token management. - Tags: how-to-guide - Published: 2026-08-19 ### [How the 4px Grid System Facilitates Professional Diagram Design](/cathrynlavery/diagram-design/how-does-the-4px-grid-system-facilitate-diagram-design) Master diagram design with the 4px grid system. Ensure perfect alignment and publication ready SVGs by eliminating jitter for professional results. - Tags: best-practices - Published: 2026-08-19 ### [Mandatory Connector Rules for Diagram Boxes: 6 SVG Layout Constraints Explained](/cathrynlavery/diagram-design/what-are-the-mandatory-connector-rules-for-diagram-boxes) Master the 6 mandatory connector rules for SVG diagram boxes. Learn about orthogonal elbows, z-order, crossing bridges, fanned attach points, masked labels, and visible routing. - Tags: how-to-guide - Published: 2026-08-19 ### [How to Choose the Right Diagram Type for Your Needs: A Complete Guide](/cathrynlavery/diagram-design/how-do-i-choose-the-right-diagram-type-for-my-needs) Choose the right diagram type by matching content to semantic patterns and selecting a visual layout. This guide helps you find the perfect diagram for your needs. - Tags: how-to-guide - Published: 2026-08-19 ### [What Are the 28 Visual Diagram Types in Diagram Design? Complete Reference](/cathrynlavery/diagram-design/what-are-the-28-visual-diagram-types-supported-by-this-library) Discover the 28 visual diagram types supported by the cathrynlavery diagram design library. Explore this comprehensive reference for all diagram design needs. - Tags: reference - Published: 2026-08-19 ### [When Should You Use Semantic Pattern Routing for Diagrams?](/cathrynlavery/diagram-design/when-should-i-use-semantic-pattern-routing-for-diagrams) Learn when to use semantic pattern routing for diagrams. Discover how to visually represent behavior, state changes, rules, and primitives that go beyond simple visual types. Optimize your diagram design. - Tags: best-practices - Published: 2026-08-19 ### [How to Debug Label Placement Issues Using the Geometry Verification Tool in diagram-design](/cathrynlavery/diagram-design/how-to-debug-label-placement-issues-with-geometry-verification-tool-diagram-design) Debug label placement issues in diagram-design with the geometry verification tool. Learn how it detects and prevents overlapping label masks and node fills for cleaner diagrams. - Tags: how-to-guide - Published: 2026-08-18 ### [How the Profile Marker System Works with .diagram-design Files](/cathrynlavery/diagram-design/how-does-profile-marker-system-work-with-diagram-design-files) Understand the profile marker system for diagram-design files. Learn how it validates profile declarations and loads style guides ensuring workspace isolation. Read now to discover the two-step resolution process. - Tags: internals - Published: 2026-08-18 ### [How to Use Icons in Architecture and Sequence Diagrams with cathrynlavery/diagram-design](/cathrynlavery/diagram-design/how-to-use-icons-in-architecture-sequence-diagrams-with-diagram-design) Learn to add monochrome icons to architecture and sequence diagrams using cathrynlavery/diagram-design. Enhance your diagrams with custom icons that inherit theme colors for a polished look. - Tags: how-to-guide - Published: 2026-08-18 ### [How to Resolve Connector Overlapping Issues in Complex Diagrams with diagram-design](/cathrynlavery/diagram-design/how-to-resolve-connector-overlapping-issues-in-complex-diagrams-diagram-design) Resolve connector overlapping in complex diagrams with diagram-design by enforcing five SKILL rules and validating with verify-geometry.py. Achieve cleaner, more readable designs. - Tags: how-to-guide - Published: 2026-08-18 ### [The Four Dials for Importing Diagrams in Diagram-Design: Format, Size, Detail, and Audience](/cathrynlavery/diagram-design/what-are-the-four-dials-for-importing-diagrams-into-diagram-design) Master Diagram-Design's four import dials Format Size Detail and Audience to control diagram rendering saving and presentation for optimal results. - Tags: how-to-guide - Published: 2026-08-18 ### [How the Fidelity Ledger Works for Imported Diagrams in diagram-design](/cathrynlavery/diagram-design/how-does-fidelity-ledger-work-for-imported-diagrams-in-diagram-design) Discover how the fidelity ledger in diagram-design tracks all changes during Mermaid or Draw.io imports. Understand your imported diagram's complete audit trail for better design management. - Tags: internals - Published: 2026-08-18 ### [How to Handle the First-Run Style Gate in Diagram-Design](/cathrynlavery/diagram-design/what-is-first-run-style-gate-in-diagram-design-and-how-to-handle) Learn to manage the first-run style gate in diagram-design. Customize brand colors before generating diagrams to ensure professional results. - Tags: how-to-guide - Published: 2026-08-18 ### [How `aria-labelledby` and `prefers-reduced-motion` Work in Diagram-Design](/cathrynlavery/diagram-design/how-do-accessibility-features-work-in-diagram-design) Learn how diagram-design implements accessibility with aria-labelledby for screen readers and prefers-reduced-motion to serve static diagrams for users sensitive to animation. - Tags: deep-dive - Published: 2026-08-18 ### [How to Use the Terminal CLI-Window Variant in Diagram-Design](/cathrynlavery/diagram-design/how-to-use-terminal-cli-window-variant-in-diagram-design) Learn to use the terminal CLI-window variant in diagram-design. Apply a fixed faux-shell aesthetic with custom CSS tokens via CLI flag or HTML template substitution. - Tags: how-to-guide - Published: 2026-08-18 ### [How to Create Sketchy or Hand-Drawn Style Diagrams with Diagram-Design](/cathrynlavery/diagram-design/how-to-create-sketchy-hand-drawn-diagrams-with-diagram-design) Easily create sketchy hand-drawn style diagrams using cathrynlavery/diagram-design. Apply a turbulence filter to warp shapes while keeping text crisp and accessible for clear communication. - Tags: how-to-guide - Published: 2026-08-18 ### [How to Add Annotation Callouts to Diagrams in diagram-design](/cathrynlavery/diagram-design/how-to-add-annotation-callouts-to-diagrams-in-diagram-design) Learn to add annotation callouts to your diagrams with diagram-design. This guide explains how to use the SVG primitive for clear editorial asides. - Tags: how-to-guide - Published: 2026-08-18 ### [How to Use the Minimal Light, Minimal Dark, and Full‑Editorial Variants in Diagram‑Design](/cathrynlavery/diagram-design/how-to-use-minimal-light-minimal-dark-full-editorial-variants-in-diagram-design) Learn to use minimal light, minimal dark, and full-editorial variants in diagram-design. Explore these static HTML templates to enhance your diagramming workflow. - Tags: how-to-guide - Published: 2026-08-18 ### [Complexity Budget Limits for Different Diagram Types in diagram-design](/cathrynlavery/diagram-design/what-are-complexity-budget-limits-per-diagram-type-in-diagram-design) Discover complexity budget limits for diagram types in diagram-design. Learn about the 9 node and 12 edge limit and safety parsing limits to optimize your diagrams. - Tags: deep-dive - Published: 2026-08-18 ### [How the 4px Grid System Shapes Layout in Diagram-Design](/cathrynlavery/diagram-design/how-does-4px-grid-system-in-diagram-design-affect-layout) Discover how the 4px grid system in Diagram-Design ensures pixel-perfect alignment and predictable visual rhythm by making all values divisible by four. Learn to create consistent layouts. - Tags: deep-dive - Published: 2026-08-18 ### [Understanding Semantic Tokens (Paper, Ink, Muted, Accent) in the Diagram-Design Style Guide](/cathrynlavery/diagram-design/understanding-semantic-tokens-in-diagram-design-style-guide) Learn how semantic tokens like paper ink muted and accent in the diagram-design style guide connect meaning to color. Adapt diagrams to any brand palette with this JSON configuration. - Tags: deep-dive - Published: 2026-08-18 ### [How to Add Accessible Motion to Diagrams Using cathrynlavery/diagram-design](/cathrynlavery/diagram-design/how-to-add-accessible-motion-to-diagrams-using-diagram-design) Learn to add accessible motion to diagrams with cathrynlavery/diagram-design. This WAI-ARIA-compatible system enhances SVG diagrams with four modes while ensuring full accessibility. - Tags: how-to-guide - Published: 2026-08-18 ### [How Semantic Patterns Work in Diagram‑Design vs Direct Type Selection](/cathrynlavery/diagram-design/how-do-semantic-patterns-work-in-diagram-design-vs-direct-type-selection) Understand how semantic patterns in diagram-design differ from direct type selection. Learn to define diagram function before visual type for better results. - Tags: deep-dive - Published: 2026-08-18 ### [28 Visual Diagram Types in diagram-design: Complete Guide with Use Cases](/cathrynlavery/diagram-design/what-are-the-28-visual-diagram-types-in-diagram-design-and-use-cases) Explore 28 visual diagram types in diagram-design with this complete guide. Discover use cases and learn how to leverage this powerful tool for clear communication and problem solving. - Tags: deep-dive - Published: 2026-08-18 ### [How to Export Diagrams from Diagram-Design as PNG or SVG](/cathrynlavery/diagram-design/how-to-export-diagrams-as-png-or-svg-from-diagram-design) Easily export diagrams from Diagram-Design as PNG or SVG files. Learn how to use the export-diagram command to convert your HTML diagrams into popular image formats. - Tags: how-to-guide - Published: 2026-08-18 ### [How to Import and Convert Mermaid Diagrams to the cathrynlavery/diagram-design Format](/cathrynlavery/diagram-design/how-to-import-and-convert-mermaid-diagrams-to-diagram-design-format) Easily import and convert Mermaid diagrams to the cathrynlavery/diagram-design format. Use import-mermaid command and mermaid_extract.py for seamless conversion to HTML SVG or PNG. - Tags: how-to-guide - Published: 2026-08-18 ### [How to Import and Redraw Existing draw.io Diagrams in the Diagram-Design Style](/cathrynlavery/diagram-design/how-to-import-and-redraw-draw-io-diagrams-in-diagram-design-style) Easily import and redraw draw.io diagrams into Diagram-Design using the import-drawio command. Convert .drawio, .xml, and image files to native diagrams with consistent styling. - Tags: how-to-guide - Published: 2026-08-18 ### [How the Brand Onboarding Process Extracts Colors from a Website for Diagram Design](/cathrynlavery/diagram-design/how-does-brand-onboarding-extract-colors-from-website-for-diagram-design) Learn how brand onboarding extracts website colors for diagram design. Discover how we parse CSS, rank colors by prominence, and map them to design tokens. - Tags: deep-dive - Published: 2026-08-18 ### [How to Customize Diagram Colors and Fonts with cathrynlavery/diagram-design: A Complete Guide](/cathrynlavery/diagram-design/how-to-customize-diagram-colors-and-fonts-with-cathrynlavery-diagram-design) Learn to customize diagram colors and fonts using cathrynlavery/diagram-design. Edit the style-guide.md file or use the automated onboarding flow for a seamless design integration. - Tags: how-to-guide - Published: 2026-08-18 ### [How to Use diagram-design Diagrams in Figma: Complete Export Guide](/cathrynlavery/diagram-design/can-diagram-design-diagrams-be-used-in-figma) Easily import diagram-design diagrams into Figma as SVGs. Maintain fonts, colors, and layout for seamless integration. Export your designs and enhance your Figma projects. - Tags: how-to-guide - Published: 2026-08-17 ### [Dependencies for Exporting PNG Diagrams with diagram-design: Playwright Setup Guide](/cathrynlavery/diagram-design/what-are-the-dependencies-for-exporting-png-diagrams-with-diagram-design) Learn the dependencies for exporting PNG diagrams with diagram-design. This guide covers Playwright setup and Chromium installation for seamless diagram exports. - Tags: how-to-guide - Published: 2026-08-17 ### [How Diagram-Design Handles Reduced Motion for Accessibility: A Technical Deep Dive](/cathrynlavery/diagram-design/how-does-diagram-design-handle-reduced-motion-for-accessibility) Learn how Diagram-Design uses CSS media queries, JavaScript, and automated verification for reduced motion accessibility. Discover static frame rendering and hidden controls. - Tags: deep-dive - Published: 2026-08-17 ### [diagram-design Animation Modes: The Four Built-in Types Explained](/cathrynlavery/diagram-design/what-are-the-different-animation-modes-available-in-diagram-design) Explore the four animation modes in cathrynlavery/diagram-design: none, reveal, step, and loop. Understand how data-motion-mode controls SVG diagram animations. - Tags: deep-dive - Published: 2026-08-17 ### [How to Enable Animation and Motion in Diagram‑Design: A Complete Implementation Guide](/cathrynlavery/diagram-design/how-to-enable-animation-and-motion-in-diagram-design) Learn to enable animation and motion in Diagram-Design using its optional presentation layer. This guide provides a complete implementation walkthrough for adding dynamic visuals to your diagrams. - Tags: how-to-guide - Published: 2026-08-17 ### [Diagram-Design Export Options: Formats, Scaling, and Audience Settings](/cathrynlavery/diagram-design/what-are-the-export-options-for-diagram-design-format-size-detail-audience) Export diagrams from diagram-design to SVG or PNG. Control scale and audience settings to optimize resolution for any medium, from web to print. Learn more. - Tags: api-reference - Published: 2026-08-17 ### [How to Export Diagrams from Diagram-Design to PNG and SVG](/cathrynlavery/diagram-design/how-to-export-diagrams-from-diagram-design-to-png-and-svg) Easily export diagrams from Diagram-Design to PNG and SVG formats. Learn how to use the export-diagram command for quick and efficient image generation. - Tags: how-to-guide - Published: 2026-08-17 ### [What Draw.io and Mermaid Elements Are Not Carried Over During Import to Diagram-Design](/cathrynlavery/diagram-design/what-drawio-and-mermaid-elements-are-not-carried-over-during-import-to-diagram-design) Discover which draw.io and Mermaid elements are lost during diagram-design import. Learn what gets stripped and what stays to ensure smooth diagram migration. - Tags: how-to-guide - Published: 2026-08-17 ### [What draw.io and Mermaid Elements Are Preserved During Import to Diagram-Design](/cathrynlavery/diagram-design/what-drawio-and-mermaid-elements-are-preserved-during-import-to-diagram-design) Learn what draw io and Mermaid elements Diagram Design preserves during import including shapes text styling groups connectors and hyperlinks - Tags: api-reference - Published: 2026-08-17 ### [How to Import draw.io Diagrams into diagram-design: A Complete Guide](/cathrynlavery/diagram-design/how-to-import-drawio-diagrams-into-diagram-design) Easily import draw.io diagrams into diagram-design. Learn how diagram-design reinterprets your draw.io files, redrawing them to fit your project's style guide and grid for seamless integration. - Tags: how-to-guide - Published: 2026-08-17 ### [How Diagram-Design Uses Semantic Patterns to Select Diagram Types](/cathrynlavery/diagram-design/how-does-diagram-design-use-semantic-patterns-to-select-diagram-types) Diagram-Design uses semantic patterns for a two-stage selection workflow. It maps system behavior to patterns before layout, keeping architectural meaning independent of rendering. - Tags: deep-dive - Published: 2026-08-17 ### [Complete Guide to Specialized Diagram Types in Diagram-Design](/cathrynlavery/diagram-design/what-are-the-available-specialized-diagram-types-in-diagram-design) Explore 28 specialized diagram types in Diagram-Design. Learn how to use the /diagram-design:make command and find reference files for each type. - Tags: getting-started - Published: 2026-08-17 ### [The 27 Available Diagram Types in diagram-design: Complete Visual Reference](/cathrynlavery/diagram-design/what-are-the-available-set-diagram-types-in-diagram-design) Explore the 27 diagram types in diagram-design, from Architecture and Flowchart to Medallion and DP Security Matrix. Get a complete visual reference for your technical documentation. - Tags: getting-started - Published: 2026-08-17 ### [Available Process Diagram Types in Diagram-Design: Process vs Swimlane](/cathrynlavery/diagram-design/what-are-the-available-process-diagram-types-in-diagram-design) Explore process diagram types in Diagram-Design. Learn about Process diagrams for detailed workflows and Swimlane diagrams for cross-functional flows to enhance your project documentation. - Tags: getting-started - Published: 2026-08-17 ### [Positioning Diagram Types in Diagram-Design: The Complete Taxonomy of 27 Layouts](/cathrynlavery/diagram-design/what-are-the-available-positioning-diagram-types-in-diagram-design) Explore 27 positioning diagram types in diagram-design, from bar charts to Venn diagrams. Discover consistent layout rules for Mermaid and DrawIO imports. - Tags: api-reference - Published: 2026-08-17 ### [Available Hierarchical Diagram Types in diagram-design](/cathrynlavery/diagram-design/what-are-the-available-hierarchical-diagram-types-in-diagram-design) Explore tree diagrams, org charts, and nested diagrams in cathrynlavery/diagram-design. Understand the available hierarchical diagram types to visualize your data effectively. - Tags: api-reference - Published: 2026-08-17 ### [Connection Diagram Types in Diagram-Design: A Complete Guide](/cathrynlavery/diagram-design/what-are-the-available-connection-diagram-types-in-diagram-design) Explore 15 connection diagram types in Diagram-Design, including Architecture, Flowchart, and Data Flow. Ensure visual consistency with strict orthogonal routing. - Tags: how-to-guide - Published: 2026-08-17 ### [The 27 Visual Types Supported by diagram-design: A Complete Catalog](/cathrynlavery/diagram-design/what-are-the-27-visual-types-supported-by-diagram-design) Explore the 27 visual types supported by diagram-design, from flowcharts to medallion architecture. Understand each type with dedicated reference files for clear diagram creation. - Tags: getting-started - Published: 2026-08-17 ### [How to Reference a Client Profile in a Diagram-Design Project](/cathrynlavery/diagram-design/how-to-reference-a-client-profile-in-a-diagram-design-project) Learn to reference a client profile in a diagram-design project by creating a marker file in your project root. Easily link client data to your diagrams. - Tags: how-to-guide - Published: 2026-08-17 ### [Where Are Diagram-Design Client Profiles Stored? File Paths, Format & CLI Commands](/cathrynlavery/diagram-design/where-are-diagram-design-client-profiles-stored) Find where diagram design client profiles are stored at ~/.diagram-design/profiles/.md. Learn file paths, format, and CLI commands to manage your profiles. - Tags: how-to-guide - Published: 2026-08-17 ### [How to Manually Customize Brand Tokens in Diagram-Design: A Complete Guide](/cathrynlavery/diagram-design/how-to-manually-customize-brand-tokens-in-diagram-design) Learn to manually customize brand tokens in diagram-design. Edit the style guide markdown table and run the lint script to update hex values for paper, ink, and accent tokens. - Tags: how-to-guide - Published: 2026-08-17 ### [How to Onboard Your Brand to Diagram-Design Using a Website URL: A Complete Guide](/cathrynlavery/diagram-design/how-to-onboard-my-brand-to-diagram-design-using-a-website-url) Onboard your brand to Diagram-Design by providing a URL. The tool extracts palettes, typography, maps to tokens, verifies contrast, and generates a style guide. - Tags: how-to-guide - Published: 2026-08-17 ### [How to Enable Automatic Updates for Diagram-Design: A Complete Guide](/cathrynlavery/diagram-design/how-to-enable-automatic-updates-for-diagram-design) Learn how to enable automatic updates for diagram-design. This guide explains how to activate the GitHub Actions workflow and use Dependabot for seamless updates. - Tags: how-to-guide - Published: 2026-08-17 ### [How to Install the Diagram‑Design Skill for Codex in 2 Steps](/cathrynlavery/diagram-design/how-to-install-diagram-design-skill-for-codex) Easily install the diagram-design skill for Codex in 2 simple steps. Follow our guide to enhance your Codex experience with diagramming capabilities from cathrynlavery/diagram-design. - Tags: how-to-guide - Published: 2026-08-17 ### [How to Manually Override or Update Design Tokens in Diagram Design: 3 Methods](/cathrynlavery/diagram-design/diagram-design-manual-override-design-tokens) Learn 3 ways to override or update design tokens in Diagram Design manually. Edit style-guide.md, use manual onboarding, or update a saved profile for custom diagram styles. - Tags: how-to-guide - Published: 2026-08-16 ### [Alternative Sources for Brand Onboarding in Diagram Design: 6 Methods Beyond URLs](/cathrynlavery/diagram-design/diagram-design-alternative-brand-onboarding-sources) Explore 6 alternative brand onboarding sources for diagram design beyond URLs, including installed skills, local folders, and manual token paste for secure offline workflows. - Tags: how-to-guide - Published: 2026-08-16 ### [What Is a Fidelity Receipt in Diagram Design's Onboarding Process?](/cathrynlavery/diagram-design/diagram-design-fidelity-receipt-onboarding) Understand fidelity receipts in Diagram Design's onboarding. Learn how this audit trail tracks branding data like colors, fonts, and URLs extracted from source websites. Essential for project consistency. - Tags: getting-started - Published: 2026-08-16 ### [URL-Based Brand Onboarding Validation Checks in Diagram-Design](/cathrynlavery/diagram-design/diagram-design-url-onboarding-validation-checks) Discover URL-based brand onboarding validation checks: AA contrast, accent saturation, and paper color purity ensure accessible and coherent palettes for your style guide. - Tags: how-to-guide - Published: 2026-08-16 ### [How to Onboard a Brand Using a Website URL in Diagram Design](/cathrynlavery/diagram-design/diagram-design-brand-onboarding-website-url) Automate brand onboarding with Diagram Design. Extract colors and typography from any website URL in a seven-stage flow, mapping to semantic design tokens. Streamline your design process. - Tags: how-to-guide - Published: 2026-08-16 ### [How Backend, API, and Step Nodes Are Styled in Diagram Design: A Complete Guide](/cathrynlavery/diagram-design/diagram-design-backend-api-step-node-styling) Learn how backend, API, and step nodes are styled in Diagram Design. Discover the semantic token system that defines node colors for a consistent visual experience. - Tags: how-to-guide - Published: 2026-08-16 ### [Fill and Stroke Treatments for Focal Nodes in Diagram Design](/cathrynlavery/diagram-design/diagram-design-focal-node-styling) Discover how to apply fill and stroke treatments to focal nodes in Diagram Design. Learn to use coral accent fills and matching strokes for impactful visuals. - Tags: deep-dive - Published: 2026-08-16 ### [How Node Types Are Styled by Function in Diagram Design](/cathrynlavery/diagram-design/diagram-design-node-styling-by-type) Discover how Diagram Design styles nodes by function using a shape-family mapping system that links functional identifiers to CSS classes for visual appearance. Learn more about customizing your diagrams. - Tags: deep-dive - Published: 2026-08-16 ### [4px Grid System Values and Constraints in Diagram-Design](/cathrynlavery/diagram-design/diagram-design-4px-grid-system-values-constraints) Explore the 4px grid system in Diagram-Design. Understand typical values for fonts, nodes, gaps, and padding, along with key constraints to ensure visual consistency. - Tags: deep-dive - Published: 2026-08-16 ### [How the 4px Grid System Improves Diagram Quality in Diagram Design](/cathrynlavery/diagram-design/diagram-design-4px-grid-system-quality) Discover how the 4px grid system in Diagram Design creates publication-ready diagrams by ensuring consistent sizing and spacing. Improve your diagram quality today. - Tags: best-practices - Published: 2026-08-16 ### [Diagram Design Font Families: A Complete Guide to Typography in cathrynlavery/diagram-design](/cathrynlavery/diagram-design/diagram-design-font-families-and-purposes) Discover the Geist and Instrument Serif font families used in Diagram Design for labels, body text, annotations, and titles. Learn about their CSS implementation and system fallbacks. - Tags: deep-dive - Published: 2026-08-16 ### [Diagram Design Typography Standards: Font Roles and Specifications](/cathrynlavery/diagram-design/diagram-design-typography-standards-roles) Explore Diagram Design typography standards. Learn how Instrument Serif Geist Sans and Geist Mono fonts serve specific roles for titles labels and technical details in diagrams. - Tags: best-practices - Published: 2026-08-16 ### [What Is the Default Color Palette Used by Diagram Design?](/cathrynlavery/diagram-design/diagram-design-default-color-palette) Discover the default color palette in Diagram Design. Learn how jet-black and atomic-tangerine render consistently for your diagrams. - Tags: getting-started - Published: 2026-08-16 ### [What Is the Purpose of Semantic Color Roles in Diagram Design's Style Guide?](/cathrynlavery/diagram-design/semantic-color-roles-diagram-design) Learn how semantic color roles in Diagram Design style guides separate visual styling from meaning for consistent accessible and maintainable diagrams - Tags: deep-dive - Published: 2026-08-16 ### [What Information Is Included in Type‑Specific Convention Files for Diagram Design?](/cathrynlavery/diagram-design/diagram-design-type-convention-file-contents) Explore type-specific convention files for Diagram Design. Learn about headers, best use cases, layout rules, anti-patterns, and examples to improve your diagramming. - Tags: api-reference - Published: 2026-08-16 ### [How Diagram Design Separates Behavioral Semantics from Structural Representations in Diagram Type Selection](/cathrynlavery/diagram-design/diagram-design-behavioral-vs-structural-semantics) Learn how Diagram Design separates behavioral semantics from structural representations to guide diagram type selection. Ensure layout follows function. - Tags: deep-dive - Published: 2026-08-16 ### [Diagram Design Visual Types: Complete Guide to All 27 Supported Diagram Types](/cathrynlavery/diagram-design/diagram-design-supported-visual-types) Explore all 27 visual diagram types supported by Diagram Design. Discover specialized rendering rules and layout engines for each type. Learn more now. - Tags: getting-started - Published: 2026-08-16 ### [How Diagram Design Determines the Most Appropriate Visual Type for a Diagram](/cathrynlavery/diagram-design/how-diagram-design-determines-visual-type) Diagram Design employs a two-step semantic-pattern routing and visual-type lookup process to choose the best diagram layout from 27 validated grammars. Learn how to select appropriate visuals. - Tags: best-practices - Published: 2026-08-16 ### [How to Add a New Diagram Type to the Diagram-Design Skill](/cathrynlavery/diagram-design/workflow-adding-new-diagram-type-skill) Learn the six-step declarative workflow to add a new diagram type to the cathrynlavery/diagram-design skill. Register specs, generate examples, and verify without engine changes. - Tags: how-to-guide - Published: 2026-08-15 ### [How to Use the Consultant 2×2 Quadrant Variant with Named Cells](/cathrynlavery/diagram-design/use-consultant-2x2-variant-named-cells) Learn to use the consultant 2x2 quadrant variant with named cells for scenario planning. This matrix uses named scenarios, double-ended axes, and numbered tags for clear visualization. - Tags: how-to-guide - Published: 2026-08-15 ### [What Anti-Patterns Are Explicitly Forbidden in Diagram Creation: The Complete Ruleset](/cathrynlavery/diagram-design/forbidden-diagram-creation-anti-patterns) Discover forbidden diagram creation anti-patterns like flowchart diamonds with many exits or Venn diagrams with four circles. Learn the complete ruleset for clear, honest, and consistent diagrams. - Tags: best-practices - Published: 2026-08-15 ### [How self_check.py Verifies Generated Diagram Integrity](/cathrynlavery/diagram-design/self-check-py-validator-diagram-integrity) Learn how self_check.py verifies generated diagram integrity. This script parses HTML for safety, validates references, enforces accessibility, and ensures motion controller compliance. - Tags: how-to-guide - Published: 2026-08-15 ### [How Google Fonts Are Injected into Standalone SVG Exports in diagram-design](/cathrynlavery/diagram-design/google-fonts-injection-standalone-svg) Discover how Google Fonts are injected into standalone SVG exports in diagram-design. Learn about the clever @import rule technique used during the export process. - Tags: internals - Published: 2026-08-15 ### [How the Motion Controller Works in diagram-design and Why It Uses a Pinned Implementation](/cathrynlavery/diagram-design/motion-controller-implementation-details) Learn how the diagram-design motion controller works and why its pinned implementation ensures consistent animation accessibility and security. Discover the technical details. - Tags: internals - Published: 2026-08-15 ### [Validation Scripts for Linting Diagram Output in the Diagram-Design Repository](/cathrynlavery/diagram-design/validation-scripts-linting-diagram-output) Explore validation scripts for linting diagram output in the cathrynlavery/diagram-design repository. Discover our three-tier system for accessibility and visual consistency. - Tags: how-to-guide - Published: 2026-08-15 ### [How to Manually Edit style-guide.md Tokens Without Running Onboarding](/cathrynlavery/diagram-design/edit-style-guide-tokens-without-onboarding) Manually edit style-guide.md tokens for colors, typography, and layout without running onboarding. Directly modify markdown tables in the cathrynlavery/diagram-design repository. - Tags: how-to-guide - Published: 2026-08-15 ### [Diagram-Design Skill Loading System Architecture: A File-Based Pipeline](/cathrynlavery/diagram-design/skill-loading-system-architecture) Explore the file-based skill loading system architecture for diagram-design. Discover how it efficiently loads resources and generates HTML diagrams with no external dependencies. - Tags: architecture - Published: 2026-08-15 ### [Profile Marker Resolution in Diagram Design: Project Directories vs Installed Skills](/cathrynlavery/diagram-design/profile-marker-resolution-projects-vs-skills) Understand profile marker resolution in diagram design. Learn how project directories and installed skills determine style guides for effective project management and consistency. - Tags: deep-dive - Published: 2026-08-15 ### [How the Export Command Generates SVG and PNG from HTML Diagrams in diagram-design](/cathrynlavery/diagram-design/export-command-svg-png-generation) Learn how the diagram-design export command generates SVG from HTML and PNG using Playwright headless Chromium. Create custom diagram assets easily. - Tags: how-to-guide - Published: 2026-08-15 ### [How Diagram-Design Implements Accessibility with ARIA Labels, Reduced-Motion, and Print Styles](/cathrynlavery/diagram-design/accessibility-implementation-aria-reduced-motion-print) Discover how DiagramDesign implements accessibility with ARIA labels, reduced-motion, and print styles. Learn to create inclusive, user-friendly designs for all. - Tags: deep-dive - Published: 2026-08-15 ### [What Primitives Are Available for Diagram Creation in Diagram Design: The Complete Reference](/cathrynlavery/diagram-design/available-diagram-primitives) Discover the four essential diagram primitives annotation callout sketchy filter terminal window and icon set available in diagram design to enhance your visuals without structural changes. - Tags: api-reference - Published: 2026-08-15 ### [How the Complexity Budget Enforces Node and Connection Limits](/cathrynlavery/diagram-design/complexity-budget-node-connection-limits) Learn how the complexity budget enforces node and connection limits with boolean flags in extractor scripts to block rendering and ensure diagram efficiency. - Tags: how-to-guide - Published: 2026-08-15 ### [How Design Tokens Are Mapped from Extracted Colors in Diagram‑Design](/cathrynlavery/diagram-design/how-design-tokens-mapped-from-colors) Learn how Diagram-Design maps extracted colors to semantic design tokens using a luminance and saturation heuristic. Discover automatic mapping for paper, ink, accent, muted, and link. - Tags: deep-dive - Published: 2026-08-15 ### [How the First-Run Style Gate Prevents Default-Skinned Diagrams in Branded Projects](/cathrynlavery/diagram-design/first-run-style-gate-branded-projects) Learn how the first-run style gate prevents default-skinned diagrams in branded projects by enforcing custom styling before diagram generation. Ensure your project never ships with unintentional default styling. - Tags: internals - Published: 2026-08-15 ### [How the Four Import Dials (Format, Size, Detail, Audience) Affect Diagram Output](/cathrynlavery/diagram-design/how-import-dials-affect-diagram-output) Master diagram output using the four import dials format size detail and audience. Control file types canvas dimensions element budgets and vocabulary choices for better diagrams. - Tags: deep-dive - Published: 2026-08-15 ### [How the Mermaid Import Parser Handles Grammar Types and Markdown Blocks](/cathrynlavery/diagram-design/mermaid-import-parser-grammar-markdown-handling) Discover how the Mermaid import parser in cathrynlavery/diagram-design detects grammar types and Markdown blocks, extracting and normalizing content for specialized processing and a sanitized output. - Tags: how-to-guide - Published: 2026-08-15 ### [Understanding the Draw.io Import Pipeline: From XML Extraction to Semantic Redesign](/cathrynlavery/diagram-design/draw-io-import-pipeline-and-transformations) Explore the draw.io import pipeline. Learn how files are extracted, layout data is stripped, and content is transformed into a semantic model for rendering. - Tags: internals - Published: 2026-08-15 ### [How Optional Animation Works in Diagram-Design: Understanding Motion Modes](/cathrynlavery/diagram-design/how-optional-animation-implemented-motion-modes) Explore optional animation in Diagram-Design. Learn about the four motion modes none reveal step and loop implemented via data-motion-mode for accessible static fallbacks. - Tags: internals - Published: 2026-08-15 ### [How Semantic Patterns Map to Visual Types: The Complete Routing Guide](/cathrynlavery/diagram-design/how-semantic-patterns-map-to-visual-types) Discover how semantic patterns map to visual types using a complete routing guide. Learn to arrange information flexibly with 27 visual types and behavior-driven layout selection. - Tags: deep-dive - Published: 2026-08-15 ### [How to Choose Between the 27 Visual Types in Diagram Design: A Complete Guide](/cathrynlavery/diagram-design/difference-between-27-visual-types-and-usage) Explore the 27 visual types in diagram design to find the perfect fit for your data. Learn when to use each type for hierarchy, flow, state, or analytical relationships. - Tags: tutorial - Published: 2026-08-15 ### [How Client Profiles Work and Resolve Across Different Project Contexts in Diagram Design](/cathrynlavery/diagram-design/how-client-profiles-work-and-resolve-in-projects) Discover how Diagram Design client profiles work and resolve across project contexts. Learn about profile markers and automatic style-guide merging for efficient design. - Tags: deep-dive - Published: 2026-08-15 ### [How the Diagram‑Design Brand Onboarding Workflow Extracts Design Tokens from a Website URL](/cathrynlavery/diagram-design/how-does-brand-onboarding-extract-design-tokens-from-url) Learn how the diagram-design brand onboarding workflow extracts design tokens from a website URL. It scrapes CSS, styles, and screenshots to validate AA contrast compliance for 27 diagram types. - Tags: how-to-guide - Published: 2026-08-15 ### [How to Create Dark Mode Variants Using the Diagram-Design Skin System](/cathrynlavery/diagram-design/how-do-i-create-dark-mode-variants-using-the-skin-system) Effortlessly create dark mode variants with the diagram-design skin system. Define light tokens and run the linter for automatic dark theme generation. Learn more now. - Tags: how-to-guide - Published: 2026-08-14 ### [What Information Does the Fidelity Ledger Report for Imported Diagrams?](/cathrynlavery/diagram-design/what-information-does-the-fidelity-ledger-report-for-imported-diagrams) Discover what the Fidelity ledger reports for imported diagrams, including merged, collapsed, and dropped elements. Understand source versus rendered node counts. - Tags: how-to-guide - Published: 2026-08-14 ### [How `prefers-reduced-motion` Affects Animated Diagrams: Complete Implementation Guide](/cathrynlavery/diagram-design/how-does-prefers-reduced-motion-affect-animated-diagrams) Learn how prefers-reduced-motion transforms animated diagrams into static, accessible frames. Discover the complete implementation guide for your diagrams. - Tags: how-to-guide - Published: 2026-08-14 ### [What Is the First-Run Style Guide Gate and How Does It Enforce Customization](/cathrynlavery/diagram-design/what-is-the-first-run-style-guide-gate-and-how-does-it-enforce-customization) Understand the first-run style guide gate in cathrynlavery/diagram-design. Learn how this safeguard ensures custom style profiles before diagram generation, preventing default outputs and promoting unique designs. - Tags: how-to-guide - Published: 2026-08-14 ### [How to Add Custom or Branded Icons to Diagram‑Design: A Complete Guide](/cathrynlavery/diagram-design/how-do-i-add-custom-or-branded-icons-to-diagram-design) Learn to add custom or branded icons to diagram design. Register SVG symbols or embed PNGs directly to enhance your diagrams with this complete guide. - Tags: how-to-guide - Published: 2026-08-14 ### [CLI Validation Scripts That Verify Diagram Quality and Geometry in Diagram-Design](/cathrynlavery/diagram-design/what-cli-validation-scripts-verify-diagram-quality-and-geometry) Discover CLI validation scripts in cathrynlavery/diagram-design that automatically verify diagram quality and geometry. Ensure clipping, animation, import, and consistency. - Tags: how-to-guide - Published: 2026-08-14 ### [How the Seven Semantic Patterns Route to Specific Visual Types](/cathrynlavery/diagram-design/how-do-the-seven-semantic-patterns-route-to-specific-visual-types) Discover how the seven semantic patterns route to specific visual types using a lookup table with conditional fallbacks for specialized diagramming needs. Learn more today. - Tags: deep-dive - Published: 2026-08-14 ### [What's the Difference Between template.html, template-dark.html, and template-full.html?](/cathrynlavery/diagram-design/whats-the-difference-between-templatehtml-templatedarkhtml-and-templatefullhtml) Understand the differences between template.html, template-dark.html, and template-full.html. Choose the right HTML template for your diagram design project. - Tags: deep-dive - Published: 2026-08-14 ### [How to Enable and Configure the Optional Animation Layer in Diagram-Design](/cathrynlavery/diagram-design/how-do-i-enable-and-configure-the-optional-animation-layer) Easily enable and configure the optional animation layer in Diagram-Design. Learn how to set data-motion-mode and import the template-motion.html controller for dynamic diagrams. - Tags: how-to-guide - Published: 2026-08-14 ### [Mermaid Grammars Supported for Import and Redraw in Diagram-Design: A Complete Guide](/cathrynlavery/diagram-design/what-mermaid-grammars-are-supported-for-import-and-redraw) Discover the four Mermaid grammars flowchart graph sequenceDiagram stateDiagram-v2 and erDiagram supported for import and redraw in Diagram-Design. Learn more now. - Tags: how-to-guide - Published: 2026-08-14 ### [How Diagram-Design Ensures WCAG Accessibility Compliance: A Deep Dive into the SVG Accessibility Contract](/cathrynlavery/diagram-design/how-does-diagram-design-ensure-wcag-accessibility-compliance) Learn how DiagramDesign ensures WCAG accessibility with its automated accessible SVG contract. Discover the details of SVG accessibility and compliance. - Tags: deep-dive - Published: 2026-08-14 ### [How the 'Faithful' Detail Level Works for Complex Imports Over 24 Nodes](/cathrynlavery/diagram-design/how-does-the-faithful-detail-level-work-for-complex-imports-over-24-nodes) Understand the faithful detail level for complex imports. Learn how it splits diagrams over 24 nodes into an overview and zone-specific details for clarity. - Tags: deep-dive - Published: 2026-08-14 ### [Diagram-Design Primitives: Complete Guide to Annotation, Sketchy, Icons, and Terminal Variants](/cathrynlavery/diagram-design/what-primitives-are-available-for-annotation-sketchy-icons-and-terminal-variants) Explore diagram-design primitives including annotation callouts, sketchy filters, icons, and terminal variants. Enhance your diagrams with these SVG primitives from cathrynlavery/diagram-design. - Tags: deep-dive - Published: 2026-08-14 ### [How the Style-Guide.md Token System Maps Semantic Roles to Colors](/cathrynlavery/diagram-design/how-does-the-styleguidemd-token-system-map-semantic-roles-to-colors) Discover how the style-guide.md token system maps semantic roles like paper and ink to specific colors. Learn about hex and RGBA values for light and dark UI modes. - Tags: deep-dive - Published: 2026-08-14 ### [What Anti-Patterns Indicate AI‑Generated Diagrams: A Complete Guide for the diagram-design System](/cathrynlavery/diagram-design/what-specific-anti-patterns-indicate-ai-generated-diagrams) Discover anti-patterns in AI-generated diagrams. Learn to identify unusual glows, identical nodes, diagonal connectors, and "AI magic" sparkles that signal non-human design. - Tags: how-to-guide - Published: 2026-08-14 ### [Why Does the Design System Require All Coordinates to Be Divisible by 4?](/cathrynlavery/diagram-design/why-does-the-design-system-require-all-coordinates-to-be-divisible-by-4) Discover why our design system mandates coordinates divisible by 4 for pixel-perfect rendering, error-free geometry, and consistent SVG output. Learn more. - Tags: internals - Published: 2026-08-14 ### [Diagram-Design Animation Modes and Static-First Contract: Complete Guide](/cathrynlavery/diagram-design/what-animation-modes-does-diagram-design-support-and-whats-the-static-first-contract) Explore diagram-design animation modes (none, reveal, step, loop) and the static-first contract. Ensure accessibility and deterministic timing for your diagrams. - Tags: deep-dive - Published: 2026-08-14 ### [How draw.io Import Converts and Redraws Diagrams at Different Detail Levels in Diagram Design](/cathrynlavery/diagram-design/how-does-the-drawio-import-convert-and-redraw-diagrams-at-different-detail-levels) Discover how draw.io import in Diagram Design converts *.drawio files into high mid or low abstraction level diagrams using a three-phase pipeline without losing fidelity. - Tags: how-to-guide - Published: 2026-08-14 ### [The Six Mandatory SVG Connector Rules in the diagram-design System](/cathrynlavery/diagram-design/what-are-the-six-mandatory-svg-connector-rules-in-the-design-system) Master the six mandatory SVG connector rules for diagrams. Learn to use rounded orthogonal connectors, fanned attach points, and proper layering for compliant SVG diagrams. - Tags: deep-dive - Published: 2026-08-14 ### [How URL-Based Brand Onboarding Extracts and Applies Color Tokens](/cathrynlavery/diagram-design/how-does-the-url-based-brand-onboarding-extract-and-apply-color-tokens) Learn how URL-based brand onboarding analyzes a website's CSS to extract dominant colors, maps them to semantic tokens, and applies them to your diagrams automatically via style-guide.md. - Tags: how-to-guide - Published: 2026-08-14 ### [Diagram Design Complexity Budget Limits for All 27 Diagram Types](/cathrynlavery/diagram-design/what-are-the-complexity-budget-limits-for-each-of-the-27-diagram-types) Discover complexity budget limits for all 27 diagram types in the Diagram Design repository. Learn node constraints for Sequence, DP integration, and Faithful diagrams. - Tags: deep-dive - Published: 2026-08-14 ### [How Diagram-Design Separates Semantic Patterns from Visual Types](/cathrynlavery/diagram-design/how-does-diagram-design-implement-semantic-patterns-versus-visual-types) Discover how diagram-design separates semantic patterns from visual types using a two-layer architecture. Learn how it ensures correct selection order for system meaning and layout rendering. - Tags: deep-dive - Published: 2026-08-14 ### [Diagram-Design Skill Loading Process Architecture: A Complete Guide](/cathrynlavery/diagram-design/what-is-architecture-of-diagram-design-skill-loading) Explore the diagram-design skill loading process architecture. Learn about the three-phase pipeline for efficient skill loading without hard-coded paths. - Tags: architecture - Published: 2026-08-14 ### [Icon Primitive Tabler Icons: How Diagram-Design Integrates SVG Icons for Diagrams](/cathrynlavery/diagram-design/how-does-icon-primitive-work-with-tabler-icons-diagram-design) Learn how diagram-design integrates Tabler Icons as SVG primitives, using currentColor for automatic color inheritance in any diagram renderer. - Tags: how-to-guide - Published: 2026-08-14 ### [What Is the DP Security Matrix Diagram Type in cathrynlavery/diagram-design?](/cathrynlavery/diagram-design/what-is-dp-security-matrix-diagram-type-diagram-design) Understand the DP security matrix diagram type in cathrynlavery/diagram-design. Visualize per-role per-component access permissions for data platforms. Learn more now. - Tags: getting-started - Published: 2026-08-14 ### [How to Create an IT Current-State Diagram Using diagram-design](/cathrynlavery/diagram-design/how-to-create-it-current-state-diagram-diagram-design) Quickly create an IT current-state diagram using diagram-design. Generate your diagram from YAML, render it, and use an HTML template. Learn how now. - Tags: how-to-guide - Published: 2026-08-14 ### [What Is the Medallion Diagram Type for Data Storage in diagram‑design?](/cathrynlavery/diagram-design/what-is-medallion-diagram-type-data-storage-diagram-design) Learn about the Medallion diagram type for data storage in diagram-design. Visualize hierarchical data lakes and warehouses with this multi-tier layout. - Tags: deep-dive - Published: 2026-08-14 ### [What Is the Loop (Flywheel) Diagram Type in diagram-design?](/cathrynlavery/diagram-design/what-is-loop-flywheel-diagram-type-in-diagram-design) Explore the Loop or flywheel diagram type in diagram-design. Understand how this visualization illustrates reinforcing cycles and state accumulation with a shared hub. - Tags: deep-dive - Published: 2026-08-14 ### [How to Use the Consultant 2×2 Quadrant Diagram in diagram-design: A Complete Guide](/cathrynlavery/diagram-design/how-to-use-consultant-2x2-quadrant-diagram-type-diagram-design) Master the consultant 2x2 quadrant diagram in diagram-design. This guide shows you how to leverage this strategic tool to visualize four futures and make informed decisions. - Tags: how-to-guide - Published: 2026-08-14 ### [Diagram-Design Output Specification Details: The Four-Dial System Explained](/cathrynlavery/diagram-design/what-are-output-specification-details-diagram-design) Explore diagram-design's four-dial output specification: Format, Size, Detail, and Audience. Control diagram appearance and enforce quality gates for reproducible deliverables. - Tags: api-reference - Published: 2026-08-14 ### [How to Create a Sequence Diagram with a Token Refresh Example in Diagram-Design](/cathrynlavery/diagram-design/how-to-create-sequence-diagram-token-refresh-example-diagram-design) Learn to create a sequence diagram with a token refresh example in Diagram-Design. Model OAuth token flows, including happy and failure paths, in self-contained HTML. - Tags: how-to-guide - Published: 2026-08-14 ### [What Is the self_check.py Validation Script in diagram-design?](/cathrynlavery/diagram-design/what-is-self-check-py-validation-script-in-diagram-design) Discover the self_check.py validation script in diagram-design. This pure-Python tool audits HTML output for safety, accessibility, and motion compliance without dependencies. - Tags: how-to-guide - Published: 2026-08-14 ### [How to Import Mermaid Diagrams into Diagram-Design: A Complete Developer Guide](/cathrynlavery/diagram-design/how-to-import-mermaid-diagrams-into-diagram-design) Easily import Mermaid diagrams into Diagram Design using the import-mermaid command. This guide shows developers how to parse Mermaid source and redraw diagrams with Diagram Design's powerful tools. - Tags: how-to-guide - Published: 2026-08-14 ### [What Is the drawio_extract.py Script in diagram-design? A Complete Technical Guide](/cathrynlavery/diagram-design/what-is-drawio-extract-py-script-in-diagram-design) Learn about the drawio_extract.py script in diagram-design. This utility converts draw.io files to a normalized intermediate representation for easier diagram generation. Understand its technical function. - Tags: deep-dive - Published: 2026-08-14 ### [How to Onboard Diagram-Design to Match a Website's Brand: The Complete Guide](/cathrynlavery/diagram-design/how-to-onboard-diagram-design-to-match-website-brand) Learn how to onboard diagram-design to match your website's brand. This guide details the five-step pipeline for extracting colors, fonts, and ensuring accessibility for custom diagram skins. - Tags: how-to-guide - Published: 2026-08-14 ### [How the First-Run Style-Guide Gate Works in diagram-design](/cathrynlavery/diagram-design/how-does-first-run-style-guide-gate-work-in-diagram-design) Discover how the first-run style-guide gate in diagram-design protects your visual brand by ensuring custom accent colors are set before diagram generation. - Tags: internals - Published: 2026-08-14 ### [What Primitive Diagram Elements Are Available in Diagram-Design? (Annotation, Sketchy, Terminal)](/cathrynlavery/diagram-design/what-primitives-are-available-annotation-sketchy-terminal-in-diagram-design) Explore Diagram-Design's primitive elements: Annotation Callout, Sketchy Filter, and Terminal Window. Enhance diagrams with unique visual meaning and style. - Tags: getting-started - Published: 2026-08-14 ### [How to Create a Flowchart Using Diagram-Design: A Complete Guide](/cathrynlavery/diagram-design/how-to-create-flowchart-with-diagram-design) Learn to create a flowchart using diagram-design. Follow this guide to generate flowcharts with AI or by editing HTML templates. Get started easily today. - Tags: how-to-guide - Published: 2026-08-14 ### [What Is the Purpose of Label Geometry Verification in Diagram-Design?](/cathrynlavery/diagram-design/what-is-label-geometry-verification-in-diagram-design) Learn how diagram-design label geometry verification prevents rendering defects, keeping your diagrams readable, accessible, and consistent. Avoid clipped arrow labels. - Tags: deep-dive - Published: 2026-08-14 ### [How to Use Optional Animation Modes in diagram-design: A Complete Guide](/cathrynlavery/diagram-design/how-to-use-animation-modes-in-diagram-design) Master optional animation modes in diagram-design. Learn to control animation with the export-diagram command and animation flags like none, linear, ease-in, ease-out, and ease-in-out. - Tags: how-to-guide - Published: 2026-08-14 ### [List of 27 Visual Diagram Types in Diagram-Design: Complete Reference](/cathrynlavery/diagram-design/what-are-the-27-visual-diagram-types-in-diagram-design) Explore 27 visual diagram types supported by Diagram-Design. Discover this complete reference guide for creating effective diagrams. - Tags: api-reference - Published: 2026-08-14 ### [How to Export Diagrams from Diagram-Design as PNG or SVG](/cathrynlavery/diagram-design/how-to-export-diagrams-as-png-or-svg-in-diagram-design) Easily export diagrams from Diagram-Design as PNG or SVG using the export-diagram command. Control format, scale, and destination for your vector and raster files. - Tags: how-to-guide - Published: 2026-08-14 ### [Can Diagram-Design Import Draw.io Files and Redraw Them with Custom Styling?](/cathrynlavery/diagram-design/diagram-design-import-drawio-files-redraw-custom-styling) Diagram-design imports draw.io files, extracts semantic structure, and redraws diagrams applying your custom design system for a fresh look. - Tags: how-to-guide - Published: 2026-08-14 ### [How to Add Custom Brand Colors for Onboarding in diagram-design](/cathrynlavery/diagram-design/how-to-add-custom-brand-colors-for-onboarding-in-diagram-design) Learn to add custom brand colors for onboarding in diagram-design by fetching from a URL or token file and updating style-guide.md with your brand's palette. - Tags: how-to-guide - Published: 2026-08-14 ### [How Semantic Pattern Routing Works in cathrynlavery/diagram-design](/cathrynlavery/diagram-design/how-does-semantic-pattern-routing-work-in-diagram-design) Discover how semantic pattern routing in cathrynlavery/diagram-design intelligently matches user intent to visual patterns. Learn about this trigger-based lookup system that prioritizes thinking before drawing. - Tags: deep-dive - Published: 2026-08-14