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.
249 lines
8.0 KiB
Markdown
249 lines
8.0 KiB
Markdown
# 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
|
|
|
|
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 icons (you can select multiple)
|
|
7. Click "Create"
|
|
|
|
#### Use Icons in Diagram
|
|
|
|
1. Icons will appear in the left panel
|
|
2. Drag and drop icons onto the canvas
|
|
3. Resize and customize as needed
|
|
4. Connect icons with arrows to show relationships
|
|
|
|
#### Export Diagram
|
|
|
|
1. File → Export as → SVG/PNG/PDF
|
|
2. Choose export options
|
|
3. Save to `assets/diagrams/architecture/`
|
|
|
|
### Lucidchart
|
|
|
|
#### Import Icons
|
|
|
|
1. Open Lucidchart
|
|
2. Click "Shapes" → "Import"
|
|
3. Select "From File"
|
|
4. Navigate to `assets/azure-icons/svg/`
|
|
5. Select icons to import
|
|
6. Icons will appear in your shape library
|
|
|
|
#### Use Icons
|
|
|
|
1. Drag icons from the shape library
|
|
2. Customize colors and styles
|
|
3. Connect with lines and arrows
|
|
4. Add labels and descriptions
|
|
|
|
### Visio
|
|
|
|
#### Import Azure Stencils
|
|
|
|
1. Open Microsoft Visio
|
|
2. File → Shapes → My Shapes → Import
|
|
3. Navigate to `assets/azure-icons/svg/`
|
|
4. Select icons to import
|
|
5. Icons will appear in your stencil
|
|
|
|
#### Use Icons
|
|
|
|
1. Drag icons from the stencil
|
|
2. Customize using Visio tools
|
|
3. Connect with connectors
|
|
4. Apply themes and styles
|
|
|
|
## Documentation
|
|
|
|
### Markdown
|
|
|
|
```markdown
|
|
|
|
|
|
|
|
```
|
|
|
|
### HTML
|
|
|
|
```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
|
|
|
|
```latex
|
|
\includegraphics[width=0.1\textwidth]{assets/azure-icons/svg/Icon-service-kubernetes-Azure.svg}
|
|
```
|
|
|
|
## Presentations
|
|
|
|
### PowerPoint
|
|
|
|
1. Insert → Pictures → This Device
|
|
2. Navigate to `assets/azure-icons/png/`
|
|
3. Select PNG icons (better for presentations)
|
|
4. Insert and resize as needed
|
|
|
|
### Keynote
|
|
|
|
1. Insert → Choose
|
|
2. Navigate to `assets/azure-icons/png/`
|
|
3. Select PNG icons
|
|
4. 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
|
|
|
|
1. Open SVG icon in vector editor (Inkscape, Illustrator)
|
|
2. Modify colors as needed
|
|
3. Save as new file
|
|
4. Place in `assets/azure-icons/svg/`
|
|
5. Update `icon-mapping.json`
|
|
|
|
## Best Practices
|
|
|
|
### Icon Selection
|
|
|
|
1. **Use Appropriate Icons**: Choose icons that represent the service accurately
|
|
2. **Maintain Consistency**: Use the same icon style across all diagrams
|
|
3. **Use Official Icons**: Always use official Azure icons
|
|
4. **Label Icons**: Label all icons clearly
|
|
5. **Group Related Icons**: Group related icons together
|
|
|
|
### Diagram Design
|
|
|
|
1. **Keep It Simple**: Focus on key components
|
|
2. **Use Legends**: Add legends for complex diagrams
|
|
3. **Show Relationships**: Show connections with arrows
|
|
4. **Use Colors**: Use colors to distinguish components
|
|
5. **Maintain Hierarchy**: Show component hierarchy clearly
|
|
|
|
### Documentation
|
|
|
|
1. **Include Descriptions**: Add descriptions to diagrams
|
|
2. **Update Regularly**: Update diagrams when architecture changes
|
|
3. **Version Control**: Keep diagrams in version control
|
|
4. **Link to Documentation**: Link diagrams to relevant documentation
|
|
5. **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]
|
|
```
|
|
|
|
## References
|
|
|
|
- [Assets Guide](../../docs/ASSETS_GUIDE.md)
|
|
- [Architecture Diagrams Guide](../../docs/ARCHITECTURE_DIAGRAMS.md)
|
|
- [Icon Catalog](icon-catalog.md)
|
|
- [Icon Mapping](icon-mapping.json)
|
|
- [Azure Architecture Center](https://docs.microsoft.com/azure/architecture/)
|
|
|