1fb7266469
- Introduced Aggregator.sol for Chainlink-compatible oracle functionality, including round-based updates and access control. - Added OracleWithCCIP.sol to extend Aggregator with CCIP cross-chain messaging capabilities. - Created .gitmodules to include OpenZeppelin contracts as a submodule. - Developed a comprehensive deployment guide in NEXT_STEPS_COMPLETE_GUIDE.md for Phase 2 and smart contract deployment. - Implemented Vite configuration for the orchestration portal, supporting both Vue and React frameworks. - Added server-side logic for the Multi-Cloud Orchestration Portal, including API endpoints for environment management and monitoring. - Created scripts for resource import and usage validation across non-US regions. - Added tests for CCIP error handling and integration to ensure robust functionality. - Included various new files and directories for the orchestration portal and deployment scripts.
8.0 KiB
8.0 KiB
Azure Icons Usage Examples
This document provides examples of how to use Azure Architecture Icons in various scenarios.
Diagram Tools
Draw.io / diagrams.net
Import Icons
- Open Draw.io
- Click "More Shapes" (bottom left)
- Click "+" to add a new library
- Select "From Device"
- Navigate to
assets/azure-icons/svg/ - Select icons (you can select multiple)
- Click "Create"
Use Icons in Diagram
- Icons will appear in the left panel
- Drag and drop icons onto the canvas
- Resize and customize as needed
- Connect icons with arrows to show relationships
Export Diagram
- File → Export as → SVG/PNG/PDF
- Choose export options
- Save to
assets/diagrams/architecture/
Lucidchart
Import Icons
- Open Lucidchart
- Click "Shapes" → "Import"
- Select "From File"
- Navigate to
assets/azure-icons/svg/ - Select icons to import
- Icons will appear in your shape library
Use Icons
- Drag icons from the shape library
- Customize colors and styles
- Connect with lines and arrows
- Add labels and descriptions
Visio
Import Azure Stencils
- Open Microsoft Visio
- File → Shapes → My Shapes → Import
- Navigate to
assets/azure-icons/svg/ - Select icons to import
- Icons will appear in your stencil
Use Icons
- Drag icons from the stencil
- Customize using Visio tools
- Connect with connectors
- Apply themes and styles
Documentation
Markdown
HTML
<img src="assets/azure-icons/svg/Icon-service-kubernetes-Azure.svg" alt="Azure Kubernetes Service" width="64" height="64">
<img src="assets/azure-icons/svg/Icon-service-virtual-network-Azure.svg" alt="Virtual Network" width="64" height="64">
LaTeX
\includegraphics[width=0.1\textwidth]{assets/azure-icons/svg/Icon-service-kubernetes-Azure.svg}
Presentations
PowerPoint
- Insert → Pictures → This Device
- Navigate to
assets/azure-icons/png/ - Select PNG icons (better for presentations)
- Insert and resize as needed
Keynote
- Insert → Choose
- Navigate to
assets/azure-icons/png/ - Select PNG icons
- Insert and customize
Architecture Diagrams
High-Level Architecture
┌─────────────────────────────────────────┐
│ Azure Subscription │
│ │
│ ┌──────────────────────────────────┐ │
│ │ Azure Kubernetes Service │ │
│ │ ┌──────────┐ ┌──────────┐ │ │
│ │ │Validator │ │ Sentry │ │ │
│ │ └──────────┘ └──────────┘ │ │
│ │ ┌──────────┐ │ │
│ │ │ RPC Node │ │ │
│ │ └──────────┘ │ │
│ └──────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────┐ │
│ │ Key Vault │ │
│ └──────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────┐ │
│ │ Storage Account │ │
│ └──────────────────────────────────┘ │
└─────────────────────────────────────────┘
Network Architecture
┌─────────────────────────────────────────┐
│ Virtual Network (10.0.0.0/16) │
│ │
│ ┌────────────┐ ┌────────────┐ │
│ │ AKS Subnet │ │ Validators │ │
│ │ 10.0.1.0/24│ │ 10.0.2.0/24│ │
│ └────────────┘ └────────────┘ │
│ │
│ ┌────────────┐ ┌────────────┐ │
│ │ Sentries │ │ RPC Subnet │ │
│ │ 10.0.3.0/24│ │ 10.0.4.0/24│ │
│ └────────────┘ └────────────┘ │
│ │
│ ┌────────────┐ │
│ │App Gateway │ │
│ │ 10.0.5.0/24│ │
│ └────────────┘ │
└─────────────────────────────────────────┘
Icon Sizes
Recommended Sizes
- Small: 32x32 pixels (for small diagrams)
- Medium: 64x64 pixels (for standard diagrams)
- Large: 128x128 pixels (for detailed diagrams)
- Extra Large: 256x256 pixels (for presentations)
Scaling SVG Icons
SVG icons can be scaled without loss of quality:
- Use SVG for all diagrams
- Scale to any size needed
- Maintain aspect ratio
Color Customization
Azure Brand Colors
- Azure Blue: #0078D4
- Azure Dark Blue: #005A9E
- Azure Light Blue: #00BCF2
Customizing Icons
- Open SVG icon in vector editor (Inkscape, Illustrator)
- Modify colors as needed
- Save as new file
- Place in
assets/azure-icons/svg/ - Update
icon-mapping.json
Best Practices
Icon Selection
- Use Appropriate Icons: Choose icons that represent the service accurately
- Maintain Consistency: Use the same icon style across all diagrams
- Use Official Icons: Always use official Azure icons
- Label Icons: Label all icons clearly
- Group Related Icons: Group related icons together
Diagram Design
- Keep It Simple: Focus on key components
- Use Legends: Add legends for complex diagrams
- Show Relationships: Show connections with arrows
- Use Colors: Use colors to distinguish components
- Maintain Hierarchy: Show component hierarchy clearly
Documentation
- Include Descriptions: Add descriptions to diagrams
- Update Regularly: Update diagrams when architecture changes
- Version Control: Keep diagrams in version control
- Link to Documentation: Link diagrams to relevant documentation
- Provide Context: Provide context for diagrams
Examples
Example 1: Simple Architecture
[Internet] → [Application Gateway] → [AKS] → [Key Vault]
→ [Storage Account]
Example 2: Network Topology
[VNet] → [AKS Subnet] → [Validator Nodes]
→ [Sentry Subnet] → [Sentry Nodes]
→ [RPC Subnet] → [RPC Nodes]
Example 3: Data Flow
[Client] → [Application Gateway] → [RPC Node] → [Besu Network]
→ [Oracle Publisher]
→ [Key Vault]