#!/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' 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"