@drunkcoding/agents-and-skills 0.0.44 → 0.0.46

package/plugins/tech-graph/skills/tech-graph/package.json

@@ -1,42 +0,0 @@
-{
-  "name": "@yizhiyanhua-ai/fireworks-tech-graph",
-  "version": "1.0.4",
-  "description": "Generate production-quality SVG technical diagrams (architecture, flowchart, UML, ER, sequence, etc.) with 7 built-in styles. Export as SVG+PNG via cairosvg (recommended), with rsvg-convert and puppeteer as alternatives.",
-  "main": "SKILL.md",
-  "keywords": [
-    "claude-code",
-    "skill",
-    "diagram",
-    "svg",
-    "architecture",
-    "flowchart",
-    "uml",
-    "sequence-diagram",
-    "er-diagram",
-    "visualization"
-  ],
-  "author": "yizhiyanhua-ai",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git"
-  },
-  "bugs": {
-    "url": "https://github.com/yizhiyanhua-ai/fireworks-tech-graph/issues"
-  },
-  "homepage": "https://github.com/yizhiyanhua-ai/fireworks-tech-graph#readme",
-  "files": [
-    "SKILL.md",
-    "README.md",
-    "README.zh.md",
-    "LICENSE",
-    "references/",
-    "scripts/",
-    "fixtures/",
-    "templates/",
-    "assets/"
-  ],
-  "engines": {
-    "node": ">=14.0.0"
-  }
-}

package/plugins/tech-graph/skills/tech-graph/references/diagram-types.md

@@ -1,171 +0,0 @@
-# Diagram Types & Layout Rules
-
-## Architecture Diagram
-Nodes = services/components. Group into **horizontal layers** (top→bottom or left→right).
-- Typical layers: Client → Gateway/LB → Services → Data/Storage
-- Use `<rect>` dashed containers to group related services in the same layer
-- Arrow direction follows data/request flow
-- ViewBox: `0 0 960 600` standard, `0 0 960 800` for tall stacks
-
-## Data Flow Diagram
-Emphasizes **what data moves where**. Focus on data transformation.
-- Label every arrow with the data type (e.g., "embeddings", "query", "context")
-- Use wider arrows (`stroke-width: 2.5`) for primary data paths
-- Dashed arrows for control/trigger flows
-- Color arrows by data category (not just Agent/RAG — use semantics)
-
-## Flowchart / Process Flow
-Sequential decision/process steps.
-- Top-to-bottom preferred; left-to-right for wide flows
-- Diamond shapes for decisions, rounded rects for processes, parallelograms for I/O
-- Keep node labels short (≤3 words); put detail in sub-labels
-- Align nodes on a grid: x positions snap to 120px intervals, y to 80px
-
-## Agent Architecture Diagram
-Shows how an AI agent reasons, uses tools, and manages memory.
-Key conceptual layers to always consider:
-- **Input layer**: User, query, trigger
-- **Agent core**: LLM, reasoning loop, planner
-- **Memory layer**: Short-term (context window), Long-term (vector/graph DB), Episodic
-- **Tool layer**: Tool calls, APIs, search, code execution
-- **Output layer**: Response, action, side-effects
-Use cyclic arrows (loop arcs) to show iterative reasoning. Separate memory types visually.
-
-## Memory Architecture Diagram (Mem0, MemGPT-style)
-Specialized agent diagram focused on memory operations.
-- Show memory **write path** and **read path** separately (different arrow colors)
-- Memory tiers: Working Memory → Short-term → Long-term → External Store
-- Label memory operations: `store()`, `retrieve()`, `forget()`, `consolidate()`
-- Use stacked rects or layered cylinders for storage tiers
-
-## Sequence Diagram
-Time-ordered message exchanges between participants.
-- Participants as vertical **lifelines** (top labels + vertical dashed lines)
-- Messages as horizontal arrows between lifelines, top-to-bottom time order
-- Activation boxes (thin filled rects on lifeline) show active processing
-- Group with `<rect>` loop/alt frames with label in top-left corner
-- ViewBox height = 80 + (num_messages × 50)
-
-## Comparison / Feature Matrix
-Side-by-side comparison of approaches, systems, or components.
-- Column headers = systems, row headers = attributes
-- Row height: 40px; column width: min 120px; header row height: 50px
-- Checked cell: tinted background (e.g. `#dcfce7`) + `✓` checkmark; unsupported: `#f9fafb` fill
-- Alternating row fills (`#f9fafb` / `#ffffff`) for readability
-- Max readable columns: 5; beyond that, split into two diagrams
-
-## Timeline / Gantt
-Horizontal time axis showing durations, phases, and milestones.
-- X-axis = time (weeks/months/quarters); Y-axis = items/tasks/phases
-- Bars: rounded rects, colored by category, labeled inside or beside
-- Milestone markers: diamond or filled circle at specific x position with label above
-- ViewBox: `0 0 960 400` typical; wider for many time periods: `0 0 1200 400`
-
-## Mind Map / Concept Map
-Radial layout from central concept.
-- Central node at `cx=480, cy=280`
-- First-level branches: evenly distributed around center (360/N degrees)
-- Second-level branches: branch off first-level at 30-45° offset
-- Use curved `<path>` with cubic bezier for branches, not straight lines
-
-## Class Diagram (UML)
-Static structure showing classes, attributes, methods, and relationships.
-- **Class box**: 3-compartment rect (name / attributes / methods), min width 160px
-  - Top compartment: class name, bold, centered (abstract = *italic*)
-  - Middle: attributes with visibility (`+` public, `-` private, `#` protected)
-  - Bottom: method signatures, same visibility notation
-- **Relationships**:
-  - Inheritance (extends): solid line + hollow triangle arrowhead, child → parent
-  - Implementation (interface): dashed line + hollow triangle, class → interface
-  - Association: solid line + open arrowhead, label with multiplicity (1, 0..*, 1..*)
-  - Aggregation: solid line + hollow diamond on container side
-  - Composition: solid line + filled diamond on container side
-  - Dependency: dashed line + open arrowhead
-- **Interface**: `<<interface>>` stereotype above name, or circle/lollipop notation
-- **Enum**: compartment rect with `<<enumeration>>` stereotype, values in bottom
-- Layout: parent classes top, children below; interfaces to the left/right of implementors
-- ViewBox: `0 0 960 600` standard; `0 0 960 800` for deep hierarchies
-
-## Use Case Diagram (UML)
-System functionality from user perspective.
-- **Actor**: stick figure (circle head + body line) placed outside system boundary
-  - Label below figure, 13-14px
-  - Primary actors on left, secondary/supporting on right
-- **Use case**: ellipse with label centered inside, min 140×60px
-  - Keep names verb phrases: "Create Order", "Process Payment"
-- **System boundary**: large rect with dashed border + system name in top-left
-- **Relationships**:
-  - Include: dashed arrow `<<include>>` from base to included use case
-  - Extend: dashed arrow `<<extend>>` from extension to base use case
-  - Generalization: solid line + hollow triangle (specialized → general)
-- Layout: system boundary centered, actors outside, use cases inside
-- ViewBox: `0 0 960 600` standard
-
-## State Machine Diagram (UML)
-Lifecycle states and transitions of an entity.
-- **State**: rounded rect with state name, min 120×50px
-  - Internal activities: small text `entry/ action`, `exit/ action`, `do/ activity`
-  - **Initial state**: filled black circle (r=8), one outgoing arrow
-  - **Final state**: filled circle (r=8) inside hollow circle (r=12)
-  - **Choice**: small hollow diamond, guard labels on outgoing arrows `[condition]`
-- **Transition**: arrow with optional label `event [guard] / action`
-  - Guard conditions in square brackets
-  - Actions after `/`
-- **Composite/nested state**: larger rect containing sub-states, with name tab
-- **Fork/join**: thick horizontal or vertical black bar (synchronization)
-- Layout: initial state top-left, final state bottom-right, flow top-to-bottom
-- ViewBox: `0 0 960 600` standard
-
-## ER Diagram (Entity-Relationship)
-Database schema and data relationships.
-- **Entity**: rect with entity name in header (bold), attributes below
-  - Primary key attribute: underlined
-  - Foreign key: italic or marked with (FK)
-  - Min width: 160px; attribute font-size: 12px
-- **Relationship**: diamond shape on connecting line
-  - Label inside diamond: "has", "belongs to", "enrolls in"
-  - Cardinality labels near entity: `1`, `N`, `0..1`, `0..*`, `1..*`
-- **Weak entity**: double-bordered rect with double diamond relationship
-- **Associative entity**: diamond + rect hybrid (rect with diamond inside)
-- Line style: solid for identifying relationships, dashed for non-identifying
-- Layout: entities in 2-3 rows, relationships between related entities
-- ViewBox: `0 0 960 600` standard; wider `0 0 1200 600` for many entities
-
-## Network Topology
-Physical or logical network infrastructure.
-- **Devices**: icon-like rects or rounded rects
-  - Router: circle with cross arrows
-  - Switch: rect with arrow grid
-  - Server: stacked rect (rack icon)
-  - Firewall: brick-pattern rect or shield shape
-  - Load Balancer: horizontal split rect with arrows
-  - Cloud: cloud path (overlapping arcs)
-- **Connections**: lines between device centers
-  - Ethernet/wired: solid line, label bandwidth
-  - Wireless: dashed line with WiFi symbol
-  - VPN: dashed line with lock icon
-- **Subnets/Zones**: dashed rect containers with zone label (DMZ, Internal, External)
-- **Labels**: device hostname + IP below, 12-13px
-- Layout: tiered top-to-bottom (Internet → Edge → Core → Access → Endpoints)
-- ViewBox: `0 0 960 600` standard
-
-## UML Coverage Map
-
-Full mapping of UML 14 diagram types to supported diagram types:
-
-| UML Diagram | Supported As | Notes |
-|-------------|-------------|-------|
-| Class | Class Diagram | Full UML notation |
-| Component | Architecture Diagram | Use colored fills per component type |
-| Deployment | Architecture Diagram | Add node/instance labels |
-| Package | Architecture Diagram | Use dashed grouping containers |
-| Composite Structure | Architecture Diagram | Nested rects within components |
-| Object | Class Diagram | Instance boxes with underlined name |
-| Use Case | Use Case Diagram | Full actor/ellipse/relationship |
-| Activity | Flowchart / Process Flow | Add fork/join bars |
-| State Machine | State Machine Diagram | Full UML notation |
-| Sequence | Sequence Diagram | Add alt/opt/loop frames |
-| Communication | — | Approximate with Sequence (swap axes) |
-| Timing | Timeline | Adapt time axis |
-| Interaction Overview | Flowchart | Combine activity + sequence fragments |
-| ER Diagram | ER Diagram | Chen/Crow's foot notation |

package/plugins/tech-graph/skills/tech-graph/references/icons.md

@@ -1,406 +0,0 @@
-# Icon Reference
-
-## Rules for Renderer Compatibility (cairosvg / rsvg-convert)
-
-**Never use** `@import url()` for icon fonts — neither cairosvg nor rsvg-convert fetches external resources.
-**Always use** inline SVG `<path>`, `<circle>`, `<rect>`, `<text>` combinations.
-**Font fallback**: embed font-family in `<style>` using system fonts only.
-
----
-
-## Generic Semantic Shapes (No product — use these first)
-
-### Database / Vector Store (cylinder)
-```xml
-<!-- cx=center-x, top=top-y, w=width, h=height -->
-<!-- Typical: w=80, h=70 -->
-<ellipse cx="cx" cy="top" rx="w/2" ry="w/6" fill="fill" stroke="stroke" stroke-width="1.5"/>
-<rect x="cx-w/2" y="top" width="w" height="h" fill="fill" stroke="none"/>
-<line x1="cx-w/2" y1="top" x2="cx-w/2" y2="top+h" stroke="stroke" stroke-width="1.5"/>
-<line x1="cx+w/2" y1="top" x2="cx+w/2" y2="top+h" stroke="stroke" stroke-width="1.5"/>
-<!-- Optional inner rings for Vector Store -->
-<ellipse cx="cx" cy="top+h*0.33" rx="w/2" ry="w/6" fill="none" stroke="stroke" stroke-width="0.7" opacity="0.5"/>
-<ellipse cx="cx" cy="top+h*0.66" rx="w/2" ry="w/6" fill="none" stroke="stroke" stroke-width="0.7" opacity="0.5"/>
-<ellipse cx="cx" cy="top+h" rx="w/2" ry="w/6" fill="fill-dark" stroke="stroke" stroke-width="1.5"/>
-```
-
-### LLM / Model Node (rounded rect with spark)
-```xml
-<!-- Rounded rect with double border = "intelligent" signal -->
-<rect x="x" y="y" width="w" height="h" rx="10" fill="fill" stroke="stroke-outer" stroke-width="2.5"/>
-<rect x="x+3" y="y+3" width="w-6" height="h-6" rx="8" fill="none" stroke="stroke-inner" stroke-width="0.8" opacity="0.5"/>
-<!-- Spark icon (⚡) as text or small lightning path -->
-<text x="cx" y="cy-6" text-anchor="middle" font-size="14">⚡</text>
-<text x="cx" y="cy+10" text-anchor="middle" fill="text-color" font-size="13" font-weight="600">GPT-4o</text>
-```
-
-### Agent / Orchestrator (hexagon)
-```xml
-<!-- r = circumradius, cx/cy = center -->
-<!-- For r=36: points at 36,0  18,31.2  -18,31.2  -36,0  -18,-31.2  18,-31.2 -->
-<polygon points="cx,cy-r  cx+r*0.866,cy-r*0.5  cx+r*0.866,cy+r*0.5  cx,cy+r  cx-r*0.866,cy+r*0.5  cx-r*0.866,cy-r*0.5"
-         fill="fill" stroke="stroke" stroke-width="1.5"/>
-<text x="cx" y="cy+5" text-anchor="middle" fill="text" font-size="12" font-weight="600">Agent</text>
-```
-
-### Memory Node (short-term, dashed border)
-```xml
-<rect x="x" y="y" width="w" height="h" rx="8"
-      fill="fill" stroke="stroke" stroke-width="1.5" stroke-dasharray="6,3"/>
-<text x="cx" y="cy-6" text-anchor="middle" fill="text" font-size="10" opacity="0.7">MEMORY</text>
-<text x="cx" y="cy+8" text-anchor="middle" fill="text" font-size="13">Short-term</text>
-```
-
-### Tool / Function Call (rect with gear symbol)
-```xml
-<rect x="x" y="y" width="w" height="h" rx="6" fill="fill" stroke="stroke" stroke-width="1.5"/>
-<!-- Gear: simplified as ⚙ unicode or small circle with lines -->
-<text x="cx" y="cy-4" text-anchor="middle" font-size="16">⚙</text>
-<text x="cx" y="cy+12" text-anchor="middle" fill="text" font-size="12">Tool Name</text>
-```
-
-### Queue / Stream (horizontal pipe)
-```xml
-<!-- Pipe tube: left cap ellipse + body + right cap ellipse -->
-<ellipse cx="x1" cy="cy" rx="ry*0.6" ry="ry" fill="fill-dark" stroke="stroke" stroke-width="1.5"/>
-<rect x="x1" y="cy-ry" width="x2-x1" height="ry*2" fill="fill" stroke="none"/>
-<line x1="x1" y1="cy-ry" x2="x2" y2="cy-ry" stroke="stroke" stroke-width="1.5"/>
-<line x1="x1" y1="cy+ry" x2="x2" y2="cy+ry" stroke="stroke" stroke-width="1.5"/>
-<ellipse cx="x2" cy="cy" rx="ry*0.6" ry="ry" fill="fill-light" stroke="stroke" stroke-width="1.5"/>
-```
-
-### User / Human Actor
-```xml
-<!-- Head -->
-<circle cx="cx" cy="cy-18" r="10" fill="fill" stroke="stroke" stroke-width="1.2"/>
-<!-- Body / shoulders -->
-<path d="M cx-14,cy+16 Q cx-14,cy-4 cx,cy-4 Q cx+14,cy-4 cx+14,cy+16"
-      fill="fill" stroke="stroke" stroke-width="1.2"/>
-<text x="cx" y="cy+30" text-anchor="middle" fill="text" font-size="12">User</text>
-```
-
-### API Gateway (hexagon, single border, smaller)
-```xml
-<polygon points="cx,cy-28  cx+24,cy-14  cx+24,cy+14  cx,cy+28  cx-24,cy+14  cx-24,cy-14"
-         fill="fill" stroke="stroke" stroke-width="1.5"/>
-<text x="cx" y="cy+5" text-anchor="middle" fill="text" font-size="11">API</text>
-```
-
-### Browser / Web Client
-```xml
-<rect x="x" y="y" width="w" height="h" rx="6" fill="fill" stroke="stroke" stroke-width="1.5"/>
-<!-- Title bar -->
-<rect x="x" y="y" width="w" height="20" rx="6" fill="fill-dark" stroke="none"/>
-<rect x="x" y="y+14" width="w" height="6" fill="fill-dark"/>
-<!-- Traffic light dots -->
-<circle cx="x+12" cy="y+10" r="4" fill="#ef4444" opacity="0.8"/>
-<circle cx="x+24" cy="y+10" r="4" fill="#f59e0b" opacity="0.8"/>
-<circle cx="x+36" cy="y+10" r="4" fill="#10b981" opacity="0.8"/>
-```
-
-### Document / File
-```xml
-<!-- Folded corner rectangle -->
-<path d="M x,y L x+w-12,y L x+w,y+12 L x+w,y+h L x,y+h Z"
-      fill="fill" stroke="stroke" stroke-width="1.5"/>
-<!-- Fold -->
-<path d="M x+w-12,y L x+w-12,y+12 L x+w,y+12" fill="fill-dark" stroke="stroke" stroke-width="1"/>
-<!-- Lines inside -->
-<line x1="x+8" y1="y+h*0.45" x2="x+w-8" y2="y+h*0.45" stroke="stroke" stroke-width="1" opacity="0.5"/>
-<line x1="x+8" y1="y+h*0.6"  x2="x+w-8" y2="y+h*0.6"  stroke="stroke" stroke-width="1" opacity="0.5"/>
-<line x1="x+8" y1="y+h*0.75" x2="x+w-16" y2="y+h*0.75" stroke="stroke" stroke-width="1" opacity="0.5"/>
-```
-
-### Decision Diamond (flowcharts)
-```xml
-<!-- cx/cy = center, hw = half-width, hh = half-height -->
-<polygon points="cx,cy-hh  cx+hw,cy  cx,cy+hh  cx-hw,cy"
-         fill="fill" stroke="stroke" stroke-width="1.5"/>
-<text x="cx" y="cy+5" text-anchor="middle" fill="text" font-size="12">Condition?</text>
-```
-
-### Swim Lane Container
-```xml
-<!-- Background band for a layer/group -->
-<rect x="x" y="y" width="w" height="h" rx="6"
-      fill="fill" fill-opacity="0.04" stroke="stroke" stroke-width="1" stroke-dasharray="6,4"/>
-<!-- Layer label top-left -->
-<text x="x+12" y="y+16" fill="label-color" font-size="10" font-weight="600" letter-spacing="0.06em">LAYER NAME</text>
-```
-
----
-
-## Product Icons (Brand Colors + Inline SVG)
-
-All use circle badge + text abbreviation pattern. Replace `cx`, `cy` with actual coordinates.
-
-### AI / ML Products
-
-| Product | Color | Badge Text |
-|---------|-------|-----------|
-| OpenAI / ChatGPT | `#10A37F` | `OAI` |
-| Anthropic / Claude | `#D97757` | `Claude` |
-| Google Gemini | `#4285F4` | `Gemini` |
-| Meta LLaMA | `#0467DF` | `LLaMA` |
-| Mistral | `#FF7000` | `Mistral` |
-| Cohere | `#39594D` | `Cohere` |
-| Groq | `#F55036` | `Groq` |
-| Together AI | `#6366F1` | `Together` |
-| Replicate | `#191919` | `Rep` |
-| Hugging Face | `#FFD21E` (text dark) | `HF` |
-
-**Template:**
-```xml
-<circle cx="cx" cy="cy" r="22" fill="BRAND_COLOR"/>
-<text x="cx" y="cy+5" text-anchor="middle" fill="white"
-      font-size="10" font-weight="700" font-family="Helvetica">BADGE_TEXT</text>
-<!-- Optional: outer ring for "AI" products -->
-<circle cx="cx" cy="cy" r="24" fill="none" stroke="BRAND_COLOR" stroke-width="1" opacity="0.4"/>
-```
-
-### AI Memory & RAG Products
-
-| Product | Color | Badge |
-|---------|-------|-------|
-| Mem0 | `#6366F1` | `mem0` |
-| LangChain | `#1C3C3C` | `🦜` or `LC` |
-| LlamaIndex | `#8B5CF6` | `LI` |
-| LangGraph | `#1C3C3C` | `LG` |
-| CrewAI | `#EF4444` | `Crew` |
-| AutoGen | `#0078D4` | `AG` |
-| Haystack | `#FF6D00` | `🌾` or `HS` |
-| DSPy | `#7C3AED` | `DSPy` |
-
-### Vector Databases
-
-| Product | Color | Badge |
-|---------|-------|-------|
-| Pinecone | `#1C1C2E` + green | `Pine` |
-| Weaviate | `#FA0050` | `Wea` |
-| Qdrant | `#DC244C` | `Qdrant` |
-| Chroma | `#FF6B35` | `Chr` |
-| Milvus | `#00A1EA` | `Milvus` |
-| pgvector | `#336791` | `pgv` |
-| Faiss | `#0467DF` | `FAISS` |
-
-**Vector DB template (cylinder + badge):**
-```xml
-<!-- Cylinder shape -->
-<ellipse cx="cx" cy="top" rx="40" ry="12" fill="FILL" stroke="STROKE" stroke-width="1.5"/>
-<rect x="cx-40" y="top" width="80" height="50" fill="FILL" stroke="none"/>
-<line x1="cx-40" y1="top" x2="cx-40" y2="top+50" stroke="STROKE" stroke-width="1.5"/>
-<line x1="cx+40" y1="top" x2="cx+40" y2="top+50" stroke="STROKE" stroke-width="1.5"/>
-<ellipse cx="cx" cy="top+50" rx="40" ry="12" fill="FILL_DARK" stroke="STROKE" stroke-width="1.5"/>
-<!-- Product name -->
-<text x="cx" y="top+30" text-anchor="middle" fill="white"
-      font-size="11" font-weight="700">Pinecone</text>
-```
-
-### Classic Databases & Storage
-
-| Product | Color |
-|---------|-------|
-| PostgreSQL | `#336791` |
-| MySQL | `#4479A1` |
-| MongoDB | `#47A248` |
-| Redis | `#DC382D` |
-| Elasticsearch | `#005571` |
-| Cassandra | `#1287B1` |
-| Neo4j | `#008CC1` |
-| SQLite | `#003B57` |
-
-### Message Queues & Streaming
-
-| Product | Color |
-|---------|-------|
-| Apache Kafka | `#231F20` |
-| RabbitMQ | `#FF6600` |
-| AWS SQS | `#FF9900` |
-| NATS | `#27AAE1` |
-| Pulsar | `#188FFF` |
-
-### Cloud & Infra
-
-| Product | Color |
-|---------|-------|
-| AWS | `#FF9900` |
-| GCP | `#4285F4` |
-| Azure | `#0089D6` |
-| Cloudflare | `#F48120` |
-| Vercel | `#000000` |
-| Docker | `#2496ED` |
-| Kubernetes | `#326CE5` |
-| Terraform | `#7B42BC` |
-| Nginx | `#009639` |
-| FastAPI | `#009688` |
-
-### Observability
-
-| Product | Color |
-|---------|-------|
-| Grafana | `#F46800` |
-| Prometheus | `#E6522C` |
-| Datadog | `#632CA6` |
-| LangSmith | `#1C3C3C` |
-| Langfuse | `#6366F1` |
-| Arize | `#6B48FF` |
-
----
-
-## Azure Service Icons
-
-Azure brand colour: `#0089D6` (top tile / outer ring).
-Service-specific accents come from Microsoft's Azure icon set; use them
-as the inner badge fill so a glance still tells you "this is Azure".
-
-**Template (Azure tile):**
-```xml
-<!-- Azure tile: outer rounded square in Azure blue, inner badge for the service. -->
-<rect x="cx-22" y="cy-22" width="44" height="44" rx="6"
-      fill="#0089D6" stroke="none"/>
-<rect x="cx-19" y="cy-19" width="38" height="38" rx="4"
-      fill="SERVICE_COLOR" stroke="none"/>
-<text x="cx" y="cy+5" text-anchor="middle" fill="white"
-      font-size="9" font-weight="700" font-family="Helvetica">BADGE</text>
-```
-
-### Azure Compute
-
-| Product | Service Color | Badge |
-|---------|---------------|-------|
-| Azure Functions | `#0062AD` | `Func` |
-| Azure App Service | `#0072C6` | `App` |
-| Azure Container Apps | `#3F8624` | `ACA` |
-| Azure Container Instances | `#0078D4` | `ACI` |
-| Azure Kubernetes Service (AKS) | `#326CE5` | `AKS` |
-| Azure Virtual Machines | `#0078D4` | `VM` |
-| Azure Batch | `#0072C6` | `Batch` |
-| Azure Spring Apps | `#6DB33F` | `Spring` |
-
-### Azure Data & Analytics
-
-| Product | Service Color | Badge |
-|---------|---------------|-------|
-| Azure SQL Database | `#0066A1` | `SQL` |
-| Azure Cosmos DB | `#3D7AB3` | `Cosmos` |
-| Azure Database for PostgreSQL | `#336791` | `pg` |
-| Azure Database for MySQL | `#4479A1` | `MySQL` |
-| Azure Synapse Analytics | `#0078D4` | `Syn` |
-| Azure Data Factory | `#0078D4` | `ADF` |
-| Azure Databricks | `#FF3621` | `Bricks` |
-| Azure Stream Analytics | `#0072C6` | `Stream` |
-| Azure Data Explorer (Kusto) | `#1E5180` | `Kusto` |
-| Azure Cache for Redis | `#DC382D` | `Redis` |
-
-### Azure Storage
-
-| Product | Service Color | Badge |
-|---------|---------------|-------|
-| Azure Blob Storage | `#0078D4` | `Blob` |
-| Azure Queue Storage | `#0078D4` | `Queue` |
-| Azure Table Storage | `#0078D4` | `Table` |
-| Azure Files | `#0078D4` | `Files` |
-| Azure Data Lake Storage Gen2 | `#0078D4` | `Lake` |
-
-### Azure AI
-
-| Product | Service Color | Badge |
-|---------|---------------|-------|
-| Azure OpenAI Service | `#10A37F` | `AOAI` |
-| Azure AI Search (Cognitive Search) | `#0078D4` | `AISrch` |
-| Azure AI Foundry | `#742774` | `Foundry` |
-| Azure Machine Learning | `#0078D4` | `AML` |
-| Azure AI Content Safety | `#107C10` | `Safety` |
-| Azure Speech / Translator | `#0078D4` | `Speech` |
-
-### Azure Messaging & Eventing
-
-| Product | Service Color | Badge |
-|---------|---------------|-------|
-| Azure Service Bus | `#0078D4` | `SB` |
-| Azure Event Grid | `#0078D4` | `Grid` |
-| Azure Event Hubs | `#0078D4` | `Hubs` |
-| Azure Notification Hubs | `#0078D4` | `Notif` |
-| Azure SignalR Service | `#0078D4` | `SignalR` |
-
-### Azure Networking & Edge
-
-| Product | Service Color | Badge |
-|---------|---------------|-------|
-| Azure Front Door | `#0078D4` | `AFD` |
-| Azure Application Gateway | `#0078D4` | `AppGW` |
-| Azure Load Balancer | `#0078D4` | `LB` |
-| Azure API Management | `#1FBA9F` | `APIM` |
-| Azure Virtual Network | `#0078D4` | `VNet` |
-| Azure Private Link | `#0078D4` | `PL` |
-| Azure CDN | `#0078D4` | `CDN` |
-| Azure DNS | `#0078D4` | `DNS` |
-
-### Azure Identity & Security
-
-| Product | Service Color | Badge |
-|---------|---------------|-------|
-| Microsoft Entra ID (Azure AD) | `#0072C6` | `Entra` |
-| Azure Key Vault | `#FFB900` | `KV` |
-| Azure Sentinel | `#0072C6` | `Sentinel` |
-| Microsoft Defender for Cloud | `#0078D4` | `Defender` |
-
-### Azure DevOps & Operations
-
-| Product | Service Color | Badge |
-|---------|---------------|-------|
-| Azure DevOps Pipelines | `#0078D4` | `Pipelines` |
-| GitHub Actions (Azure target) | `#181717` | `GHA` |
-| Azure Monitor | `#0078D4` | `Monitor` |
-| Application Insights | `#0072C6` | `AppI` |
-| Azure Log Analytics | `#0078D4` | `Logs` |
-
-### Azure-specific shapes
-
-For diagrams that need a recognisable "Azure" visual without a service
-badge — e.g. a region container or a subscription boundary — use a
-dashed Azure-blue outline:
-
-```xml
-<!-- Azure region/subscription container -->
-<rect x="x" y="y" width="w" height="h" rx="8"
-      fill="#0089D6" fill-opacity="0.04"
-      stroke="#0089D6" stroke-width="1.2" stroke-dasharray="6,4"/>
-<text x="x+12" y="y+16" fill="#0089D6" font-size="10"
-      font-weight="700" letter-spacing="0.06em">AZURE • REGION NAME</text>
-```
-
----
-
-## Icon Sizing Guide
-
-| Context | Recommended Size | Padding |
-|---------|-----------------|---------|
-| Node badge (inside box) | 28×28px circle | 10px |
-| Standalone icon node | 40×40px | 16px |
-| Hero / central node | 56×56px | 20px |
-| Small inline indicator | 16×16px | 6px |
-
-## Arrow Marker Templates
-
-```xml
-<defs>
-  <!-- Standard filled arrow -->
-  <marker id="arrow-COLORNAME" markerWidth="10" markerHeight="7"
-          refX="9" refY="3.5" orient="auto">
-    <polygon points="0 0, 10 3.5, 0 7" fill="COLOR"/>
-  </marker>
-
-  <!-- Open arrow (outline only) -->
-  <marker id="arrow-open" markerWidth="10" markerHeight="8"
-          refX="9" refY="4" orient="auto">
-    <path d="M 0 0 L 10 4 L 0 8" fill="none" stroke="COLOR" stroke-width="1.5"/>
-  </marker>
-
-  <!-- Circle dot (for association lines) -->
-  <marker id="dot" markerWidth="8" markerHeight="8"
-          refX="4" refY="4" orient="auto">
-    <circle cx="4" cy="4" r="3" fill="COLOR"/>
-  </marker>
-</defs>
-```