{"id":49691223,"url":"https://github.com/tomohiro-owada/aws-flow","last_synced_at":"2026-05-07T16:01:58.633Z","repository":{"id":324316807,"uuid":"1096825417","full_name":"tomohiro-owada/aws-flow","owner":"tomohiro-owada","description":"Generate interactive AWS architecture diagrams from Mermaid or text descriptions. Features drag \u0026 drop, zoom/pan sync, group resizing, and SVG download. Built with JointJS.","archived":false,"fork":false,"pushed_at":"2025-11-15T02:45:11.000Z","size":64,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-05T18:24:10.767Z","etag":null,"topics":["architecture","aws","claude-code","diagram","interactive","jointjs","mermaid","skill","visualization"],"latest_commit_sha":null,"homepage":"https://github.com/tomohiro-owada/aws-flow","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomohiro-owada.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-15T02:36:14.000Z","updated_at":"2025-11-15T02:45:31.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/tomohiro-owada/aws-flow","commit_stats":null,"previous_names":["tomohiro-owada/aws-flow"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tomohiro-owada/aws-flow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomohiro-owada%2Faws-flow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomohiro-owada%2Faws-flow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomohiro-owada%2Faws-flow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomohiro-owada%2Faws-flow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomohiro-owada","download_url":"https://codeload.github.com/tomohiro-owada/aws-flow/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomohiro-owada%2Faws-flow/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32745138,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["architecture","aws","claude-code","diagram","interactive","jointjs","mermaid","skill","visualization"],"created_at":"2026-05-07T16:01:57.625Z","updated_at":"2026-05-07T16:01:58.621Z","avatar_url":"https://github.com/tomohiro-owada.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AWS Architecture Diagram Skill\n\n**Languages:** [English](README.md) | [日本語](README_ja.md)\n\n---\n\nA skill that generates AWS Architecture Diagrams (interactive HTML diagrams) from Mermaid diagrams or text descriptions.\n\n\u003cimg width=\"1183\" height=\"840\" alt=\"Screenshot 2025-11-15 10:28:57 AM\" src=\"https://github.com/user-attachments/assets/89160cfc-e037-41c9-b03e-032741531ab3\" /\u003e\n\n\n## 🚀 Quick Start\n\n### Step 1: AWS Icons Setup\n\nBefore using this skill, you need to download and organize the AWS architecture icons published by AWS.\n\n**Download AWS Architecture Icons:**\n\n1. Visit AWS official site: [AWS Architecture Icons](http://aws.amazon.com/architecture/icons/)\n2. Download \"Architecture icons\" and \"Architecture group icons\"\n3. Extract the downloaded files to the following directory:\n\n`.claude/skills/aws-architecture-diagram/assets`\n- Architecture-Group-Icons\n- Architecture-Service-Icons\n- Category-Icons\n- Resource-Icons\n\n**Example File Structure:**\n\nEach category folder (e.g., `Arch_Compute`) contains 48px SVG files with the following structure:\n\n```\nArch_Compute/48/\n├── Arch_Amazon-EC2_48.svg\n├── Arch_Amazon-EC2-Auto-Scaling_48.svg\n├── Arch_Amazon-Elastic-Container-Service_48.svg\n├── Arch_AWS-Lambda_48.svg\n└── ... (other services)\n```\n\n### Step 2: Using the Skill\n\nActivate the skill and define your architecture using Mermaid or text descriptions.\n\n**Example:**\n```mermaid\nflowchart LR\n  User[User] --\u003e ELB[ELB]\n  ELB --\u003e EC2[EC2]\n  EC2 --\u003e RDS[RDS]\n  RDS -.-\u003e S3[S3]\n```\n\n## 📋 Implementation Details\n\n### 1. Icon Embedding Method\n\n**Legacy Method (❌ DEPRECATED):**\n- Base64-encoded data URIs\n- Increased file size\n- Visual quality loss\n\n**Current Method (✅ ADOPTED):**\n- SVG content embedded directly in HTML\n- Full visual fidelity\n- Scalable\n\n**Implementation Example:**\n```javascript\nconst AWS_ICONS = {\n  'EC2': '\u003csvg width=\"48\" height=\"48\" viewBox=\"0 0 64 64\" xmlns=\"...\"\u003e...\u003c/svg\u003e',\n  'RDS': '\u003csvg width=\"48\" height=\"48\" viewBox=\"0 0 64 64\" xmlns=\"...\"\u003e...\u003c/svg\u003e',\n  'S3': '\u003csvg width=\"48\" height=\"48\" viewBox=\"0 0 64 64\" xmlns=\"...\"\u003e...\u003c/svg\u003e'\n};\n\n// Icon registration\niconRegistry[componentId] = {\n  svg: AWS_ICONS['EC2'],\n  x: posX - 8,  // Top-left placement (offset: -8)\n  y: posY - 8,\n  name: 'EC2'\n};\n```\n\n### 2. Icon Position Adjustment\n\n**Requirements:**\n- Icons positioned at top-left, slightly overlapping the component border\n- Scale: 2/3 size (48px → ~32px)\n- Offset: `x - 8, y - 8`\n\n**Why this offset value?**\n- 48px icon scaled to 2/3 = ~32px display size\n- 16px overhang (50% overlap with border)\n- 8px offset = half of 16px overhang\n\n### 3. Drag \u0026 Drop Functionality\n\n**Implementation:**\n```javascript\n// Listener for component position changes\ngraph.on('change:position', function(cell) {\n  if (cell.id in iconRegistry) {\n    const newPos = cell.position();\n    const iconElement = iconContainer.querySelector(`[data-icon=\"${cell.id}\"]`);\n    if (iconElement) {\n      // Maintain icon's relative position during drag\n      iconElement.setAttribute('transform',\n        `translate(${newPos.x - 8}, ${newPos.y - 8}) scale(0.667)`);\n    }\n  }\n});\n```\n\n**Offset Value Consistency is Critical:**\n- Registration offset: `x - 8, y - 8`\n- Drag update offset: `newPos.x - 8, newPos.y - 8`\n- **If offsets differ, icons will drift away during dragging** (critical bug)\n\n### 4. Zoom \u0026 Pan Synchronization\n\n**Problem:**\n- Icons appear fixed during zoom/pan operations\n\n**Solution:**\n```javascript\n// Transform update function for icon container\nfunction updateIconsTransform() {\n  const iconContainer = paper.svg.querySelector('[data-icons-container]');\n  if (!iconContainer) return;\n\n  const scale = paper.scale();\n  const translate = paper.translate();\n\n  // Reflect current Paper zoom/pan state\n  const transform = `translate(${translate.tx}, ${translate.ty}) scale(${scale.sx}, ${scale.sy})`;\n  iconContainer.setAttribute('transform', transform);\n}\n\n// Execute on zoom/pan events\npaper.on('scale', updateIconsTransform);\npaper.on('translate', updateIconsTransform);\n```\n\n### 5. Group Container Resizing\n\n**Implementation:**\n```javascript\n// Track group IDs\nconst groupIds = [];\n\n// When creating a group\nconst awsCloud = createGroup('aws-cloud', 'AWS Cloud', 50, 50, 1400, 900);\nelements.push(awsCloud);\ngroupIds.push(awsCloud.id);  // Register ID\n\n// Set up resize handler\npaper.svg.addEventListener('mousedown', function(evt) {\n  // Detect 30x30px resize handle at bottom-right corner\n  for (let i = 0; i \u003c groupIds.length; i++) {\n    const groupCell = graph.getCell(groupIds[i]);\n    const pos = groupCell.position();\n    const size = groupCell.size();\n\n    // Coordinate transformation (zoom/pan aware)\n    const scale = paper.scale().sx;\n    const translate = paper.translate();\n    const canvasX = (evt.clientX - svgBBox.left - translate.tx) / scale;\n    const canvasY = (evt.clientY - svgBBox.top - translate.ty) / scale;\n\n    // Check if in resize handle\n    const handleSize = 30;\n    if (canvasX \u003e= pos.x + size.width - handleSize \u0026\u0026\n        canvasY \u003e= pos.y + size.height - handleSize) {\n      // Start resizing\n      isResizing = true;\n      resizingGroup = groupCell;\n    }\n  }\n}, true);\n```\n\n**Cursor Feedback:**\n```javascript\n// Change cursor when on resize handle\npaper.svg.addEventListener('mousemove', function(evt) {\n  for (let i = 0; i \u003c groupIds.length; i++) {\n    const groupCell = graph.getCell(groupIds[i]);\n    // ... coordinate calculation ...\n\n    if (isInHandle) {\n      paper.svg.style.cursor = 'nwse-resize';  // ↙↗\n    } else if (isInGroup) {\n      paper.svg.style.cursor = 'grab';\n    }\n  }\n});\n```\n\n## 🔧 Troubleshooting\n\n### Icons Drift Away During Dragging\n\n**Cause:** Offset values differ between registration and drag update\n\n**Solution:**\n```javascript\n// ❌ Incorrect\niconRegistry[id] = { x: posX + 8, y: posY + 8, ... };\n// During drag\niconElement.setAttribute('transform', `translate(${newPos.x - 8}, ...)`);\n\n// ✅ Correct\niconRegistry[id] = { x: posX - 8, y: posY - 8, ... };\n// During drag\niconElement.setAttribute('transform', `translate(${newPos.x - 8}, ...)`);\n```\n\n### Icons Not Displaying\n\n**Cause:** `addIconsToPaper()` executed before icon container is found\n\n**Solution:**\n```javascript\n// Delayed execution to wait for Paper rendering\nsetTimeout(() =\u003e {\n  addIconsToPaper();\n  updateIconsTransform();\n}, 100);\n```\n\n### Icons Fixed During Zoom/Pan\n\n**Cause:** `updateIconsTransform()` not being executed\n\n**Solution:**\n```javascript\n// Verify event listeners are registered\npaper.on('scale', updateIconsTransform);\npaper.on('translate', updateIconsTransform);\n```\n\n## 📊 Architecture Specifications\n\n### Component Placement Offset\n\n| Element | Registration | Drag Update | Description |\n|---------|--------------|-------------|-------------|\n| Icon | `x - 8, y - 8` | `newPos.x - 8, newPos.y - 8` | Top-left, overlaps border |\n| Icon Scale | 0.667 (2/3) | 0.667 (2/3) | 48px → 32px |\n| Group Handle | - | 30x30px | Bottom-right resize area |\n\n### AWS Service Categories and Colors\n\n| Category | HEX Color | RGB |\n|----------|-----------|-----|\n| Compute | #ED7100 | Smile (Orange) |\n| Database | #E7157B | Cosmos (Pink) |\n| Analytics | #01A88D | Orbit (Teal) |\n| Storage | #7AA116 | Endor (Green) |\n| Security | #DD344C | Mars (Red) |\n| Integration | #C925D1 | Nebula (Purple) |\n| Management | #8C4FFF | Galaxy (Purple-Blue) |\n| Networking | #8C4FFF | Galaxy (Purple-Blue) |\n| External | #232F3E | Squid (Navy) |\n\n## 📚 File Structure\n\n```\n.claude/skills/aws-architecture-diagram/\n├── README.md                           # Japanese documentation\n├── SKILL.md                            # Skill details\n├── REFERENCE.md                        # Technical reference\n│\n├── templates/\n│   └── diagram-template.html          # JointJS base template\n│\n├── assets/\n│   ├── Architecture-Service-Icons_02072025/    # AWS service icons\n│   │   ├── Arch_Analytics/\n│   │   ├── Arch_Compute/\n│   │   ├── Arch_Database/\n│   │   └── ... (see setup section for details)\n│   │\n│   └── Architecture-Group-Icons_02072025/      # AWS group icons\n│       ├── AWS-Cloud/\n│       ├── Region/\n│       └── ... (see setup section for details)\n│\n└── (generated diagram HTML files)\n```\n\n## 🎯 Skill Execution Flow\n\n1. **Input Reception** → Mermaid / text description\n2. **Parsing** → Identify AWS services, groups, and connections\n3. **Layout Design** → Position components based on categories\n4. **HTML Generation** → Generate JointJS-based HTML using template\n   - Icon registration (`iconRegistry`)\n   - Group creation (register in `groupIds`)\n   - Connection lines (arrows) creation\n   - Event handler setup\n5. **File Output** → `aws-architecture-[date].html`\n\n## 🔍 Debug Mode\n\nIn the generated HTML file, open browser developer tools (F12) and check the console:\n\n```javascript\n// Icon registry state\nconsole.log('Icon Registry:', iconRegistry);\n\n// Group registry state\nconsole.log('Group IDs:', groupIds);\n\n// Drag operation log\nconsole.log('Updating icon position:', cellId, newPos.x, newPos.y);\n```\n\n## 🚀 Implemented Features List\n\n- ✅ Icon embedding (direct SVG)\n- ✅ Drag \u0026 drop (full coordinate following)\n- ✅ Zoom/pan synchronization\n- ✅ Group container resizing\n- ✅ Cursor feedback (grab / nwse-resize)\n- ✅ Icon position adjustment (top-left, border overlap)\n- ✅ Icon scaling (2/3 size)\n- ✅ L-shaped arrows (orthogonal routing)\n- ✅ Grid background\n- ✅ Responsive design\n- ✅ Keyboard shortcuts (Ctrl + +/−/0)\n- ✅ SVG download functionality\n\n## 📝 Change History\n\n### 2025-11-15\n\n**Added:**\n- Group container resizing functionality\n- Icon top-left positioning (`x - 8, y - 8`)\n- Icon full coordinate following during drag\n- Icon synchronization during zoom/pan\n\n**Fixed:**\n- Icon offset value unification (registration and update match)\n- Icon drift bug during dragging\n\n**Documentation Updates:**\n- Added new features to SKILL.md\n- Added icon mapping table to REFERENCE.md\n- Added implementation guide to template\n\n## 🤝 Contribution Guide\n\nWhen extending this skill, note the following:\n\n1. **Icon Offset Value Unification**\n   - Registration: `x - 8, y - 8`\n   - Drag update: `newPos.x - 8, newPos.y - 8`\n   - Zoom/pan: `paper.on('scale/translate')`\n\n2. **Group ID Registration**\n   - Always register new groups with `groupIds.push(groupId)`\n\n3. **Icon Lookup Algorithm**\n   - Refer to \"Icon Lookup Algorithm\" in REFERENCE.md\n   - Pay attention to service name to filename mapping\n\n## 📖 References\n\n- [AWS Architecture Icons](http://aws.amazon.com/architecture/icons/)\n- [JointJS v3 Documentation](https://docs.jointjs.com/)\n- [JointJS API Reference](https://docs.jointjs.com/api/dia/Graph)\n- [Tailwind CSS](https://tailwindcss.com/)\n\n---\n\n**Last Updated:** 2025-11-15\n**Template Version:** 1.0\n**Skill Status:** ✅ Production Ready\n\n## 📖 Detailed Documentation\n\nFor more detailed information about the skill's implementation, please refer to:\n- `.claude/skills/aws-architecture-diagram/README_en.md` - English skill documentation\n- `.claude/skills/aws-architecture-diagram/SKILL.md` - Feature details\n- `.claude/skills/aws-architecture-diagram/REFERENCE.md` - Technical reference\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomohiro-owada%2Faws-flow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomohiro-owada%2Faws-flow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomohiro-owada%2Faws-flow/lists"}