mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 03:09:50 +08:00
82 lines
2.8 KiB
Markdown
82 lines
2.8 KiB
Markdown
<!-- Parent: external-diagram-mermaid-generate/SKILL.md -->
|
|
# 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:
|
|
|
|
```text
|
|
%%{init: {"flowchart": {"nodeSpacing": 80, "rankSpacing": 70}} }%%
|
|
```
|
|
|
|
| Option | Value | Effect |
|
|
|--------|-------|--------|
|
|
| `nodeSpacing` | 80 | 60% more horizontal space (default: 50) |
|
|
| `rankSpacing` | 70 | 40% more vertical space (default: 50) |
|
|
|
|
**Note**: Omit `curve` to use the default smooth curves (`basis`).
|
|
|
|
## Primary Color Palette (Tailwind 200 + Dark Borders)
|
|
|
|
| Component | Fill (200) | Stroke (700+) | Text | Usage |
|
|
|-----------|------------|---------------|------|-------|
|
|
| AI & Agents | `#fbcfe8` | `#be185d` | `#1f2937` | Agentforce, AI features |
|
|
| Integration (Orange) | `#fed7aa` | `#c2410c` | `#1f2937` | Connected Apps, OAuth |
|
|
| Integration (Teal) | `#99f6e4` | `#0f766e` | `#1f2937` | Named Creds, callouts |
|
|
| Development (Violet) | `#ddd6fe` | `#6d28d9` | `#1f2937` | Apex, services |
|
|
| Development (Indigo) | `#c7d2fe` | `#4338ca` | `#1f2937` | Flows, automation |
|
|
| Foundation (Cyan) | `#a5f3fc` | `#0e7490` | `#1f2937` | Metadata, objects |
|
|
| Foundation (Amber) | `#fde68a` | `#b45309` | `#1f2937` | Data, storage |
|
|
| DevOps (Green) | `#a7f3d0` | `#047857` | `#1f2937` | Deploy, CI/CD |
|
|
| Utility (Slate) | `#e2e8f0` | `#334155` | `#1f2937` | Tooling |
|
|
|
|
## Subgraph Background Colors (Tailwind 50-level)
|
|
|
|
| Subgraph | Fill (50) | Stroke | Style |
|
|
|----------|-----------|--------|-------|
|
|
| AI & Agents | `#fdf2f8` | `#be185d` | dashed |
|
|
| Integration | `#fff7ed` | `#c2410c` | dashed |
|
|
| Development | `#f5f3ff` | `#6d28d9` | dashed |
|
|
| Foundation | `#ecfeff` | `#0e7490` | dashed |
|
|
| DevOps | `#ecfdf5` | `#047857` | dashed |
|
|
|
|
## Preferred: Individual Node Styling
|
|
|
|
**DO use `style` declarations with 200-level fills**:
|
|
```mermaid
|
|
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:
|
|
```mermaid
|
|
%%{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:
|
|
```json
|
|
["🔐 integration-connectivity-connected-app-configure"]
|
|
```
|
|
|
|
**Full reference**: See `references/color-palette.md`
|