How Different Node Types Are Treated With Fill and Stroke in diagram-design

The diagram-design system applies fill and stroke through four semantic color families—paper, ink, muted, and accent—with each node type following strict rules: paper-fill with ink-stroke as default, and accent-tint fill with accent-stroke for focal elements.

The diagram-design repository defines a comprehensive visual language that ensures consistent rendering across multiple diagram types. Understanding how fill and stroke treatments vary by node type is essential for implementing compliant diagrams that maintain accessibility and visual hierarchy. This article examines the specific conventions for nine diagram types based on the reference specifications in the repository.

Wardley Map Nodes: Paper-Fill with Ink-Stroke

Wardley map components use small circles that establish the baseline visual treatment.

According to skills/diagram-design/references/type-wardley.md, non-focal components receive:

• Paper-fill: The base canvas color (#f5f5f5)
• Ink-stroke: 1 px stroke in the primary ink color (#4f5d75)

Focal components escalate to accent treatment with an accent-tint fill and accent stroke, counting as two of the allowed "accent elements" per the one-accent rule.

<!-- Wardley component (non-focal) -->
<circle cx="200" cy="150" r="6"
        fill="#f5f5f5"
        stroke="#4f5d75"
        stroke-width="1"/>

<!-- Wardley component (focal – accent) -->
<circle cx="400" cy="150" r="6"
        fill="rgba(235,108,54,0.15)"
        stroke="#eb6c36"
        stroke-width="1.2"/>

Sankey Diagram Nodes: Solid Ink-Fill, No Stroke

Sankey vertical bars deviate from the standard pattern. Per skills/diagram-design/references/type-sankey.md:

• Nodes render with solid ink-fill (#4f5d75)
• No stroke is applied
• Focal paths use accent-fill at higher opacity but maintain no stroke

The z-ordering rule requires connectors to render before node rectangles in this diagram type.

<!-- Sankey node bar (default) -->
<rect x="100" y="80" width="12" height="120"
      fill="#4f5d75"
      stroke="none"/>

UML Class Diagram Nodes: Rounded Paper-Fill with Ink-Stroke

UML class boxes follow the standard pattern with rounded corners. From skills/diagram-design/references/type-uml-class.md:

• Rectangle with rx=6 corner radius
• Paper-fill with ink-stroke
• Focal classes receive accent-tint fill and accent stroke

Process Diagram Nodes: White or Variant Fill with Muted Border

Process nodes use fixed-dimension rectangular cards (100 × 64 px). Per skills/diagram-design/references/type-process.md:

State	Fill	Stroke
Default	White or rgba(245,245,245,0.04) (light-dark variant)	Muted: rgba(45,49,66,0.25)
Focal	Accent-fill: rgba(235,108,54,0.08)	Accent-stroke: #eb6c36

<!-- Process node (focal) -->
<rect x="300" y="200" width="100" height="64" rx="6"
      fill="rgba(235,108,54,0.08)"
      stroke="#eb6c36"
      stroke-width="1.2"/>

Tree and Hierarchy Nodes: Flexible Paper-Based Fill

Tree nodes as specified in skills/diagram-design/references/type-tree.md permit designer discretion:

• Small rectangles with rx=6
• Standard paper-fill with ink-stroke recommended
• Leaf highlighting through thinner stroke (0.8 px) or alternate fill
• Must preserve color-family hierarchy

Connectors render before node rectangles per z-ordering rules.

Scatter Chart Points: Muted-Fill Default, Accent-Fill Focal

Scatter points use variable-radius circles. According to skills/diagram-design/references/type-scatter.md:

• Default: Muted-fill rgba(79,93,117,0.20) with muted-stroke
• Focal: Accent-fill rgba(235,108,54,0.15) with accent-stroke #eb6c36

Stroke colors meet WCAG contrast ratios (≥ 6:1 against paper backgrounds).

<!-- Scatter focal point -->
<circle cx="520" cy="340" r="6"
        fill="rgba(235,108,54,0.15)"
        stroke="#eb6c36"
        stroke-width="1.2"/>

Radar Chart Polygons: Series-Color Stroke with Tinted Fill

Radar series polygons implement fill/stroke differently per skills/diagram-design/references/type-radar.md:

• Non-focal series: Series-color stroke, fill at 0.18 opacity (muted)
• Focal series: Thicker stroke, same fill opacity
• Hierarchy preserved through stroke weight rather than fill saturation

Venn Diagram Circles: Ultra-Low Opacity Tints

Venn circles use minimal opacity to enable overlap compounding. Per skills/diagram-design/references/type-venn.md:

• Ink circles: rgba(45,49,66,0.04)
• Muted circles: rgba(79,93,117,0.05)
• Focal intersection: Accent-tint fill rgba(235,108,54,0.10) with accent-stroke

Overlap regions automatically compound tint values.

Quadrant Chart Cells: Ink-Fill Default, Accent-Fill Focal

Quadrant cells as defined in skills/diagram-design/references/type-quadrant.md:

• Non-focal: Ink-fill at 0.04 opacity, muted-stroke at 0.28 opacity
• Focal: Accent-tint fill with accent-stroke at 1.2 px

Core Principles Governing Fill and Stroke

The diagram-design system enforces four architectural rules across all node types:

1. Color family hierarchy: paper → ink → muted → accent
2. One-accent rule: Maximum two accent elements per diagram
3. Z-ordering: Fills first, strokes second, accents last; connectors before nodes where specified
4. Accessibility compliance: WCAG contrast ratios for all stroke combinations

Summary

• diagram-design defines four semantic color families (paper, ink, muted, accent) that determine fill and stroke across all node types.
• Default treatment is paper-fill with ink-stroke for most shapes; Sankey bars use solid ink-fill with no stroke.
• Focal elements escalate to accent-tint fill and accent-stroke, with strict limits on accent quantity.
• Reference specifications in skills/diagram-design/references/type-*.md files govern each diagram type's exact values.
• Accessibility and z-ordering rules ensure consistent, legible rendering in both light and dark themes.

Frequently Asked Questions

How do I implement a focal node in a Wardley map?

Apply an accent-tint fill (rgba(235,108,54,0.15)) and accent stroke (#eb6c36) to the circle element. This consumes two of your permitted accent elements for the diagram. Reference skills/diagram-design/references/type-wardley.md for the complete component specification.

Why do Sankey nodes have no stroke?

Sankey bars use solid ink-fill with no stroke to emphasize the flow ribbons connecting them. Adding strokes would create visual noise that competes with the ribbon gradients. The focal path instead uses accent-fill opacity changes to indicate selection without introducing stroke elements.

What is the maximum number of accent elements allowed per diagram?

The one-accent rule permits at most two accent elements per diagram. This typically manifests as one focal node and its connected edge, or one focal node and one focal state indicator. Exceeding this limit breaks the visual hierarchy and degrades focus clarity.

How are Venn diagram overlaps calculated?

Venn circles use ultra-low opacity tints (0.04–0.05) that compound mathematically when regions overlap. The focal intersection receives a dedicated accent-tint fill at 0.10 opacity with an accent stroke, ensuring it remains distinguishable despite the additive tint behavior.

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