ベンダーアイコン

Shumoku は 900 以上のベンダーアイコンを CDN でホスティングしています。ノードやサブグラフの icon: フィールドに URL を指定すると、そのアイコンでレンダリングされます。

ベンダー	アイコン数	形式	用途
Yamaha	103	PNG	ルーター、スイッチ、AP、VoIP
Aruba	55	SVG	スイッチ、AP、コントローラー
AWS	477	SVG	クラウドサービス全般
Juniper	343	PNG	ルーター、スイッチ、FW

使い方

icon: にアイコンの URL を指定します。URL の形式は https://icons.shumoku.packof.me/v1/{vendor}/{name}.{ext}（Yamaha / Juniper は .png、Aruba / AWS は .svg）です。

nodes:
  - id: router-1
    label: "RTX3510"
    type: router
    vendor: yamaha
    model: rtx3510
    icon: https://icons.shumoku.packof.me/v1/yamaha/rtx3510.png

icon — 表示されるアイコンを決めます。CDN の URL のほか、任意の画像 URL やインライン SVG も指定できます
type — icon が無い場合のフォールバックアイコン（デバイス種別の汎用アイコン）と形状に影響します
vendor / model / service — メタデータとして保持され、SVG 出力の data-* 属性やツールチップに使われます（アイコンの自動解決は行いません）

アイコンの寸法はレンダリングパイプライン（prepareRender）が自動的に取得し、正しいアスペクト比で描画します。手動設定は不要です。

クラウドアイコン

AWS などのクラウドサービスも同じ形式です：

nodes:
  - id: instance-1
    label: "Web Server"
    vendor: aws
    service: ec2
    icon: https://icons.shumoku.packof.me/v1/aws/ec2-instance.svg

サブグラフでのアイコン

サブグラフにも icon: を設定できます。VPC やリージョンの表現に便利です。

subgraphs:
  - id: vpc
    label: "Production VPC"
    vendor: aws
    service: vpc
    icon: https://icons.shumoku.packof.me/v1/aws/vpc-virtual-private-cloud.svg
    style:
      fill: "#FFF8E1"
      stroke: "#FF8F00"

完全な例

name: "Hybrid Network"

subgraphs:
  - id: aws
    label: "AWS Tokyo"
    icon: https://icons.shumoku.packof.me/v1/aws/vpc-virtual-private-cloud.svg
    style:
      fill: "#fff8e1"

  - id: onprem
    label: "On-Premises"
    style:
      fill: "#e3f2fd"

nodes:
  # AWS
  - id: alb
    label: "ALB"
    icon: https://icons.shumoku.packof.me/v1/aws/elasticloadbalancing-application-load-balancer.svg
    parent: aws

  - id: ec2-1
    label: "Web Server"
    icon: https://icons.shumoku.packof.me/v1/aws/ec2-instance.svg
    parent: aws

  # On-Premises
  - id: router
    label: "RTX3510"
    type: router
    vendor: yamaha
    model: rtx3510
    icon: https://icons.shumoku.packof.me/v1/yamaha/rtx3510.png
    parent: onprem

  - id: switch
    label: "SWX3220"
    type: l3-switch
    vendor: yamaha
    model: swx3220-16mt
    icon: https://icons.shumoku.packof.me/v1/yamaha/swx3220-16mt.png
    parent: onprem

links:
  - from: alb
    to: ec2-1
  - from: router
    to: switch
    standard: 10GBASE-T
  # VPN接続
  - from: router
    to: alb
    type: dashed
    label: "Site-to-Site VPN"

アイコン一覧

以下で全アイコンを確認できます。ファイル名がそのまま URL の {name} になります：

Loading icons...

ベンダーアイコン

使い方

クラウドアイコン

サブグラフでのアイコン

完全な例

アイコン一覧

目次