アイコン概要

Drawlib は、Phosphor ベクターグリフ（phosphor）、クラウドプロバイダースイート（gcp、aws、azure）、15 種類の公式ブランドスイート（ai、data、code、cnative、devops など）、および 15 種類のオリジナル 2D パステルスイート（original_*）という 4 つのビジュアルティアにわたる 34 個のアイコンモジュール（drawlib.icons.*）を通じて、4,538 個の正規アイコンを提供します。

from drawlib.canvas import save, setup
from drawlib.icons import (
    ai,
    aws,
    azure,
    cnative,
    code,
    data,
    gcp,
    original_ai,
    original_cloud,
    original_data,
    original_security,
    phosphor,
)
from drawlib.shapes import rectangle
from drawlib.styles import Styles
from drawlib.text import text

setup(width=144, height=70)

tiers = [
    (
        20.0,
        "1. Vector Glyphs",
        "phosphor (1,512)",
        Styles.Neutral,
        [
            ("cpu", phosphor.cpu, Styles.DarkBold),
            ("database", phosphor.database, Styles.PrimaryBold),
            ("shield", phosphor.shield_check, Styles.SecondaryBold),
            ("git", phosphor.git_branch, Styles.DarkBold),
        ],
    ),
    (
        54.5,
        "2. Cloud Providers",
        "gcp · aws · azure (829)",
        Styles.PrimaryNeutral,
        [
            ("GKE", gcp.google_kubernetes_engine, Styles.Primary),
            ("BigQuery", gcp.bigquery, Styles.Primary),
            ("Lambda", aws.aws_lambda, Styles.Primary),
            ("AKS", azure.kubernetes_services, Styles.Primary),
        ],
    ),
    (
        89.5,
        "3. Official Brands",
        "15 Domain Suites (910)",
        Styles.Neutral,
        [
            ("OpenAI", ai.openai, Styles.Primary),
            ("PostgreSQL", data.postgresql, Styles.Primary),
            ("Kubernetes", cnative.kubernetes, Styles.Primary),
            ("Python", code.python, Styles.Primary),
        ],
    ),
    (
        124.0,
        "4. 2D Pastel Suites",
        "15 original_* (1,287)",
        Styles.SecondaryNeutral,
        [
            ("API GW", original_cloud.api_gateway, Styles.Primary),
            ("AI Agent", original_ai.ai_agent, Styles.Primary),
            ("Warehouse", original_data.data_warehouse, Styles.Primary),
            ("DDoS Guard", original_security.ddos_protection, Styles.Primary),
        ],
    ),
]

for cx, title, subtitle, card_style, icons_list in tiers:
    # Column card container
    rectangle((cx, 35), width=32.5, height=62, style=card_style.patch(shape_r=2.5))
    text((cx, 60.0), title, style=Styles.DarkBold.patch(text_size=11.0))
    text((cx, 54.8), subtitle, style=Styles.Muted.patch(text_size=9.5))

    # 2x2 grid of representative icons inside each column
    offsets = [(-7.6, 42.0), (7.6, 42.0), (-7.6, 21.0), (7.6, 21.0)]
    sub_card_style = Styles.White.patch(shape_r=1.5, line_width=0.6)
    for (dx, iy), (lbl, fn, st) in zip(offsets, icons_list, strict=True):
        ix = cx + dx
        rectangle((ix, iy - 2.0), width=13.8, height=17.5, style=sub_card_style)
        fn((ix, iy + 1.2), width=7.5, style=st)
        text((ix, iy - 6.8), lbl, style=Styles.DarkBold.patch(text_size=9.5))

save()

1. アイコンの基本概念とビジュアルツアー

全 34 個のアイコンモジュール（drawlib.icons.*）は、1:1 の正方形アスペクト比で自動スケーリングされる共通の中心アンカー (cx, cy) API を備えています。そのため、座標を再計算することなく、テーマカラーを適用できるベクターグリフ（phosphor）、落ち着いた 2D パステルツイン（original_*）、公式クラウド・ベンダーロゴの間を自在に切り替えられます。ビジュアルティア、不透明度や image_* による境界フレーム、variant パレット、そして強く型付けされたダイアグラム用 *Icon Enum がどのように連携するかを以下のアニメーションで確認してください。

• 互換性のある 3 つのビジュアルティア: 同一の (cx, cy) 座標のまま、phosphor ベクターグリフ、original_* 2D パステルツイン、公式クラウド／ベンダー PNG（gcp、aws、azure、ai、data など）をシームレスに切り替えられます。
• 中心アンカーと image_* フレーミング（xy、width、style）: すべてのアイコンは xy を中心に 1:1 のアスペクト比で配置され、alpha による不透明度、image_tint_color による透過背景の塗りつぶし、image_border_* による実線・破線フレームをサポートします。
• パレットバリアントと 1:1 ツイン命名規則（variant="default" | "modern"）: GCP の主要アイコンを 3 トーンブルーと 4 カラーパレットの間で切り替えたり、<domain>.<name> と original_<domain>.<name>（さらにベンダーニュートラルな概念アイコン）をそのまま差し替えたりできます。
• 高レベルダイアグラム用 Enum（<Module>Icon）: PhosphorIcon、GcpIcon、AiIcon、OriginalAiIcon、DataIcon をはじめとする全 34 種類の *Icon Enum を、Node(icon=...) や Participant(icon=...) に直接渡せます。

2. なぜ 3 つのビジュアルスタイルがあるのか？（適切なアイコンティアの選び方）

技術図解では、用途や対象読者に応じて求められる視覚的な具体性が異なります。Drawlib は 4,538 個の正規アイコンを 4 つのモジュールグループ・3 つの明確なビジュアルスタイルに体系化しており、ドキュメントの目的に最適な表現粒度を選択できます。

• phosphor ベクターアイコンを使う場面: ステップインジケーター、警告バッジ、高レベルな概念フローチャートなど、テーマパレット（style=Styles.PrimaryBold、Styles.WhiteBold）を継承する軽量な単色アイコンが必要な場合。
• 公式ベンダー・ブランドアイコン（gcp、aws、azure、ai、data、code、cnative など）を使う場面: エンジニアが一目で公式サービスや OSS ロゴを識別できることが期待される、具体的な本番デプロイ構成をドキュメント化する場合。
• オリジナル 2D パステルアイコン（original_cloud、original_ai、original_data など）を使う場面: ファシリティ機器、エンタープライズ SaaS、AI エージェント、クラウドゲートウェイなど複数領域の要素を組み合わせつつ、キャンバス上のすべてのアイコンを落ち着いた統一感のある 2D イラストスタイルに揃えたい場合。

3. 共通アイコン API と座標アンカー

phosphor および全 33 個の PNG アイコンモジュールのすべてのアイコン関数は、完全に同一の中心アンカー (cx, cy) 呼び出しシグネチャを共有しています。

from drawlib.icons import ai, gcp, original_ai, phosphor
from drawlib.styles import Styles

# All icon modules anchor at the center (cx, cy) with a 1:1 square aspect ratio:
phosphor.robot((20, 25), width=10.0, style=Styles.PrimaryBold)
gcp.vertex_ai((50, 25), width=10.0, style=Styles.Primary, variant="default")
ai.openai((80, 25), width=10.0, style=Styles.Primary)
original_ai.ai_agent((110, 25), width=10.0, style=Styles.Primary)

3.1. ビジュアルティア間の並列比較

以下の図では、同じ 5 つのアーキテクチャ上の役割（LLM / AI、Database、Kubernetes、Security / IAM、Client Browser）を 3 つのビジュアルスタイルすべてで並べて描画しています。

from drawlib.canvas import save, setup
from drawlib.icons import (
    ai,
    client,
    cnative,
    data,
    original_ai,
    original_client,
    original_cnative,
    original_data,
    original_security,
    phosphor,
    security,
)
from drawlib.shapes import rectangle
from drawlib.styles import Styles
from drawlib.text import text

setup(width=144, height=78)

columns = [
    ("LLM / AI", phosphor.robot, ai.openai, original_ai.openai),
    ("Database", phosphor.database, data.postgresql, original_data.postgresql),
    ("Kubernetes", phosphor.cube, cnative.kubernetes, original_cnative.kubernetes),
    ("Security / IAM", phosphor.shield_check, security.okta, original_security.okta),
    ("Client Browser", phosphor.browser, client.chrome, original_client.chrome),
]

rows = [
    (56.5, "Tier 1: Phosphor", "Vector Glyph", Styles.Neutral),
    (35.0, "Tier 2: Official", "Vendor / OSS Logo", Styles.PrimaryNeutral),
    (13.5, "Tier 3: Original", "2D Pastel Suite", Styles.SecondaryNeutral),
]

# Column headers
for col_idx, (col_title, _, _, _) in enumerate(columns):
    cx = 46.0 + col_idx * 21.5
    text((cx, 71.0), col_title, style=Styles.DarkBold.patch(text_size=10.5))

# Row labels and icon cells
for row_idx, (cy, row_title, row_sub, card_st) in enumerate(rows):
    rectangle((18.5, cy), width=29.0, height=18.5, style=card_st.patch(shape_r=2))
    text((18.5, cy + 2.5), row_title, style=Styles.DarkBold.patch(text_size=10.0))
    text((18.5, cy - 3.0), row_sub, style=Styles.Muted.patch(text_size=9.5))

    for col_idx, (_, fn_vec, fn_off, fn_orig) in enumerate(columns):
        cx = 46.0 + col_idx * 21.5
        rectangle((cx, cy), width=19.0, height=18.5, style=card_st.patch(shape_r=2))
        if row_idx == 0:
            fn_vec((cx, cy), width=8.5, style=Styles.PrimaryBold)
        elif row_idx == 1:
            fn_off((cx, cy), width=8.5, style=Styles.Primary)
        else:
            fn_orig((cx, cy), width=8.5, style=Styles.Primary)

save()

4. 全 34 アイコンモジュール一覧ディレクトリ

全 34 個のアイコンモジュールは厳密な 1 対 1 の正規命名規則（エイリアスなし）に従っており、初回使用時に背後のフォントまたは PNG アーカイブを遅延ロードします。オフライン環境や CI 環境向けにすべてのアイコンパッケージを事前ダウンロードするには、uv run drawlib cache download --all を実行してください。

5. 高レベルダイアグラムでのアイコン活用（ArchitectureDiagram と SequenceDiagram）

ArchitectureDiagram（Node(..., icon=...)）と SequenceDiagram（Participant(..., icon=...)）はどちらも、全 34 種類の *Icon Enum（ClientIcon、AiIcon、GcpIcon、AwsIcon、DataIcon、OriginalAiIcon など）をネイティブに受け付けます。これにより、クライアント端末・クラウドインフラ・AI モデル・データベースを単一の接続トポロジ内で自由に組み合わせられます。

from drawlib.canvas import save, setup
from drawlib.diagrams.architecture import (
    AiIcon,
    ArchitectureDiagram,
    ClientIcon,
    DataIcon,
    GcpIcon,
    Node,
    NodeGroup,
)
from drawlib.styles import Styles

setup(width=132, height=64)

d = ArchitectureDiagram(
    node_style=Styles.Primary,
    node_text_style=Styles.DarkBold.patch(text_size=10.0),
    edge_style=Styles.DarkBold,
    edge_text_style=Styles.DarkBold.patch(text_size=10.0),
    node_card_style=Styles.Neutral,
    title="Multi-Domain RAG Pipeline (ClientIcon + GcpIcon + AiIcon + DataIcon)",
)

web = d.add(
    Node("Chrome Client", width=24, height=18, icon=ClientIcon.CHROME, icon_size=7.5),
    xy=(14.0, 22.0),
)

vpc = d.add(NodeGroup(title="Production Cloud VPC", padding=5.0), xy=(40.0, 4.0))
run = vpc.add(
    Node(
        "Cloud Run\nOrchestrator",
        width=25,
        height=18,
        icon=GcpIcon.CLOUD_RUN,
        icon_size=7.5,
        card_style=Styles.PrimaryNeutral,
    ),
    xy=(16.0, 18.0),
)
llm = vpc.add(
    Node(
        "OpenAI\nAPI",
        width=24,
        height=18,
        icon=AiIcon.OPENAI,
        icon_size=7.5,
        card_style=Styles.SecondaryNeutral,
    ),
    xy=(60.0, 28.0),
)
pg = vpc.add(
    Node(
        "PostgreSQL\npgvector",
        width=24,
        height=18,
        icon=DataIcon.POSTGRESQL,
        icon_size=7.5,
    ),
    xy=(60.0, 8.0),
)

d.connect(web, run, label="HTTPS", padding=1.5)
d.connect(run, llm, padding=1.5)
d.connect(run, pg, padding=1.5)

d.draw(xy=(6.0, 4.0))
save()