Community코딩 & 개발github.com

wliafe/drawio-skill

Next AI Draw.io MCP를 활용하여 연결 확인, 권한 부여 설치 안내, 세션 및 다이어그램 객체 조작, 현재 변경 사항 저장 및 drawio, PNG, SVG, 편집 가능한 drawio.svg 형식으로 내보내기를 수행합니다. MCP 호출이 필요하거나, 이미지 삽입 전 용량 제어, 동기화 내보내기 및 주제별 버전 관리 파일을 다루는 작업에 적합합니다.

drawio-skill란 무엇인가요?

이 스킬은 Next AI Draw.io MCP Server(`@next-ai-drawio/mcp-server`)와 통합되어 AI 에이전트(Claude Code, Cursor, Codex 등)가 다이어그램 작업을 안정적으로 실행할 수 있도록 지원합니다. 연결 상태를 확인하고, 권한 부여 설치를 안내하며, 세션 및 다이어그램 객체를 직접 조작하고, 최종적으로 다이어그램 파일을 `.drawio`, `.png`, `.svg`, `.drawio.svg` 형식으로 내보냅니다. 특히 이미지 삽입 전 용량을 제어하여 MCP 제한을 준수하고, 동기화 상태를 보장하며, 주제와 버전별로 파일을 체계적으로 관리합니다. 이 스킬은 기존 파일 편집, 새로운 다이어그램 생성, 그리고 사용자 편집 내용 저장 등 다양한 시나리오를 처리하며, 자체적으로 디자인이나 레이아웃을 결정하지 않고 사용자 지시와 MCP 도구 기능에 충실하게 작동합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add wliafe/drawio-skill

Installed? Explore more 코딩 & 개발 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

Draw.io MCP 조작 스킬

Next AI Draw.io MCP Server(@next-ai-drawio/mcp-server)를 사용하여 이미 결정된 그리기 작업을 실행합니다. 이 스킬은 도구 사용과 안정적인 결과물 전달을 담당하며, 구도, 색상, 글꼴 또는 연구 표현 방법을 지정하지 않습니다. 핵심 프로세스는 다양한 AI 클라이언트에 적용 가능하며, 도구 검색, 호출 및 스킬 로딩 방식은 현재 호스트에 의해 결정됩니다.

먼저 작업과 서비스 확인

  1. 사용자 요청과 현재 컨텍스트에서 다음을 확인합니다: 새로 만들기, 기존 파일 수정, 현재 캔버스 계속 작업, 또는 사용자가 방금 수동으로 수행한 변경 사항 저장. 명시적으로 지정된 자료, 대상 디렉토리 및 기존 버전을 우선적으로 사용합니다.
  2. 현재 노출된 MCP 도구를 확인하고, 실제 도구 설명에 따라 아래의 서비스 도구 이름(예: get_diagram, edit_diagram, export_diagram)을 매핑합니다. 클라이언트 네임스페이스, 서비스 별칭 또는 호출 구문을 하드코딩하지 마십시오.
  3. 대상 도구가 이미 노출되어 있고 현재 클라이언트가 호출을 허용하는 경우, 읽기 전용 get_drawing_guide를 사용하여 응답을 확인합니다. 기존 비활성화 또는 거부 결정은 유지합니다. 이미 사용 가능하면 계속 진행하고, 반복 추가하지 않습니다. 도구가 노출되지 않았다고 해서 설치되지 않은 것은 아닙니다. 구성, 설치, 재로드 또는 진단이 필요한 경우, MCP 확인 및 설치를 참조하십시오.
  4. 이 절차는 위 패키지를 대상으로 합니다. 사용자가 다른 그리기 서비스를 명시적으로 지정하는 경우 해당 선택을 유지하고, 적응 경계를 설명하며 임의로 대체하지 않습니다.

기존 서비스는 패크키지 ID로 식별되며, 서비스 이름이 반드시 drawio일 필요는 없습니다. 구성이 보이지만 아직 실제로 응답하지 않은 경우에만 "구성됨, 아직 확인되지 않음"으로 보고합니다. 터미널 또는 구성 액세스 기능이 없는 경우, 현재 실행 가능한 방법을 제공하고 확인할 수 없다고 해서 서비스가 존재하지 않는다고 말하지 않습니다.

전달 위치와 버전 확인

기본적으로 프로젝트 문서/주제 이름/v1/에 네 개의 동일한 이름 파일을 저장합니다: 주제 이름.drawio, 주제 이름.png, 주제 이름.svg, 주제 이름.drawio.svg. 이름은 한글 또는 영어일 수 있으며, 버전은 디렉토리에만 포함됩니다. 새 주제는 v1부터 시작합니다. 기존 다이어그램은 현재 버전을 유지하며, 사용자가 명시적으로 요청하는 경우에만 새 vN을 추가합니다.

기존 파일은 원래 경로와 이름을 계속 사용하며, 자동으로 이름을 변경하거나, 이동하거나, 버전을 업그레이드하지 않습니다. 사용자가 지정한 디렉토리, 형식 및 편집 경계가 우선합니다. 이름 지정, 새 버전, 여러 페이지 또는 다이어그램 분할과 관련된 경우, 그리기 및 파일 규칙을 참조하십시오.

세션 및 객체 조작

  • 현재 작업에서 제공된 내용과 설계에 따라 MCP 작업을 실행합니다. 필요한 입력을 추론할 수 없는 경우, 작업 객체나 결과에 영향을 미칠 누락된 항목만 확인합니다.
  • 이미 확인된 대상 세션을 우선적으로 재사용합니다. 새 세션을 만들거나 복원해야 하는 경우에만 start_session을 호출하고, 그 안의 도구 형식과 작업 제약 조건을 읽습니다. 해당 정보가 없으면 get_drawing_guide를 사용합니다. 연결 확인을 위해 새 세션을 만들 필요는 없습니다.
  • 기존 파일에 load_diagram을 사용한 후, 먼저 get_diagram을 호출하여 객체 ID를 읽고, edit_diagram을 통해 ID별로 수정합니다. 현재 캔버스가 알려져 있고 여전히 유효한 경우 직접 로컬 편집을 수행할 수 있습니다. 동시 수정 충돌이 발생하는 경우, 서비스에서 반환된 최신 내용을 기반으로 편집을 재구성하고 사용자의 새 수정 사항을 덮어쓰지 않습니다.
  • load_diagram과 create_new_diagram은 현재 문서를 대체합니다. 전환하기 전에 현재 캔버스가 대상인지, 보존해야 할 수동 수정 사항이 있는지 확인합니다. 사용자가 현재 변경 사항을 저장하도록 요청한 경우, 디스크의 기존 파일을 먼저 로드하지 않고 현재 캔버스를 직접 읽고 내보냅니다.
  • 새 다이어그램을 만들거나 사용자가 명시적으로 전체 교체를 요청하는 경우에만 create_new_diagram을 사용합니다. 모든 .drawio / .drawio.svg 쓰기 및 수정은 MCP를 통해 이루어집니다. 파일 도구나 스크립트를 사용하여 다이어그램 XML을 직접 다시 쓰지 마십시오. 도구에서 요구하는 대로 XML 매개변수를 구성하는 것은 정상적인 호출에 속합니다.
  • 텍스트, 노드, 관계 및 그룹은 편집 가능한 상태를 유지합니다. 자료는 포함될 수 있지만, 전체 다이어그램을 평평하게 만들어 이미지로 변환하여 편집 가능한 소스 파일을 대체해서는 안 됩니다.
  • 클라우드 서비스, 네트워크 장치 등의 아이콘을 사용하기 전에 get_shape_library를 호출하고 반환된 실제 스타일 이름을 사용합니다. 아이콘 식별자를 추측하지 마십시오.
  • 여러 페이지 편집의 경우 먼저 list_pages를 사용하여 대상을 확인하고, 페이지 선택 매개변수를 명시적으로 사용하며 기본 첫 페이지에 의존하지 않습니다. 사용자가 "이 상자", "선택한 화살표"라고 말할 때 get_selection을 사용할 수 있습니다. 선택 읽기를 사용할 수 없는 경우 캔버스를 읽고 페이지, 레이블 및 위치별로 찾습니다. 그래도 여러 후보가 있으면 구체적으로 질문하고, 서비스를 다시 설치하거나 반복해서 재선택을 요구하지 않습니다.

이미지 및 용량

이미지를 삽입하기 전에 이미지 전처리 및 용량 제어를 읽으십시오. 먼저 자료와 예상 포함 크기를 확인하고, 필요한 경우 복사본을 압축합니다. 사진은 적당한 크기 조정과 손실 압축을 허용하고, 텍스트, 가는 선 및 투명 자료는 충실도를 우선시합니다. 원본 자료를 덮어쓰지 않으며, 전처리 소프트웨어를 자동으로 설치하지 않습니다.

예산은 실제 Base64, 전체 다이어그램 XML, 직렬화된 요청 및 내보내기 응답을 포함해야 합니다. get_diagram은 이미지 데이터를 접을 수 있으므로 반환된 텍스트 길이만으로 다이어그램이 제한을 초과하지 않았다는 증거가 될 수 없습니다. 큰 자료를 삽입한 후에는 일찍 MCP를 통해 시험 내보내기를 수행합니다. 다이어그램 생성, 수정 및 네 가지 형식 내보내기는 MCP만 사용하며, 다른 도구로 내보내기를 보충하거나 노출되지 않은 width, height, scale 등의 매개변수를 조작하지 마십시오.

허용 가능한 선명도로 압축한 후에도 여전히 차단되는 경우, 성공 결과를 유지하고 병목 현상을 설명하며, 사용자가 계속 압축할지, 자료를 삭제할지, 다이어그램을 분할할지 결정하도록 합니다. 내용을 자동으로 변경하거나 페이지를 나누지 않습니다.

저장 및 내보내기

  1. 저장하기 전에 get_diagram을 사용하여 현재 캔버스, 해당 파일, 페이지 및 출력 경로를 읽습니다. 먼저 동기화 경고를 확인합니다. "호출 성공했지만 최신 수동 변경 사항이 누락될 수 있음"은 최신 상태가 확인되지 않았음을 의미합니다. 먼저 동기화를 복원한 후 공식 내보내기를 수행합니다. 도구가 이미 파일을 쓴 경우, 해당 파일의 최신 상태가 아직 확인되지 않았음을 명확히 하고 복원 후 다시 내보냅니다.
  2. export_diagram을 통해 .drawio를 저장합니다. 전체 여러 페이지 소스 파일은 페이지 선택 매개변수 없이 내보냅니다. 기본적으로 PNG, SVG, 편집 가능한 .drawio.svg도 내보내며, 사용자가 특정 형식만 필요한 경우 그에 따라 처리합니다. 이미지와 편집 가능한 SVG는 대상 페이지를 명시적으로 선택하고 브라우저의 활성 페이지에 의존하지 않습니다.
  3. .drawio.svg는 해당 형식을 실제로 내보내 생성하며, 일반 SVG의 이름을 변경하여 대체할 수 없습니다. 포함된 다이어그램 소스 내용을 확인합니다. 안전한 재읽기 전에 현재 캔버스를 먼저 저장합니다. 여러 페이지인 경우 이 복사본에 포함된 페이지를 설명하고, 단일 페이지 복사본을 완전한 소스 파일로 간주해서는 안 됩니다.
  4. 내보낸 후 관찰 가능한 내용 상태를 다시 읽고 확인하며 동기화 경고를 확인합니다. 서비스에 일반적인 스냅샷 잠금이 없습니다. 기간 중 내용이 변경된 경우 다시 동기화하고 영향을 받는 파일을 다시 내보내며, 한 번의 읽기가 네 파일의 일관성을 보장한다고 가정하지 않습니다. 지속적으로 변경되거나 확인할 수 없는 경우 동기화 검증이 완료되지 않았음을 명확히 하고, 필요한 경우 사용자에게 수동 편집을 잠시 중단하도록 요청합니다.
  5. 경로는 MCP가 실제로 실행되는 환경의 절대 경로를 사용합니다. 파일 생성 및 최종 렌더링의 내용 완전성, 자료 누락 여부를 확인합니다. 스크린샷이 정상이라고 해서 공식 내보내기가 성공한 것은 아닙니다. 읽기 전용 XML을 보거나 내보내기 성공 메시지를 보는 것도 실제 렌더링 확인을 대체할 수 없습니다.
  6. 연결이 복구되면 한 번 재시도할 수 있습니다. 용량 문제가 명확한 경우 먼저 용량을 수정한 후 영향을 받는 단계를 한 번 재시도합니다. 변경 사항이 없으면 반복 호출하지 않으며, 여전히 실패하면 구체적인 병목 현상과 누락된 형식을 설명합니다. 자세한 저장 규칙은 그리기 및 파일 규칙을 참조하십시오.

결과 피드백

소스 파일, 이미지, 사용된 버전 및 완료된 검사를 간략히 설명합니다. "구성 존재", "도구 응답", "파일 저장됨", "렌더링 확인됨"을 각각 사실대로 보고합니다.

이미지 내보내기 또는 시각적 검사가 차단되는 경우, 먼저 성공적으로 저장된 소스 파일을 보관하고 누락된 형식과 구체적인 이유를 설명합니다. 이전 이미지를 현재 내보내기로 사용하거나 확인되지 않은 부분을 완료된 것으로 작성하지 마십시오.

관련 스킬