aws-diagram-mcp-serverで生成した構成図を編集可能なdraw.ioやPowerPointに変換してみた

{
  "name": "Three-Tier Web Architecture",
  "groups": [
    {
      "id": "g_aws", "label": "AWS Cloud",
      "x": 180, "y": 10, "width": 1100, "height": 640,
      "children": ["g_presentation", "g_application", "g_data"],
      "style": "strokeColor=#232F3E;fillColor=none;"
    },
    {
      "id": "g_application", "label": "Application Tier",
      "x": 30, "y": 60, "width": 500, "height": 330,
      "children": ["n_alb", "g_asg"],
      "style": "strokeColor=#ED7100;fillColor=none;"
    }
    // ... 他グループ省略
  ],
  "nodes": [
    {
      "id": "n_alb", "label": "ALB\nLoad Balancer",
      "x": 60, "y": 110, "width": 48, "height": 48,
      "icon": "elb",
      "style": "...shape=mxgraph.aws4.application_load_balancer;"
    }
    // ... 他ノード省略
  ],
  "edges": [
    {"id": "e1", "from": "n_users", "to": "n_route53", "label": "HTTPS", "style": "strokeColor=#232F3E;"},
    {"id": "e5", "from": "n_alb", "to": "n_app1", "label": "HTTP", "style": "strokeColor=#ED7100;"}
    // ... 他エッジ省略
  ]
}

from drawio_builder import Diagram

def json_to_drawio(json_path: str, output_path: str | None = None) -> Path:
    """JSON定義ファイルからdrawioファイルを生成する"""
    data = json.loads(Path(json_path).read_text(encoding="utf-8"))
    diagram = Diagram(name=data.get("name", "diagram"))

    # グループ追加
    for g in data.get("groups", []):
        diagram.add_group(
            group_id=g["id"], label=g["label"],
            x=g.get("x", 0), y=g.get("y", 0),
            width=g.get("width", 300), height=g.get("height", 200),
            children=g.get("children", []), style=g.get("style", ""),
        )

    # ノード追加
    for n in data.get("nodes", []):
        diagram.add_node(
            node_id=n["id"], label=n["label"],
            x=n.get("x", 0), y=n.get("y", 0),
            width=n.get("width", 120), height=n.get("height", 60),
            shape_type=n.get("shape", "rectangle"), style=n.get("style", ""),
        )

    # エッジ追加
    for e in data.get("edges", []):
        diagram.add_edge(
            edge_id=e["id"], source_id=e["from"], target_id=e["to"],
            label=e.get("label", ""), style=e.get("style", ""),
        )

    return diagram.save(str(output_path))

from pptx import Presentation
from pptx.util import Inches, Pt
from pptx.enum.shapes import MSO_SHAPE, MSO_CONNECTOR_TYPE

# AWSアイコンのローカルパス（事前ダウンロードが必要）
AWS_ICON_BASE = Path("<AWS公式アイコンの格納先>")

# サービス名 → アイコンファイルパスのマッピング
ICON_MAP = {
    "lambda": ("Arch_Compute", "Arch_AWS-Lambda_64.png"),
    "ec2": ("Arch_Compute", "Arch_Amazon-EC2_64.png"),
    "rds": ("Arch_Database", "Arch_Amazon-RDS_64.png"),
    # ... 約30サービス対応
}

def build_pptx_from_json(json_path: str, output_path: str | None = None) -> Path:
    """JSON定義からAWS公式アイコン付きPowerPointを生成する"""
    data = json.loads(Path(json_path).read_text(encoding="utf-8"))
    prs = Presentation()
    slide = prs.slides.add_slide(prs.slide_layouts[6])

    # グループ描画（AWSカラーの角丸矩形）
    for g in data.get("groups", []):
        shape = slide.shapes.add_shape(MSO_SHAPE.ROUNDED_RECTANGLE, ...)
        # グループラベルからAWSカラーを自動推定
        fill_color, border_color = _detect_group_color(g)

    # ノード描画（AWS公式アイコン + ラベル）
    for n in data.get("nodes", []):
        icon_path = _resolve_icon_path(n.get("icon", ""))
        if icon_path:
            slide.shapes.add_picture(str(icon_path), left, top, icon_size, icon_size)
        # ラベルテキストボックス（アイコン下部）
        lbl = slide.shapes.add_textbox(label_left, label_top, label_w, label_h)

    # エッジ描画（エルボーコネクタ + 透明アンカー）
    for e in data.get("edges", []):
        connector = slide.shapes.add_connector(
            MSO_CONNECTOR_TYPE.ELBOW, ...)
        connector.begin_connect(src_anchor, 0)
        connector.end_connect(tgt_anchor, 0)

import subprocess

def _run_gws(args: list[str], json_body: dict | None = None) -> dict:
    """GWS CLIを実行する"""
    cmd = ["gws"] + args
    if json_body:
        cmd += ["--json", json.dumps(json_body)]
    result = subprocess.run(cmd, capture_output=True, text=True, timeout=30)
    if result.returncode != 0:
        raise RuntimeError(f"gws error: {result.stderr}")
    return json.loads(result.stdout) if result.stdout.strip() else {}

def build_slides_from_json(json_path: str) -> str:
    """JSON定義からGoogle Slidesに構成図を生成する"""
    # プレゼンテーション作成
    pres = _run_gws(["slides", "presentations", "create"],
                     json_body={"title": pres_title})

    # ノード配置（AWSカラーシェイプ + サービス名）
    # 組織ポリシーでpublishOutが禁止のため、Slides APIのcreateImageは
    # 公開URLが必要だが使用できない。AWSカラーシェイプで構成する。
    for n in data.get("nodes", []):
        requests.append({"createShape": {
            "shapeType": "ROUND_RECTANGLE", ...}})

    # バッチ更新で一括配置
    _run_gws(["slides", "presentations", "batchUpdate", ...],
             json_body={"requests": requests})

# Diagram Converter プロジェクト

## 概要
構成図のJSON定義から、編集可能なオブジェクト + AWS公式アイコンで
PowerPoint / draw.io / Google Slides に構成図を生成するツール群。
画像貼り付けは禁止。全て個別に編集・移動可能なオブジェクトとして構成する。

## 技術スタック
- Python 3.12
- python-pptx: 編集可能なPowerPointシェイプ + AWS公式アイコン画像配置
- Pillow: 画像処理
- xml.etree: draw.io XML生成
- GWS CLI (gws): Google Slides API操作

## 変換フロー（Claude Code経由）
1. MCPでPNG構成図を生成、または既存PNGを Read で読み取る
2. 画像内の構造（ノード、接続、グループ）を分析する
3. JSON定義ファイルを input/ に生成する
4. JSON定義から 3形式のいずれかに変換する

## JSON定義フォーマット
（ノード、エッジ、グループの定義）

## iconキー一覧
lambda, ec2, fargate, ecs, eks, api_gateway, cloudfront, route53,
elb, vpc, dynamodb, rds, aurora, elasticache, s3, sqs, sns,
eventbridge, step_functions, cognito, iam, waf, kms, bedrock ...

## draw.io用shape
rectangle, cylinder, cloud, diamond, ellipse, hexagon, document,
process, parallelogram, actor

## 規約
- 画像貼り付け禁止。必ず編集可能なオブジェクト + 公式アイコンで生成すること