Mermaid Styling Guide (sf-skills Standard)

Mermaid Styling Guide (sf-skills Standard)

Use individual style declarations with Tailwind 200-level pastel fills and dark strokes for consistent, visually soft diagrams.

Spacing Configuration

Add this init directive at the start of every flowchart for optimal readability:

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

Note: Omit curve to use the default smooth curves (basis).

Primary Color Palette (Tailwind 200 + Dark Borders)

Subgraph Background Colors (Tailwind 50-level)

Preferred: Individual Node Styling

DO use style declarations with 200-level fills:

flowchart TB
    A["🤖 Agent"]
    B["⚡ Apex"]

    A --> B

    style A fill:#fbcfe8,stroke:#be185d,color:#1f2937
    style B fill:#ddd6fe,stroke:#6d28d9,color:#1f2937

Note: Use %%{init} for spacing/curve config only. Avoid using it for color theming (use individual style declarations instead).

Subgraph Styling

Use 50-level backgrounds with dark dashed borders. Use UPPERCASE for subgraph titles:

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

    style ai fill:#fdf2f8,stroke:#be185d,stroke-dasharray:5

Node Label Pattern

Keep labels short (icon + name only). Avoid <br/> and <small> tags:

["🔐 sf-connected-apps"]

Full reference: See references/color-palette.md