draw.ioでAWSアイコンはどう表現されるのか確認してみた

データ事業本部の横山です。

前回の記事でdraw.ioの.drawio / .drawio.svg / .drawio.pngの中身を覗いたのですが、
各ファイル形式がどう実現されているかの確認までで、実際に配置されるアイコン群がどの様に表現されるのかは確認していませんでした。

今回は、AWS 2026のアイコンがどの様に表現されるかについて確認してみたいと思います。

結論

先に結論だけまとめておきます。

• AWSアイコンを1つ配置すると、.drawioに増えるのは <mxCell>1個だけ
  • 外枠や他のメタデータには変化なし
• その<mxCell>の中身は**style属性の2つのキー**の違いでアイコンが表現されている
  • shape=mxgraph.aws4.resourceIcon：「枠付きリソースアイコン」形状を使う場合の指定
  • resIcon=mxgraph.aws4.s3 … 枠の中に描くサービスアイコン（S3ならこれ）
• アイコンの色(≒背景色)は個別に指定されているが、AWSのサービスカテゴリで決まっている
  • Storage=緑、Compute=オレンジ、Database=マゼンタ等

style属性の各キーが何をしているかを整理するとこんな感じです。

また、draw.ioでAWSの図を描くときに触る<mxCell>は、ざっくり下記の4種類に分かれていました。
どれも<mxCell>1個で表現される点は同じです。
styleの中身でで大まかに表示される内容が変わります。

以降、実際にどうやって確認したかを順に見ていきます。

draw.ioとは

フローチャートやシステム構成図など、さまざまなダイアグラムを作成できるツールです。
わたしはVSCode拡張機能を利用することがほとんどです。

前提条件

わたしが動作確認した環境は以下の通りです。

• VSCode + Draw.io Integration拡張機能
• AWSアイコンパレットは「その他の図形＋」→「AWS 2026」を有効化

アイコンなし vs アイコンありの差分

まずは一番シンプルに「空のキャンバス」と「S3アイコンを1つだけ置いたキャンバス」で中身を比べてみます。

アイコンなし

<mxfile host="65bd71144e">
    <diagram id="vICoNQ3ua1ff6jT8zJnv" name="ページ1">
        <mxGraphModel dx="1002" dy="376" grid="1" gridSize="10" guides="1" tooltips="1"
                      connect="1" arrows="1" fold="1" page="1" pageScale="1"
                      pageWidth="827" pageHeight="1169" math="0" shadow="0">
            <root>
                <mxCell id="0"/>
                <mxCell id="1" parent="0"/>
            </root>
        </mxGraphModel>
    </diagram>
</mxfile>

前回記事にも出てきた最小構造です。
<mxCell id="0">と<mxCell id="1" parent="0">はdraw.ioが必ず生成するルートセルとデフォルトレイヤーです。

アイコンあり（S3アイコン1つ）

中身はこうなっていました。

<mxfile host="65bd71144e">
    <diagram id="qw1itF4ArJqKy3B1wWqu" name="ページ1">
        <mxGraphModel dx="1002" dy="376" grid="1" gridSize="10" guides="1" tooltips="1"
                      connect="1" arrows="1" fold="1" page="1" pageScale="1"
                      pageWidth="827" pageHeight="1169" math="0" shadow="0">
            <root>
                <mxCell id="0"/>
                <mxCell id="1" parent="0"/>
                <!-- ここからが追加分 -->
                <mxCell id="2" value=""
                  style="sketch=0;points=[[0,0,0],[0.25,0,0],...];outlineConnect=0;
                         fontColor=#232F3E;fillColor=#7AA116;strokeColor=#ffffff;
                         dashed=0;verticalLabelPosition=bottom;verticalAlign=top;
                         align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;
                         shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.s3;"
                  vertex="1" parent="1">
                    <mxGeometry x="370" y="160" width="78" height="78" as="geometry"/>
                </mxCell>
                <!-- ここまでが追加分 -->
            </root>
        </mxGraphModel>
    </diagram>
</mxfile>

points=[[0,0,0],...]の部分は接続ポイントの座標が16個並んでいるだけなので、見やすさのために省略しています。

差分は本当に<mxCell id="2">が1個増えただけです。こうやって中身を見てみるとかなりシンプルですね。
「画像を埋め込んでる」みたいなものではなく、「style属性にアイコンやその他諸々の指定して、描画はdraw.io側が全部やってくれる」という作りになっているみたいです。

共通部分（差分なし）

AWSアイコンの<mxCell>の中身を確認する。

アイコンがどう表現されているのかが気になるのでstyle属性を重点的に見ていきましょう。

style属性の中身

;区切りでKey-Valueが並んでいるので、一個ずつ意味を書き出してみました。

含まれている要素の大部分については、拡張機能のUIでも操作できる要素群みたいですね。
S3アイコンたらしめているのは、太字で書いたところで、その他の属性は表示のカスタマイズに関する属性になります。

<mxCell>に含まれる<mxGeometry>について（配置とサイズ）

こちらはアイコン自体自体の指定ではなく、drawioの図形全体にける配置とサイズに関する指定です。

<mxGeometry x="370" y="160" width="78" height="78" as="geometry"/>

78×78がdraw.ioでAWSアイコンを置いたときのデフォルトサイズみたいです。
わたしとしては、drawioの8目盛(80px)に合わせてくれたらなあと思っています。(若干足りない)

value属性（アイコンラベル）

アイコン下のテキストはvalue属性に入ります。

<mxCell id="2" value="Simple Storage Service (S3)"
  style="...;fontSize=12;...;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.s3;"
  parent="1" vertex="1">
    <mxGeometry x="370" y="160" width="78" height="78" as="geometry"/>
</mxCell>

value属性にラベル文字列がそのまま入るだけで、style側のfontSize=12やmxGeometryには変化がありませんでした。
普通にラベルを付けるだけならこのくらいシンプルです。
ただし、ラベルのフォントサイズや色をUIで変えるとHTMLエンティティで表現される様になります。試しにテキストサイズを16pxに変えてみると、valueの中身はこうなりました。

value="<font style="font-size: 16px;">Simple Storage Service (S3)</font>"

HTMLエンティティを戻すとこうなります。

<font style="font-size: 16px;">Simple Storage Service (S3)</font>

styleのhtml=1が効いているので、valueに書いたHTMLタグがラベルの描画にそのまま反映される仕組みですね。

fillColorはどう決めているのか

S3は緑（#7AA116）、Lambdaはオレンジ（#ED7100）、DynamoDBはマゼンタ（#C925D1）のように、アイコンの背景色がサービスによって違いますよね。
これは個別のアイコンに色が紐付いているのではなく、サービスカテゴリごとに色が決まっているようです。

パレットのカテゴリごとに、実際に並んでいるアイコンのfillColorを見ていくと下表の対応になっていました。

同じカテゴリのサービスは同じ色で、色を見ればだいたいの役割がわかるように設計されているみたいですね。

アイコンのstyleには2パターンある

調べていると、全部のアイコンがresourceIcon（枠付き）パターンというわけではないことに気付きました。

パターン1: resourceIcon（四角い色枠 + 白抜きアイコン）

背景色がついている四角いサービスアイコンがこれです。

shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.s3;

fillColorでカテゴリ色の塗りつぶし四角を背景として描いて、
そこにresIconで指定したアイコンを白抜き（strokeColor=#ffffff）で重ねて表現しているようです。
S3の緑の四角に白いバケツマーク、みたいな見た目になるやつですね。

パターン2: 直接shape指定（枠なし、アイコン単体）

General Resourcesの一部アイコン（User、Clientなど）はこちらでした。

shape=mxgraph.aws4.user;

resIconは使わず、shapeで直接アイコン図形を指定します。
styleを見るとstrokeColor=noneでfillColor=#232F3D（濃紺）や#5A6C86（グレー）が入っていて、アイコンの形そのものが描画されそれを対応色で塗り潰す形で表現されています。
パターン1のような「色の四角い背景」はありません。

グループ枠・矢印について

システム構成図やアーキテクチャ図を描くときは、アイコンだけじゃなくて「AWS Cloud」「Region」「VPC」のような囲み枠や、コンポーネント間をつなぐ矢印もよく利用します。
これらも同じく<mxCell>1個で表現されていました。

グループ枠（AWS Cloud / Region / VPC など）

例えばAWS Cloudの囲みはこんな感じでした。

shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_aws_cloud_alt;
strokeColor=#232F3E;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;
container=1;collapsible=0;...

• shape=mxgraph.aws4.group：「グループ（枠）」に対応する指定
• grIcon=mxgraph.aws4.group_aws_cloud_alt：枠の左上に出る小さなアイコン
  • リソースアイコンのresIconと対応する概念
• container=1 … 他の<mxCell>を子として含められるコンテナになる

矢印

矢印はedge="1"属性を持つ<mxCell>で、エッジ（辺）として扱われていました。

<mxCell id="2" value="" edge="1" parent="1"
  style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;elbow=vertical;
         startArrow=none;endFill=1;strokeColor=#545B64;rounded=0;">
    <mxGeometry width="100" relative="1" as="geometry">
        <mxPoint x="520" y="200" as="sourcePoint"/>
        <mxPoint x="620" y="200" as="targetPoint"/>
    </mxGeometry>
</mxCell>

style属性の中身は置いておいて、<mxGeometry>タグにsourcePoint, targetPointの<mxPoint>が追加されていて始点と終点が表現されていますね。

さいごに

drawioでAWSアイコンがどの様に表現されているのかについて確認してみました。
アイコン、グループ、矢印で違いはあるものの、思っていたよりは複雑なパターンにはなっていないような印象です。
特にAWSアイコンは「shapeとresIconの2つのキーでサービスを指定する<mxCell>」というシンプルな仕組みで成立していました。

これらの情報を元に、「全AWSアイコンを並べた.drawioを機械的に生成できないか」とかが気になってきます。
気が向いたら試してみたいと思います。

参考資料

• draw.ioのエクスポートファイル（.drawio / .drawio.svg / .drawio.png）の中身を覗いてみた - DevelopersIO（前回の記事）
• VSCode Draw.io Integration
• draw.io 公式サイト