smom-dbis-138/scripts/assets/create-diagram-stencil.sh

#!/usr/bin/env bash

set -e

# Create Draw.io Stencil for Azure Icons
# This script creates a Draw.io stencil file from Azure icons

SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
source "$SCRIPT_DIR/../lib/init.sh"
PROJECT_ROOT="$(cd "$SCRIPT_DIR/../.." && pwd)"
ASSETS_DIR="${PROJECT_ROOT}/assets"
AZURE_ICONS_DIR="${ASSETS_DIR}/azure-icons"
STENCIL_DIR="${ASSETS_DIR}/stencils"

echo "Creating Draw.io stencil for Azure icons..."

# Create stencil directory
mkdir -p "${STENCIL_DIR}"

# Check if SVG icons exist
if [ ! -d "${AZURE_ICONS_DIR}/svg" ] || [ -z "$(ls -A ${AZURE_ICONS_DIR}/svg 2>/dev/null)" ]; then
    echo "Warning: SVG icons not found. Please run download-azure-icons.sh first."
    echo "Creating stencil template..."
fi

# Create stencil XML template
cat > "${STENCIL_DIR}/azure-icons-stencil.xml" << 'EOF'
<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="app.diagrams.net">
  <diagram name="Azure Icons" id="azure-icons">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- Azure Icons Stencil -->
        <!-- This stencil contains Azure Architecture Icons -->
        <!-- Icons are loaded from assets/azure-icons/svg/ -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
EOF

# Create stencil library JSON
cat > "${STENCIL_DIR}/azure-icons-library.json" << 'EOF'
{
  "title": "Azure Architecture Icons",
  "author": "Microsoft",
  "description": "Azure Architecture Icons for Draw.io",
  "keywords": ["azure", "cloud", "architecture", "icons"],
  "icons": {
    "compute": [
      {
        "name": "Azure Kubernetes Service",
        "icon": "Icon-service-kubernetes-Azure.svg",
        "category": "Compute"
      },
      {
        "name": "Virtual Machine",
        "icon": "Icon-service-virtual-machine-Azure.svg",
        "category": "Compute"
      },
      {
        "name": "Container Instances",
        "icon": "Icon-service-container-instances-Azure.svg",
        "category": "Compute"
      }
    ],
    "networking": [
      {
        "name": "Virtual Network",
        "icon": "Icon-service-virtual-network-Azure.svg",
        "category": "Networking"
      },
      {
        "name": "Application Gateway",
        "icon": "Icon-service-application-gateway-Azure.svg",
        "category": "Networking"
      },
      {
        "name": "Load Balancer",
        "icon": "Icon-service-load-balancer-Azure.svg",
        "category": "Networking"
      }
    ],
    "storage": [
      {
        "name": "Storage Account",
        "icon": "Icon-service-storage-accounts-Azure.svg",
        "category": "Storage"
      },
      {
        "name": "Blob Storage",
        "icon": "Icon-service-blob-storage-Azure.svg",
        "category": "Storage"
      }
    ],
    "security": [
      {
        "name": "Key Vault",
        "icon": "Icon-service-key-vaults-Azure.svg",
        "category": "Security"
      },
      {
        "name": "Azure Active Directory",
        "icon": "Icon-service-azure-active-directory-Azure.svg",
        "category": "Security"
      }
    ]
  },
  "usage": {
    "drawio": "Import this stencil into Draw.io to use Azure icons",
    "instructions": "1. Open Draw.io\n2. File → Open Library → From → Device\n3. Select azure-icons-library.json\n4. Icons will appear in the left panel"
  }
}
EOF

# Create instructions for using the stencil
cat > "${STENCIL_DIR}/README.md" << 'EOF'
# Azure Icons Stencil for Draw.io

This directory contains stencil files for using Azure Architecture Icons in Draw.io (diagrams.net).

## Using the Stencil

### Method 1: Import Icons Directly

1. Open [Draw.io](https://app.diagrams.net/)
2. Click "More Shapes" (bottom left)
3. Click "+" to add a new library
4. Select "From Device"
5. Navigate to `assets/azure-icons/svg/`
6. Select the icons you want to use
7. Click "Create"

### Method 2: Use Icon Mapping

1. Open Draw.io
2. File → Open Library → From → Device
3. Select `azure-icons-library.json`
4. Icons will appear in the left panel

### Method 3: Manual Import

1. Open Draw.io
2. Click "Insert" → "Image"
3. Select "From Device"
4. Navigate to `assets/azure-icons/svg/`
5. Select the icon file
6. Click "Open"

## Icon Categories

Icons are organized by category:
- Compute (AKS, VMs, Containers)
- Networking (VNet, Gateway, Load Balancer)
- Storage (Storage Account, Blob, File Share)
- Security (Key Vault, AAD, Firewall)
- Management (Resource Groups, Monitor, Log Analytics)

## Best Practices

1. Use SVG icons for scalability
2. Maintain consistent icon size
3. Use official Azure icons only
4. Follow Azure Architecture Center guidelines
5. Label all components clearly

## References

- [Azure Architecture Center](https://docs.microsoft.com/azure/architecture/)
- [Azure Architecture Icons](https://docs.microsoft.com/azure/architecture/icons/)
- [Draw.io Documentation](https://www.diagrams.net/doc/)
EOF

echo "✅ Draw.io stencil created"
echo "Stencil files are available in: ${STENCIL_DIR}/"
echo "To use the stencil:"
echo "  1. Open Draw.io"
echo "  2. Import icons from ${AZURE_ICONS_DIR}/svg/"
echo "  3. See ${STENCIL_DIR}/README.md for instructions"