Figma Diagram Design

Apply hierarchy-based color theming to diagrams. Each top-level branch gets a distinct color; all descendants inherit that color, creating instant visual grouping.

Color Application Rules

1. Identify top-level branches — nodes directly connected to the root/start
2. Assign distinct colors — one color per top-level branch from the palette
3. Inherit downward — all child nodes match their ancestor's branch color
4. Root stays neutral — use the neutral color for entry points and shared nodes

Mermaid Styling Syntax

Define classes and apply them to nodes:

flowchart LR
    classDef branch1 fill:#E8F4FD,stroke:#1E88E5,color:#1565C0
    classDef branch2 fill:#F3E5F5,stroke:#8E24AA,color:#6A1B9A
    classDef branch3 fill:#E8F5E9,stroke:#43A047,color:#2E7D32
    classDef neutral fill:#F5F5F5,stroke:#757575,color:#424242

    Start["Start"]:::neutral
    A["Branch A"]:::branch1
    A1["A Child"]:::branch1
    B["Branch B"]:::branch2
    B1["B Child"]:::branch2
    
    Start --> A --> A1
    Start --> B --> B1

Curated Palettes

Modern Professional (Default)

Soft Pastel

Bold Vibrant

Workflow

1. Parse the diagram structure to identify hierarchy
2. Count top-level branches and select palette
3. Generate classDef statements for each branch + neutral
4. Apply classes to all nodes based on their branch ancestry
5. Ensure root/shared nodes use neutral styling

Presenting Diagram URLs

Terminal display can corrupt long Figma URLs when copied. Follow these rules:

URL Presentation Rules

1. Provide the diagram ID separately — on its own line
2. Use short URL form — omit https:// to reduce length
3. Never use markdown links — [text](url) can cause double-prefix issues
4. Avoid query parameters — they add unnecessary length

Recommended Format

**Diagram ID:** b201b3c8-b2ab-4ed9-a3bc-7e09703db246

**Access your diagram at:**
figma.com/online-whiteboard/create-diagram/ + the ID above

If User Reports 404 Error

1. Check for %0A or %20 in their URL (indicates line break corruption)
2. Provide the diagram ID separately
3. Have them manually construct the short URL

Notes

• For diagrams with >6 branches, cycle through the palette or select a subset
• Gantt charts: color by task group/section rather than hierarchy
• Sequence diagrams: color by participant/actor
• State diagrams: color by state category or region