/drawio-diagram-forge

Cloud Icons Reference

⚠️ Critical: Azure Icon Format

VS Code Draw.io Integration では mxgraph.azure.* 形式が正しく表示されない。

必ず img/lib/azure2/**/*.svg 形式を使用すること。

Icon Selection Policy

Azure 中心の構成図では、使える Azure アイコンは積極的に使う。

• Azure サービスに verified な Azure2 アイコンがあるなら、まずアイコン利用を検討する
• アイコンを使っても、サービス名の短いラベルは残す
• 同じ図の同じレイヤーでは、Azure アイコンと generic box を無秩序に混在させない
• アイコンが存在しない、誤解を招く、または図が読みにくくなる場合だけ generic box に落とす
• 初回レビューでは「この図で icon 化できるノードを box のまま放置していないか」を確認する

目安: Azure Architecture / Hub-Spoke / Landing Zone / Service topology のような図では、主要な Azure サービスは box より icon を優先する。

🔧 Initial Setup (Required)

Azure/AWS アイコンを使うには、事前にシェイプライブラリを有効化する必要がある。

手順

1. .drawio ファイルを VS Code で開く
2. 左下の 「+ その他の図形」 (+ More Shapes) をクリック
3. 「図形」ダイアログが開く
4. 「ネットワーク」カテゴリで以下にチェック：
   • ✅ Azure - Azure アイコン
   • ✅ AWS17 / AWS18 / AWS 2026 - AWS アイコン（用途に応じて）
   • ✅ AWS 3D - 3D 表現が必要な場合
5. 「設定を保存」 にチェック（次回以降も有効）
6. 「適用」 をクリック

推奨設定

Note: 設定は .drawio ファイルごとではなく、VS Code 全体で保存される。一度設定すれば他のファイルでも有効。

Azure Icons (Azure2 形式)

Common Azure Icons

Azure Icon Style (✅ Correct)

<mxCell id="vm1" value="VM-01"
        style="aspect=fixed;html=1;points=[];align=center;image;fontSize=12;image=img/lib/azure2/compute/Virtual_Machine.svg;verticalLabelPosition=bottom;verticalAlign=top;"
        vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="68" height="68" as="geometry"/>
</mxCell>

Azure2 Library Structure

img/lib/azure2/
├── ai_machine_learning/    # Azure ML, Cognitive Services
├── analytics/              # Synapse, Event Hubs
├── compute/                # VM, App Service, Functions, AKS
├── containers/             # Container Instances
├── databases/              # SQL, Cosmos DB, Redis
├── devops/                 # Azure DevOps
├── identity/               # Azure AD / Entra ID
├── integration/            # API Management, Logic Apps, Service Bus
├── iot/                    # IoT Hub
├── management_governance/  # Monitor, Log Analytics, Recovery Services, Policy
├── networking/             # VNet, Load Balancer, Front Door, VPN (Virtual_Network_Gateways)
├── security/               # Key Vault, Defender, Sentinel
├── storage/                # Storage Accounts, Data Lake
└── web/                    # App Service Plans

⚠️ Common Mistakes (Verified against GitHub)

🚫 Non-Existent Icons & Alternatives

以下のアイコンは draw.io の azure2 ライブラリに存在しない、またはパスが異なる。代替案を使用すること。

🔍 other/ カテゴリに注目

多くの新しい Azure サービスは other/ カテゴリに配置されている。見つからない場合は other/ を確認：

• other/Azure_Cloud_Shell.svg
• other/Azure_Communication_Services.svg
• other/Container_App_Environments.svg
• other/Worker_Container_App.svg
• other/Grafana.svg
• other/Azure_Load_Testing.svg
• other/MS_Dev_Box.svg
• other/Private_Endpoints.svg
• other/Local_Network_Gateways.svg
• other/ExpressRoute_Direct.svg

代替スタイル例

角丸ボックス + テキスト（GitHub 向け）:

<mxCell value="Cloud Shell"
        style="rounded=1;whiteSpace=wrap;html=1;fillColor=#0078D4;strokeColor=#005A9E;fontColor=#FFFFFF;fontSize=12;fontStyle=1;"
        vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="100" height="40" as="geometry"/>
</mxCell>

雲形状（Internet 向け）:

<mxCell value="Internet"
        style="ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#F5F5F5;strokeColor=#666666;"
        vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="80" as="geometry"/>
</mxCell>

💡 Tip: 新しい Azure サービスはアイコンがライブラリに追加されるまで時間がかかる。テキストボックスで対応し、将来のアップデートで置換可能にする。

AWS Icons (AWS4 形式)

Setup

1. Open .drawio file in VS Code
2. Click "+ More Shapes" (bottom-left)
3. Check AWS
4. Click Apply

Common AWS Icons

AWS Icon Style

<mxCell id="ec2" value="EC2"
        style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;strokeColor=#ffffff;fillColor=#232F3E;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.ec2;"
        vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="50" height="50" as="geometry"/>
</mxCell>

Style Comparison

Best Practices

1. Azure は必ず img/lib/azure2/ 形式を使用
2. Consistency: Use icons from the same provider in one diagram
3. Labeling: Always add text labels below icons
4. Sizing: Keep icon sizes consistent (68x68 for Azure, 50x50 for AWS)
5. Grouping: Use containers/swimlanes to group related services

Validation Checklist

生成後に確認：

• Azure アイコンが img/lib/azure2/ パスを使用している
• shape=mxgraph.azure.* が含まれていない
• VS Code Draw.io Integration で正しく表示される

Icon Detection Keywords

When the input mentions these keywords, use corresponding cloud icons:

Azure Keywords

• Azure, Microsoft Cloud
• VM, Virtual Machine (in Azure context)
• App Service, Function App, Logic App
• VNET, Virtual Network
• AAD, Azure AD, Entra ID

AWS Keywords

• AWS, Amazon Web Services
• EC2, Lambda, ECS, EKS
• S3, RDS, DynamoDB
• VPC, CloudFront, Route 53

Reference

• Draw.io Azure2 Icons
• Draw.io AWS4 Icons

AWS → Azure Migration Patterns

AWS 図を Azure 化する際のサービス対応表：

Migration Tips

1. NAT Gateway → Azure Firewall: Azure では Firewall が SNAT 機能を持つため、NAT Gateway を別途配置せず Firewall 直結構成が可能
2. Service Endpoint → Private Endpoint: Azure では Private Endpoint が推奨。より安全なプライベート接続を提供
3. 形式変換: mxgraph.aws4.* や mxgraph.azure.* は img/lib/azure2/**/*.svg 形式に置換

Conversion Commands

# sed での一括置換例（旧形式 → 新形式は手動対応推奨）
sed -i 's/mxgraph\.azure3\./mxgraph.azure./g' diagram.drawio

# ID重複チェック（編集時に発生しやすい）
import re, collections, pathlib
p = pathlib.Path('diagram.drawio')
text = p.read_text(encoding='utf-8')
ids = re.findall(r'\bid="([^"]+)"', text)
ctr = collections.Counter(ids)
dups = [i for i,c in ctr.items() if c > 1]
if dups:
    print(f'⚠️ Duplicate IDs: {dups}')

Azure Architecture Patterns

Hub-Spoke Topology Icons

典型的な Hub-Spoke アーキテクチャで使用するアイコン：

Example: Hub VNet Components

<!-- Firewall -->
<mxCell value="Azure Firewall"
        style="aspect=fixed;image=img/lib/azure2/networking/Firewalls.svg;..."
        .../>

<!-- Bastion -->
<mxCell value="Bastion"
        style="aspect=fixed;image=img/lib/azure2/networking/Bastions.svg;..."
        .../>

<!-- Monitor -->
<mxCell value="Azure Monitor"
        style="aspect=fixed;image=img/lib/azure2/management_governance/Monitor.svg;..."
        .../>

<!-- Backup (Recovery Services) -->
<mxCell value="Backup"
        style="aspect=fixed;image=img/lib/azure2/management_governance/Recovery_Services_Vaults.svg;..."
        .../>