diagram-design
29 editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop.
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.
How to Create a New Diagram Type in diagram-design: A Step-by-Step GuideLearn 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.
Diagram-Design Animation Modes: A Complete Guide to None, Reveal, Step, and LoopExplore Diagram Design's four animation modes: none, reveal, step, and loop. Understand their accessibility contract, ensuring diagrams are available for all users before motion.
Progressive Loading Architecture in diagram-design: On-Demand File Loading ExplainedLearn about progressive loading architecture in diagram-design. Discover how SKILL.md loads at startup and other files are fetched on-demand for efficient performance.
How to Add the Sketchy/Hand-Drawn Filter Primitive to a Diagram in Diagram-DesignLearn 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.
How Excalidraw Import Handles Scene Parsing and Adversarial Labels in diagram-designDiscover 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.
Diagram-Design Size Presets: Complete Guide to Aspect Ratios and Export TargetsExplore 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.
How to Customize Design System Tokens (Colors, Fonts, Spacing) in Diagram-DesignLearn 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.
Traceable Block Decomposition in Diagram-Design: A Complete GuideLearn 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.
How the Style Guide Theming System Maps Semantic Roles to Colors in Diagram-DesignDiscover 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.
Diagram-Design Primitives: Annotation Callouts, Sketchy Filter, and Icons ExplainedExplore 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.
How the draw.io Import Process Works in Diagram-DesignUnderstand the drawio import process in diagram-design. Discover the three-stage pipeline that normalizes, analyzes, and redraws diagrams for a seamless workflow.
Have a question about this repo?
These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:
curl -s "https://instagit.com/install.md" 
Maintain an open-source project? Get it listed too →