### Add Custom Fonts to draw.io

Source: https://github.com/sap/btp-solution-diagrams/blob/main/guideline/docs/solution_diagr_intro/intro.md

Add system fonts like 'Arial' and 'Arial Black' to your local draw.io installation by including this JSON in the configuration. A restart of draw.io is necessary for the fonts to be available.

```json
{
"customFonts": [
    "Arial",
    "Arial Black"
  ]
  }
```

--------------------------------

### Apply All-in-One Configuration to draw.io

Source: https://context7.com/sap/btp-solution-diagrams/llms.txt

Apply the complete SAP configuration, including colors, fonts, and preloaded libraries, by copying the contents of the all-in-one config file into draw.io's configuration editor. Restart draw.io after applying.

```text
Configuration file location:
guideline/docs/examples/drawio-config-all-in-one.json

Steps to apply:
1. Open draw.io desktop
2. Go to Extras > Configuration
3. Copy contents of drawio-config-all-in-one.json
4. Paste into configuration editor
5. Click "Apply"
6. Restart draw.io
7. All SAP libraries, colors, and fonts are now preloaded
```

--------------------------------

### Configure SAP Color Scheme in draw.io

Source: https://github.com/sap/btp-solution-diagrams/blob/main/guideline/docs/solution_diagr_intro/intro.md

Apply this JSON configuration to draw.io via Extras > Configuration to enable the SAP color scheme. A restart of draw.io is required for the changes to take effect.

```json
{
  "customColorSchemes": [
    [
      {
        "fill": "#0070F2",
        "stroke": "none"
      },
      {
        "fill": "#EBF8FF",
        "stroke": "none"
      },
      {
        "fill": "#475E75",
        "stroke": "none"
      },
      {
        "fill": "#F5F6F7",
        "stroke": "none"
      },
      {
        "fill": "#1D2D3E",
        "stroke": "none"
      },
      {
        "fill": "#556B82",
        "stroke": "none"
      },
      {
        "fill": "#188918",
        "stroke": "none"
      },
      {
        "fill": "#F5FAE5",
        "stroke": "none"
      },
      {
        "fill": "#C35500",
        "stroke": "none"
      },
      {
        "fill": "#FFF8D6",
        "stroke": "none"
      },
      {
        "fill": "#D20A0A",
        "stroke": "none"
      },
      {
        "fill": "#FFEAF4",
        "stroke": "none"
      },
      {
        "fill": "#DAFDF5",
        "stroke": "none"
      },
      {
        "fill": "#5D36FF",
        "stroke": "none"
      },
      {
        "fill": "#F1ECFF",
        "stroke": "none"
      },
      {
        "fill": "#CC00DC",
        "stroke": "none"
      },
      {
        "fill": "#FFF0FA",
        "stroke": "none"
      }
    ]
  ],
  "presetColors": [
    "0070F2",
    "EBF8FF",
    "475E75",
    "F5F6F7",
    "1D2D3E",
    "556B82",
    "188918",
    "F5FAE5",
    "C35500",
    "FFF8D6",
    "D20A0A",
    "FFEAF4",
    "07838F",
    "DAFDF5",
    "5D36FF",
    "793802",
    "F1ECFF",
    "CC00DC",
    "FFF0FA"
  ]
}
```

--------------------------------

### Enable SAP BTP Shapes in Draw.io

Source: https://context7.com/sap/btp-solution-diagrams/llms.txt

Follow these steps to activate the native SAP BTP shape library within the draw.io interface.

```text
Steps to enable SAP BTP shapes in draw.io:

1. Open draw.io (desktop or web version)
2. Click "More Shapes" button in the left sidebar
3. Navigate to and select "SAP" category
4. Click "Apply" to enable SAP shapes
5. SAP BTP service icons and shapes now appear in your shapes panel
```

--------------------------------

### Import Custom Draw.io Libraries

Source: https://context7.com/sap/btp-solution-diagrams/llms.txt

Use these paths to locate and import specific icon sets or shape libraries not included in the native integration.

```xml
<!-- Available library files for import -->

<!-- All BTP Service Icons (comprehensive) -->
assets/shape-libraries-and-editable-presets/draw.io/20-02-99-sap-btp-service-icons-all/
  - 20-02-99-01-sap-btp-service-icons-all-size-S.xml
  - 20-02-99-02-sap-btp-service-icons-all-size-M.xml
  - 20-02-99-03-sap-btp-service-icons-all-size-L.xml

<!-- Category-specific libraries -->
assets/shape-libraries-and-editable-presets/draw.io/20-02-00-sap-btp-service-icons-foundational-set/
assets/shape-libraries-and-editable-presets/draw.io/20-02-01-sap-btp-service-icons-integration-suite-set/
assets/shape-libraries-and-editable-presets/draw.io/20-02-02-sap-btp-service-icons-app-dev-automation-set/
assets/shape-libraries-and-editable-presets/draw.io/20-02-04-sap-btp-service-icons-data-analytics-set/
assets/shape-libraries-and-editable-presets/draw.io/20-02-05-sap-btp-service-icons-ai-set/
assets/shape-libraries-and-editable-presets/draw.io/20-02-06-sap-btp-service-icons-btp-saas-set/

<!-- Generic icons (M and S sizes) -->
assets/shape-libraries-and-editable-presets/draw.io/20-03-generic-icons/
  - sap-generic-icons-size-S-200301.xml
  - sap-generic-icons-size-M-200302.xml

<!-- Additional shape libraries -->
assets/shape-libraries-and-editable-presets/draw.io/area_shapes.xml
assets/shape-libraries-and-editable-presets/draw.io/connectors.xml
assets/shape-libraries-and-editable-presets/draw.io/numbers.xml
assets/shape-libraries-and-editable-presets/draw.io/text_elements.xml
assets/shape-libraries-and-editable-presets/draw.io/sap_brand_names.xml
assets/shape-libraries-and-editable-presets/draw.io/annotations_and_interfaces.xml
assets/shape-libraries-and-editable-presets/draw.io/essentials.xml
assets/shape-libraries-and-editable-presets/draw.io/default_shapes.xml

<!-- Import steps in draw.io -->
1. File > Open Library from > select storage location
2. Navigate to downloaded XML file
3. Click "Choose" to import
4. Library appears in left sidebar
```

--------------------------------

### Configure SAP Color Scheme in Draw.io

Source: https://context7.com/sap/btp-solution-diagrams/llms.txt

Apply the official SAP Fiori Horizon color palette by adding this configuration to the draw.io settings.

```json
{
  "customColorSchemes": [
    [
      { "fill": "#0070F2", "stroke": "none" },
      { "fill": "#EBF8FF", "stroke": "none" },
      { "fill": "#475E75", "stroke": "none" },
      { "fill": "#F5F6F7", "stroke": "none" },
      { "fill": "#1D2D3E", "stroke": "none" },
      { "fill": "#556B82", "stroke": "none" },
      { "fill": "#188918", "stroke": "none" },
      { "fill": "#F5FAE5", "stroke": "none" },
      { "fill": "#C35500", "stroke": "none" },
      { "fill": "#FFF8D6", "stroke": "none" },
      { "fill": "#D20A0A", "stroke": "none" },
      { "fill": "#FFEAF4", "stroke": "none" },
      { "fill": "#DAFDF5", "stroke": "none" },
      { "fill": "#5D36FF", "stroke": "none" },
      { "fill": "#F1ECFF", "stroke": "none" },
      { "fill": "#CC00DC", "stroke": "none" },
      { "fill": "#FFF0FA", "stroke": "none" }
    ]
  ],
  "presetColors": [
    "0070F2", "EBF8FF", "475E75", "F5F6F7",
    "1D2D3E", "556B82", "188918", "F5FAE5",
    "C35500", "FFF8D6", "D20A0A", "FFEAF4",
    "07838F", "DAFDF5", "5D36FF", "793802",
    "F1ECFF", "CC00DC", "FFF0FA"
  ]
}
```

--------------------------------

### Area Types and Nesting Guidelines

Source: https://context7.com/sap/btp-solution-diagrams/llms.txt

Follow these guidelines for creating diagram areas, including corner radius, color usage for SAP/BTP and non-SAP elements, and nesting patterns to ensure visual hierarchy and contrast.

```text
Area Guidelines:
  - Corner radius: 16 pixels (fixed)
  - Blue: SAP/BTP elements (primary)
  - Grey: Non-SAP/third-party elements
  - Accent colors: Highlighting (use sparingly)

Nesting Pattern:
  - Alternate between filled and unfilled areas
  - Parent layer is typically the BTP layer
  - Ensure sufficient contrast between nested areas

Area Cardinality:
  - Stack areas to show multiple grouped layers
  - Maintain consistent styling across stacks
```

--------------------------------

### BTP Service Icons

Source: https://context7.com/sap/btp-solution-diagrams/llms.txt

Use the SAP BTP Service icons with a grey background circle for diagram visualization. Specify icon locations and available sizes (S, M, L).

```text
Icon locations:
  Draw.io XML: assets/shape-libraries-and-editable-presets/draw.io/20-02-99-sap-btp-service-icons-all/
  SVG files:   assets/shape-libraries-and-editable-presets/svg/

Icon sizes available:
  S: 24px (for dense diagrams)
  M: 32px (standard use)
  L: 48px (for emphasis)

Example SVG icons:
  sap-ai-core_sd.svg
  sap-hana-cloud_sd.svg
  sap-integration-suite_sd.svg
  sap-build-work-zone_sd.svg
  sap-analytics-cloud_sd.svg
  identity-authentication_sd.svg
```

--------------------------------

### Configure Custom Fonts for draw.io

Source: https://context7.com/sap/btp-solution-diagrams/llms.txt

Add SAP-recommended fonts to draw.io for consistent typography. This JSON snippet should be added to your draw.io configuration.

```json
{
  "customFonts": [
    "Arial",
    "Arial Black"
  ]
}
```

--------------------------------

### Generic Icons for Non-SAP Elements

Source: https://context7.com/sap/btp-solution-diagrams/llms.txt

Utilize generic icons for non-SAP elements such as devices, databases, and abstract concepts. Specify the location of the generic icon library and available sizes.

```text
Generic icon library:
  assets/shape-libraries-and-editable-presets/draw.io/20-03-generic-icons/

Available sizes:
  sap-generic-icons-size-S-200301.xml
  sap-generic-icons-size-M-200302.xml

Use cases:
  - Devices (laptops, mobile, servers)
  - Databases (generic)
  - Users and personas
  - Cloud providers
  - Network elements
```

--------------------------------

### Line Styles for Connectors

Source: https://context7.com/sap/btp-solution-diagrams/llms.txt

Utilize different line styles for connectors to represent various communication patterns in architecture diagrams, such as direct requests, asynchronous flows, or optional paths.

```text
Recommended line styles:

Solid lines (───────►)
  - Direct, synchronous request-response data flows
  - Standard API calls

Dashed lines (─ ─ ─ ─►)
  - Indirect, asynchronous data flows
  - Event-driven communication

Dotted lines (·········►)
  - Optional data flows
  - Conditional paths

Thick lines (━━━━━━━)
  - Firewalls and network barriers only
```

--------------------------------

### Text Styles and Hierarchy

Source: https://context7.com/sap/btp-solution-diagrams/llms.txt

Apply text formatting consistent with the SAP Fiori Horizon design system. Define text hierarchy from largest (area titles) to smallest (detail text) and specify colors for titles and body text.

```text
Text hierarchy (from largest to smallest):
  1. Area titles (Arial Black, largest)
  2. Section headers
  3. Component labels
  4. Detail text (smallest)

Colors:
  Title text: #1D2D3E
  Body text:  #556B82

Note: Scale text sizes appropriately for target medium
(screen presentation vs. print document)
```

--------------------------------

### Connector Types and Semantic Colors

Source: https://context7.com/sap/btp-solution-diagrams/llms.txt

Use standard connectors and semantic colors to denote flow types and meanings in architecture diagrams. Pink indicates trust flows, green for authentication, and indigo for authorization.

```text
Flow types:
  One-directional (→): Request-response from client to server
  Bidirectional (↔): Mutual trust or two-way communication

Semantic connector colors:
  Trust flows:          Pink (#CC00DC)
  Authentication flows: Green (#188918)
  Authorization flows:  Indigo (#5D36FF)
  Firewalls/barriers:   Thick grey (#475E75)
```

--------------------------------

### SAP/BTP Primary Colors

Source: https://context7.com/sap/btp-solution-diagrams/llms.txt

Use these specific border and fill colors for SAP/BTP related diagram areas to maintain visual consistency. Non-SAP areas should use a different grey palette.

```text
SAP/BTP Areas:
  Border: #0070F2 (blue)
  Fill:   #EBF8FF (light blue)

Non-SAP Areas:
  Border: #475E75 (grey)
  Fill:   #F5F6F7 (light grey)

Text Colors:
  Title: #1D2D3E (dark blue-grey)
  Body:  #556B82 (medium grey)
```

--------------------------------

### Define Primary Area Colors

Source: https://github.com/sap/btp-solution-diagrams/blob/main/guideline/docs/btp_guideline/diagr_comp/areas.md

Hex codes for primary SAP and non-SAP area outlines, fills, and text elements.

```text
#0070F2
```

```text
#EBF8FF
```

```text
#475E75
```

```text
#F5F6F7
```

```text
#1D2D3E
```

```text
#556B82
```

--------------------------------

### Accent Colors for Emphasis

Source: https://context7.com/sap/btp-solution-diagrams/llms.txt

Use accent colors sparingly to highlight important elements or differentiate sections within diagrams. Available options include Teal, Indigo, and Pink.

```text
Teal:
  Border: #07838F
  Fill:   #DAFDF5

Indigo:
  Border: #5D36FF
  Fill:   #F1ECFF

Pink:
  Border: #CC00DC
  Fill:   #FFF0FA
```

--------------------------------

### Semantic Colors for Status

Source: https://context7.com/sap/btp-solution-diagrams/llms.txt

Apply semantic colors to diagram elements to visually represent status or meaning. Use green for success, orange for warning, and red for errors.

```text
Positive/Success:
  Border: #188918 (green)
  Fill:   #F5FAE5 (light green)

Critical/Warning:
  Border: #C35500 (orange)
  Fill:   #FFF8D6 (light orange)

Negative/Error:
  Border: #D20A0A (red)
  Fill:   #FFEAF4 (light pink)
```

--------------------------------

### Define Accent Area Colors

Source: https://github.com/sap/btp-solution-diagrams/blob/main/guideline/docs/btp_guideline/diagr_comp/areas.md

Hex codes for teal, indigo, and pink accent area outlines and fills.

```text
#07838F
```

```text
#DAFDF5
```

```text
#5D36FF
```

```text
#F1ECFF
```

```text
#CC00DC
```

```text
#FFF0FA
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.