Fill and Stroke Combinations for Different Node Types in Diagram-Design

The diagram-design repository defines a strict four-color palette (paper, ink, muted grey, and coral accent) where each node type uses specific fill and stroke combinations declared in reference markdown files, allowing exactly one focal node per diagram to receive the accent color treatment.

The cathrynlavery/diagram-design skill implements a controlled visual language for SVG-based diagrams. Each node type—from process flows to Wardley maps—adheres to prescribed fill and stroke combinations documented in the reference files under skills/diagram-design/references/. These rules ensure consistent rendering across all diagram generators while distinguishing between default states and highlighted focal elements.

The Core Color Palette

The system relies on four semantic colors that drive all fill and stroke combinations:

• Paper: The light background color used for hollow shapes and neutral fills
• Ink: The dark text color (rgba(45,49,66,...)) used for strokes and solid fills
• Muted: Low-opacity grey tints for background elements and non-focal cells
• Accent: Coral orange (#eb6c36) reserved exclusively for the single focal node in any diagram

This limited palette ensures accessibility and visual hierarchy across different node types.

Process and Flow Nodes

Standard flow diagrams rely on rectangular nodes defined in type-process.md. The implementation distinguishes between default operations and highlighted steps.

Default Process Nodes

Regular rectangular nodes use a white fill (or rgba(245,245,245,0.04) for transparent backgrounds) with a subtle grey stroke of rgba(45,49,66,0.25). According to the source in skills/diagram-design/references/type-process.md at lines 297-300, this combination applies to standard process steps and flow elements.

<!-- Default process node -->
<rect x="100" y="50" width="100" height="64"
      fill="white"
      stroke="rgba(45,49,66,0.25)" />

Focal Nodes

One node per diagram may be designated as focal, receiving the accent treatment. The fill becomes rgba(235,108,54,0.08) (a translucent coral tint) while the stroke switches to solid #eb6c36 (bright orange). Lines 299-300 of type-process.md specify this combination for critical hand-offs or highlighted steps.

<!-- Focal node (coral accent) -->
<rect x="220" y="50" width="100" height="64"
      fill="rgba(235,108,54,0.08)"
      stroke="#eb6c36" />

Data Type Chips

Small badges inside nodes follow similar logic but omit strokes entirely. Default chips use rgba(45,49,66,0.12) (muted fill, no stroke), while focal chips use rgba(235,108,54,0.20) when appearing inside a focal node. These definitions occupy lines 295-296 of type-process.md.

Specialized Diagram Types

Beyond standard flows, each diagram variant implements unique fill and stroke combinations tailored to its specific visualization needs.

Loop Diagrams (type-loop.md)

Nodes in loop diagrams use semantic color names rather than raw RGBA values. The standard node receives a paper fill and an ink stroke, creating a hollow rectangle effect. Line 146 of skills/diagram-design/references/type-loop.md establishes this pairing for iteration visualizations.

Wardley Map Components (type-wardley.md)

Wardley map components render as circles with paper fill and a 1px ink stroke. File type-wardley.md at lines 9-10 defines this combination for evolutionary mapping components.

Venn Diagram Circles (type-venn.md)

Venn diagrams use translucent fills without strokes to enable overlap visualization. The circles employ very low-opacity tints: rgba(45,49,66,0.04) or rgba(79,93,117,0.05). Lines 8-12 of type-venn.md specify these values, relying on composited transparency rather than outline definition.

Sankey Node Bars (type-sankey.md)

Sankey visualization bars break from the standard pattern by using solid ink fill with no stroke. The vertical quantity-encoding bars at lines 8-9 of type-sankey.md use rgba(45,49,66,1) for maximum data-ink ratio.

<!-- Sankey node bar (no stroke) -->
<rect x="400" y="30" width="12" height="120"
      fill="rgba(45,49,66,1)" />

Treemap Cells (type-treemap.md)

Treemap hierarchies distinguish between standard and focal cells:

• Non-focal cells: rgba(45,49,66,0.16) fill with rgba(45,49,66,0.30) stroke (lines 40-41)
• Focal cell: rgba(235,108,54,0.16) fill with #eb6c36 stroke (line 45)

This mirrors the process node logic but applies to rectangular subdivisions.

UML Class Relationships (type-uml-class.md)

UML diagrams use specialized shapes with distinct styling:

• Inheritance arrows: Hollow triangles with paper fill and ink stroke (lines 32-34)
• Composition diamonds: Filled diamonds using ink fill with no separate stroke, effectively making the shape a solid colored glyph (lines 34-35)

SVG Implementation Reference

When generating diagrams programmatically, apply these fill and stroke combinations using the exact RGBA values from the reference files. The repository enforces these values through markdown-based generators that parse the reference tables.

Key implementation files include:

• skills/diagram-design/references/type-process.md — Process nodes and chips
• skills/diagram-design/references/type-loop.md — Loop diagram rectangles
• skills/diagram-design/references/type-wardley.md — Component circles
• skills/diagram-design/references/type-venn.md — Overlapping circles
• skills/diagram-design/references/type-sankey.md — Quantity bars
• skills/diagram-design/references/type-treemap.md — Hierarchical cells
• skills/diagram-design/references/type-uml-class.md — Relationship indicators

Summary

• The diagram-design skill uses a constrained palette of paper, ink, muted grey, and coral accent (#eb6c36).
• Exactly one node per diagram may receive focal styling with accent fill and stroke.
• Strokes are optional: Sankey bars, chips, and Venn circles render without outlines.
• Reference files in skills/diagram-design/references/ define specific RGBA values for each node type.
• Opacity values differentiate states: default nodes use 0.25 stroke opacity, while focal fills use 0.08 or 0.16 tint opacity.

Frequently Asked Questions

What is the maximum number of focal nodes allowed per diagram?

Only one node (or treemap cell) may be designated as focal per diagram. This constraint ensures the coral accent color (#eb6c36) remains a singular visual highlight, preventing conceptual dilution of the "critical step" or "key component" concept across the visualization.

Why do Sankey nodes use solid ink fill without a stroke?

Sankey bars prioritize data-ink ratio and quantitative clarity. According to type-sankey.md lines 8-9, these vertical bars use solid rgba(45,49,66,1) fill with no stroke to maximize contrast against the background while minimizing visual noise, as strokes would distort the perceived width of quantities.

How do chip colors differ from regular node colors?

Chips use higher opacity muted fills (0.12 vs 0.04) and never display strokes. Default chips use rgba(45,49,66,0.12), while focal chips use rgba(235,108,54,0.20)—approximately double the tint opacity of their parent focal nodes—to maintain visibility at smaller sizes inside the node containers defined in type-process.md.

Where are these fill and stroke rules defined in the repository?

All fill and stroke combinations reside in the skills/diagram-design/references/ directory. Each diagram type has a dedicated markdown file (e.g., type-process.md, type-treemap.md) containing reference tables that SVG generators parse to apply the correct color values to specific node types.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}