{
  "schema": "tesign-radar/item/1",
  "generated_at": "2026-09-17T01:56:13.055Z",
  "lang": "ko",
  "slug": "diagram-design",
  "url": "https://tesign.com/item/diagram-design/",
  "alternates": {
    "ko": {
      "html": "https://tesign.com/item/diagram-design/",
      "json": "https://tesign.com/item/diagram-design/index.json",
      "markdown": "https://tesign.com/item/diagram-design/index.md"
    },
    "en": {
      "html": "https://tesign.com/en/item/diagram-design/",
      "json": "https://tesign.com/en/item/diagram-design/index.json",
      "markdown": "https://tesign.com/en/item/diagram-design/index.md"
    }
  },
  "name": "diagram-design",
  "use_label": "에이전트로 그리는 편집 도식",
  "one_liner": "편집 디자인 관점의 도형 38종을 HTML·SVG로 만들어 줍니다.",
  "text": {
    "why": "에이전트에 도식을 맡기면 대개 어디서 본 듯한 기본 다이어그램이 돌아옵니다. diagram-design은 편집 디자인 관점에서 정리한 38가지 도형 종류를 스킬로 묶어 Claude Code·Codex·Pi에서 골라 쓰게 합니다. 결과는 의존성 없는 HTML과 SVG라 문서에 그대로 넣을 수 있습니다. MIT 라이선스로 공개돼 있습니다.",
    "take": "에이전트 도식이 늘 비슷해지는 문제를 '유형 39종 + 편집 디자인 규칙'으로 푼 점이 실용적입니다.",
    "build": [
      "보고서에 그대로 넣는 도식 세트",
      "제품 문서에 쓰는 다이어그램 스타일 기준",
      "발표 자료에 붙일 SVG 도형 묶음"
    ],
    "who": [
      {
        "role": "기획자",
        "situation": "보고서·제안서에 넣을 도식이 필요할 때"
      },
      {
        "role": "기술 문서 담당자",
        "situation": "제품 문서의 도식 스타일을 통일할 때"
      },
      {
        "role": "마케터",
        "situation": "발표 자료용 SVG 도형이 필요할 때"
      }
    ],
    "start": [
      {
        "command": false,
        "text": "Claude Code 프롬프트에서:"
      },
      {
        "command": false,
        "text": "/plugin marketplace add cathrynlavery/diagram-design"
      },
      {
        "command": false,
        "text": "/plugin install diagram-design@diagram-design"
      },
      {
        "command": false,
        "text": "Codex:"
      },
      {
        "command": true,
        "text": "codex plugin marketplace add cathrynlavery/diagram-design"
      },
      {
        "command": true,
        "text": "codex plugin add diagram-design@diagram-design"
      }
    ],
    "caveat": [
      "Claude Code는 서드파티 마켓플레이스 자동 업데이트가 기본 꺼져 있습니다",
      "Figma 같은 편집기가 아니라 에이전트에 요청해 생성하는 방식입니다"
    ]
  },
  "cta": {
    "type": "use_package",
    "label": "USE PACKAGE",
    "url": "https://cathrynlavery.github.io/diagram-design"
  },
  "ready": "developer",
  "categories": [
    "design",
    "dev-tools"
  ],
  "categories_confirmed": true,
  "tags": [
    "diagrams",
    "agent-skills",
    "svg"
  ],
  "platform": [],
  "license": {
    "spdx": "MIT",
    "scope": "permissive",
    "scope_text": "상업 이용·수정·재배포 가능. 저작권 고지는 유지.",
    "url": "https://spdx.org/licenses/MIT.html",
    "note": null,
    "open_source": true
  },
  "language": "HTML",
  "source_urls": {
    "canonical": "https://cathrynlavery.github.io/diagram-design",
    "github": "https://github.com/cathrynlavery/diagram-design",
    "huggingface": null,
    "app_store": null,
    "sightings": [
      {
        "source": "github",
        "url": "https://github.com/cathrynlavery/diagram-design",
        "posted_at": "2026-09-12T22:00:00.000Z",
        "hn_url": null
      }
    ]
  },
  "numbers": {
    "as_of": "2026-09-16T21:00:00.000Z",
    "stars": 40194,
    "stars_unit": "GitHub stars",
    "stars_checked_at": "2026-09-15T19:33:55.630Z",
    "stars_observed_since_check": 31,
    "star_delta_24h": 29,
    "star_delta_7d": 548,
    "star_delta_30d": 1485,
    "star_delta_unit": "GitHub stars gained in the window, GH Archive events summed to as_of",
    "spark_14d": [
      2,
      170,
      311,
      286,
      67,
      25,
      67,
      103,
      199,
      90,
      54,
      12,
      62,
      23
    ],
    "hf_likes": null,
    "hf_likes_observed_at": null,
    "hn_points": null,
    "hn_points_observed_at": null,
    "store": null,
    "method": "별 총합 = GitHub에서 마지막으로 확인한 값(stars_checked_at) + 그 뒤 GH Archive에서 관측한 증가. 24h·7d·30d 증가는 GH Archive 시간별 이벤트를 기준 시각(as_of)까지 합한 값. 우리 점수는 없습니다."
  },
  "ranks": {
    "as_of": "2026-09-16T21:00:00.000Z",
    "all_time": 162,
    "rising": {
      "24h": null,
      "7d": 10,
      "30d": 9
    },
    "categories": [
      {
        "category": "design",
        "label": "디자인",
        "rank": 7
      }
    ]
  },
  "activity": {
    "pushed_at": "2026-09-15T14:50:05.000Z",
    "owner_type": "User",
    "open_issues": 46,
    "contributors": 39,
    "releases_count": 0,
    "latest_release": null,
    "checked_at": "2026-09-15T19:33:55.630Z",
    "core_checked_at": "2026-09-15T19:33:55.630Z"
  },
  "signals": [],
  "images": {
    "og": "https://tesign.com/img/diagram-design-e6998b0281.webp",
    "cover": "https://tesign.com/img/diagram-design-e6998b0281.webp",
    "cover_width": 1400,
    "cover_height": 673,
    "gallery": [
      "https://tesign.com/img/diagram-design-e6998b0281.webp",
      "https://tesign.com/img/diagram-design-aba208a9c5.webp",
      "https://tesign.com/img/diagram-design-ba6e271da6.webp",
      "https://tesign.com/img/diagram-design-d209b1e288.png"
    ],
    "alt": "스킬이 만든 아키텍처 도식 예시. 브라우저→Cloudflare→Astro 원본→콘텐츠 묶음으로 이어지는 상자와 화살표, 아래 범례가 있습니다.",
    "tier": 2
  },
  "dates": {
    "first_seen_at": "2026-09-13T07:43:26.628Z",
    "source_created_at": "2026-04-16T18:01:16.000Z",
    "discovery_hours": 3589.7029522222224,
    "launch_signal_at": "2026-09-12T22:00:00.000Z",
    "kept_at": "2026-09-13T11:32:21.641Z",
    "first_published_at": "2026-09-13T11:32:21.881Z",
    "updated_at": "2026-09-15T04:36:56.845Z",
    "ingestion_mode": "live"
  },
  "notes": [
    "이 파일은 tesign.com 항목 페이지와 같은 빌드에서 같은 데이터로 만들어졌습니다. 소개 글은 편집자가 쓴 것이고, 숫자는 저장된 관측값입니다.",
    "JSON의 null은 관측하지 않았다는 뜻입니다 — 0이 아닙니다. 마크다운에서는 [확인 필요]로 적습니다.",
    "별 총합 = GitHub에서 마지막으로 확인한 값(stars_checked_at) + 그 뒤 GH Archive에서 관측한 증가. 24h·7d·30d 증가는 GH Archive 시간별 이벤트를 기준 시각(as_of)까지 합한 값. 우리 점수는 없습니다.",
    "요약이며 법적 조언이 아닙니다."
  ]
}