sf-diagram Color Palette

sf-diagram Color Palette

Soft pastel color palette (Tailwind 200-level) with dark borders for clear definition.

Primary Palette (Tailwind 200 + Dark Borders)

┌─────────────────────────────────────────────────────────────────────────────┐
│  COMPONENT                │  FILL (200)  │  STROKE (700+) │  TEXT COLOR    │
├───────────────────────────┼──────────────┼────────────────┼────────────────┤
│  AI & Agents              │  #fbcfe8     │  #be185d       │  #1f2937       │
│  Integration (Orange)     │  #fed7aa     │  #c2410c       │  #1f2937       │
│  Integration (Teal)       │  #99f6e4     │  #0f766e       │  #1f2937       │
│  Diagrams (Sky)           │  #bae6fd     │  #0369a1       │  #1f2937       │
│  Apex/Development         │  #ddd6fe     │  #6d28d9       │  #1f2937       │
│  Flow/Automation          │  #c7d2fe     │  #4338ca       │  #1f2937       │
│  Metadata (Cyan)          │  #a5f3fc     │  #0e7490       │  #1f2937       │
│  Data (Amber)             │  #fde68a     │  #b45309       │  #1f2937       │
│  Deploy (Green)           │  #a7f3d0     │  #047857       │  #1f2937       │
│  Tooling (Slate)          │  #e2e8f0     │  #334155       │  #1f2937       │
└───────────────────────────┴──────────────┴────────────────┴────────────────┘

Subgraph Background Colors (Tailwind 50-level)

┌─────────────────────────────────────────────────────────────────────────────┐
│  SUBGRAPH                 │  FILL (50)   │  STROKE (700+) │  STYLE         │
├───────────────────────────┼──────────────┼────────────────┼────────────────┤
│  AI & Agents              │  #fdf2f8     │  #be185d       │  dashed        │
│  Integration & Security   │  #fff7ed     │  #c2410c       │  dashed        │
│  Development              │  #f5f3ff     │  #6d28d9       │  dashed        │
│  Foundation               │  #ecfeff     │  #0e7490       │  dashed        │
│  DevOps                   │  #ecfdf5     │  #047857       │  dashed        │
│  Tooling                  │  #f8fafc     │  #334155       │  dashed        │
└───────────────────────────┴──────────────┴────────────────┴────────────────┘

Design Philosophy:

• Node fills: Tailwind 200-level for visible but soft pastels
• Subgraph fills: Tailwind 50-level for subtle background grouping
• Dark strokes: Tailwind 700-800 level for clear definition
• Dark text: #1f2937 ensures readability

Salesforce-Specific Colors

┌─────────────────────────────────────────────────────────────────────────────┐
│  SALESFORCE COMPONENT     │  FILL (200)  │  STROKE (700+) │  TEXT COLOR    │
├───────────────────────────┼──────────────┼────────────────┼────────────────┤
│  Salesforce Platform      │  #bae6fd     │  #0369a1       │  #1f2937       │
│  Connected Apps/OAuth     │  #fed7aa     │  #c2410c       │  #1f2937       │
│  External Systems         │  #a7f3d0     │  #047857       │  #1f2937       │
│  Users/Actors             │  #ddd6fe     │  #6d28d9       │  #1f2937       │
│  Platform Events          │  #99f6e4     │  #0f766e       │  #1f2937       │
│  Named Credentials        │  #fed7aa     │  #c2410c       │  #1f2937       │
└───────────────────────────┴──────────────┴────────────────┴────────────────┘

ERD Object Type Colors

Color coding for data model diagrams by object type:

┌─────────────────────────────────────────────────────────────────────────────┐
│  OBJECT TYPE              │  FILL (200)  │  STROKE (700+) │  TEXT COLOR    │
├───────────────────────────┼──────────────┼────────────────┼────────────────┤
│  Standard Objects [STD]   │  #bae6fd     │  #0369a1       │  #1f2937       │
│  Custom Objects [CUST]    │  #fed7aa     │  #c2410c       │  #1f2937       │
│  External Objects [EXT]   │  #a7f3d0     │  #047857       │  #1f2937       │
└───────────────────────────┴──────────────┴────────────────┴────────────────┘

┌─────────────────────────────────────────────────────────────────────────────┐
│  ERD SUBGRAPH             │  FILL (50)   │  STROKE (700+) │  STYLE         │
├───────────────────────────┼──────────────┼────────────────┼────────────────┤
│  Standard Group           │  #f0f9ff     │  #0369a1       │  dashed        │
│  Custom Group             │  #fff7ed     │  #c2410c       │  dashed        │
│  External Group           │  #ecfdf5     │  #047857       │  dashed        │
│  Legend                   │  #f8fafc     │  #334155       │  dashed        │
└───────────────────────────┴──────────────┴────────────────┴────────────────┘

ERD Style Declarations

%% Standard Object - Sky Blue
style Account fill:#bae6fd,stroke:#0369a1,color:#1f2937

%% Custom Object - Orange
style Invoice__c fill:#fed7aa,stroke:#c2410c,color:#1f2937

%% External Object - Green
style SAP_Product__x fill:#a7f3d0,stroke:#047857,color:#1f2937

%% Subgraph - Standard group
style std fill:#f0f9ff,stroke:#0369a1,stroke-dasharray:5

%% Subgraph - Custom group
style cust fill:#fff7ed,stroke:#c2410c,stroke-dasharray:5

%% Subgraph - External group
style ext fill:#ecfdf5,stroke:#047857,stroke-dasharray:5

Relationship Arrow Colors

Note: Mermaid does not support individual line coloring in erDiagram. Use thick arrows (==>) for Master-Detail distinction in flowchart format.

Status Colors

┌─────────────────────────────────────────────────────────────────────────────┐
│  STATUS                   │  FILL (200)  │  STROKE (700+) │  ICON          │
├───────────────────────────┼──────────────┼────────────────┼────────────────┤
│  Success                  │  #a7f3d0     │  #047857       │  ✅            │
│  Error/Failure            │  #fecaca     │  #b91c1c       │  ❌            │
│  Warning                  │  #fde68a     │  #b45309       │  ⚠️            │
│  Info/Neutral             │  #e2e8f0     │  #334155       │  ℹ️            │
│  In Progress              │  #bfdbfe     │  #1d4ed8       │  ⏳            │
└───────────────────────────┴──────────────┴────────────────┴────────────────┘

Font Family Options

Mermaid supports custom fonts via %%{init}:

%%{init: { "fontFamily": "Inter, sans-serif", "fontSize": "14px" }}%%

Available Font Options

Usage Example

%%{init: { "fontFamily": "Inter, Trebuchet MS, sans-serif", "fontSize": "14px" }}%%
flowchart LR
    A[Start] --> B[End]

⚠️ Limitation: GitHub and VS Code may override custom fonts with their platform defaults.

Spacing Configuration

Control diagram density with %%{init} configuration:

%%{init: {"flowchart": {"nodeSpacing": 80, "rankSpacing": 70}} }%%

Available Spacing Options

Curve Styles

Recommended Configuration

For clean, readable diagrams:

%%{init: {"flowchart": {"nodeSpacing": 80, "rankSpacing": 70}} }%%

Why these values?

• nodeSpacing: 80 — 60% more horizontal space than default
• rankSpacing: 70 — 40% more vertical space than default
• curve: basis — Default smooth curves (omit to use default)

⚠️ Limitation: Subgraphs may not fully inherit spacing settings due to a known Mermaid issue.

Mermaid Styling Approach

Preferred: Individual Node Styling

Use style declarations with 200-level fills and dark strokes:

flowchart TB
    A["🤖 sf-ai-agentforce"]
    B["⚡ sf-apex"]
    C["🔗 sf-integration"]

    A --> B
    A --> C

    %% 200-level fill + dark stroke + dark text
    style A fill:#fbcfe8,stroke:#be185d,color:#1f2937
    style B fill:#ddd6fe,stroke:#6d28d9,color:#1f2937
    style C fill:#99f6e4,stroke:#0f766e,color:#1f2937

Subgraph Styling

Use 50-level backgrounds with dark dashed borders:

%%{init: {"flowchart": {"nodeSpacing": 80, "rankSpacing": 70}} }%%
flowchart TB
    subgraph ai["🤖 AI & AGENTS"]
        A[Agent]
    end

    subgraph dev["💻 DEVELOPMENT"]
        B[Apex]
        C[Flow]
    end

    %% 50-level fill + dark dashed border
    style ai fill:#fdf2f8,stroke:#be185d,stroke-dasharray:5
    style dev fill:#f5f3ff,stroke:#6d28d9,stroke-dasharray:5

Node Label Patterns

Simple Label (Recommended)

["🤖 sf-ai-agentforce"]

Keep labels short for consistent rendering.

Database/Cylinder

[(💾 Database)]

Complete Style Template

Copy this template for consistent diagrams with the finalized color scheme:

%%{init: {"flowchart": {"nodeSpacing": 80, "rankSpacing": 70}} }%%
flowchart TB
    subgraph ai["🤖 AI & AGENTS"]
        agentforce["🤖 sf-ai-agentforce"]
    end

    subgraph integration["🔌 INTEGRATION & SECURITY"]
        connectedapps["🔐 sf-connected-apps"]
        sfintegration["🔗 sf-integration"]
    end

    subgraph development["💻 DEVELOPMENT"]
        apex["⚡ sf-apex"]
        flow["🔄 sf-flow"]
    end

    subgraph foundation["📦 FOUNDATION"]
        metadata["📋 sf-metadata"]
        data["💾 sf-data"]
    end

    subgraph devops["🚀 DEVOPS"]
        deploy["🚀 sf-deploy"]
    end

    %% Relationships
    agentforce -->|"flow actions"| flow
    agentforce -->|"API actions"| sfintegration
    sfintegration -->|"OAuth apps"| connectedapps
    apex -->|"schema"| metadata
    flow -->|"schema"| metadata
    apex -->|"deploys"| deploy

    %% Node Styling - 200-level fills
    style agentforce fill:#fbcfe8,stroke:#be185d,color:#1f2937
    style connectedapps fill:#fed7aa,stroke:#c2410c,color:#1f2937
    style sfintegration fill:#99f6e4,stroke:#0f766e,color:#1f2937
    style apex fill:#ddd6fe,stroke:#6d28d9,color:#1f2937
    style flow fill:#c7d2fe,stroke:#4338ca,color:#1f2937
    style metadata fill:#a5f3fc,stroke:#0e7490,color:#1f2937
    style data fill:#fde68a,stroke:#b45309,color:#1f2937
    style deploy fill:#a7f3d0,stroke:#047857,color:#1f2937

    %% Subgraph Styling - 50-level fills with dashed borders
    style ai fill:#fdf2f8,stroke:#be185d,stroke-dasharray:5
    style integration fill:#fff7ed,stroke:#c2410c,stroke-dasharray:5
    style development fill:#f5f3ff,stroke:#6d28d9,stroke-dasharray:5
    style foundation fill:#ecfeff,stroke:#0e7490,stroke-dasharray:5
    style devops fill:#ecfdf5,stroke:#047857,stroke-dasharray:5

Label Guidelines

Why? Multi-line labels with <br/> and <small> tags render inconsistently across GitHub, VS Code, and other Mermaid viewers, often causing text cutoff.

Text Casing Conventions

Recommendation Summary

Detailed Guidelines

Node Labels: lowercase (Recommended)

["🤖 sf-ai-agentforce"]    ✅ Preferred
["🤖 SF-AI-AGENTFORCE"]    ❌ Avoid
["🤖 Sf-Ai-Agentforce"]    ❌ Avoid

Why lowercase?

• Matches the actual skill/package naming convention
• Cleaner, more modern aesthetic
• Consistent with CLI tool naming (npm, pip, etc.)
• Easier to read in compact diagram nodes

Subgraph Titles: UPPERCASE

subgraph ai["🤖 AI & AGENTS"]           ✅ UPPERCASE
subgraph ai["🤖 ai & agents"]           ❌ lowercase
subgraph ai["🤖 Ai & Agents"]           ❌ Title Case

Why UPPERCASE?

• Creates strong visual hierarchy with lowercase node labels
• Subgraphs represent major categories/groups
• Consistent with ASCII diagram headers
• Maximum contrast between group titles and contents

Edge Labels: lowercase

-->|"schema"|              ✅ lowercase
-->|"Schema"|              ❌ Title Case
-->|"SCHEMA"|              ❌ ALL CAPS

Why lowercase?

• Edge labels describe relationships/actions
• Should be subtle, not prominent
• Consistent with node label style

ASCII Diagrams: UPPERCASE for Headers

┌─────────────────────────────────────┐
│         SYSTEM LANDSCAPE            │   ✅ UPPERCASE header
└─────────────────────────────────────┘

│  ☁️ SALESFORCE PLATFORM             │   ✅ UPPERCASE section

Why UPPERCASE for ASCII?

• ASCII has limited styling options (no bold, color)
• UPPERCASE creates visual hierarchy
• Traditional technical documentation style

Special Cases

Icon Reference

Color Blind Accessibility

This palette maintains distinguishability for common color blindness:

Key Principles

1. Icons supplement colors - Every node has an icon
2. High contrast text - Dark text (#1f2937) on pastel backgrounds
3. Dark stroke differentiation - Bold borders add definition
4. Dashed subgraphs - Pattern, not just color

Light/Dark Mode Support

The pastel style works best on light backgrounds. For dark mode contexts:

• 200-level fills remain visible
• Dark strokes provide clear definition
• 50-level subgraph fills adapt reasonably

References

• Tailwind CSS Color Palette
• Salesforce Lightning Design System
• CloudSundial Diagrams
• Mermaid Theme Configuration