drawio-logical-diagrams

Creates professional logical flow diagrams and logical system architecture diagrams using draw.io XML format (.drawio files). Use when creating: (1) logical flow diagrams showing data/process flow between system components, (2) logical architecture diagrams representing system structure without cloud provider specifics, (3) BPMN process diagrams, (4) UML diagrams (class, sequence, activity), (5) data flow diagrams (DFD), (6) decision flowcharts, or (7) system interaction diagrams. This skill focuses on generic/abstract representations, not AWS/Azure-specific architectures (use aws-drawio-architecture-diagrams for cloud diagrams).

설치로 이동 파일 검토

저장소: giuseppe-trisciuoglio/developer-kit
최근 소스 활동: 2026년 3월 24일 09:34
감지된 SKILL.md 언어: 영어
스타: 355
포크: 41

설치 방법

기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.

AI 어시스턴트로 설치

이 프롬프트를 복사해 사용 중인 AI 어시스턴트에 입력하세요.

Follow https://skillsmp.com/skill-install/prompt.md to install only the Agent Skill at https://github.com/giuseppe-trisciuoglio/developer-kit/tree/main/plugins/developer-kit-core/skills/drawio-logical-diagrams.

직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.

npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagrams

명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.

로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.

소스 파일 검토

설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.

파일 탐색기

8 개 파일

SKILL.md

소스 지침 · 읽기 전용 미리보기

name: drawio-logical-diagrams
description: Creates professional logical flow diagrams and logical system architecture diagrams using draw.io XML format (.drawio files). Use when creating: (1) logical flow diagrams showing data/process flow between system components, (2) logical architecture diagrams representing system structure without cloud provider specifics, (3) BPMN process diagrams, (4) UML diagrams (class, sequence, activity), (5) data flow diagrams (DFD), (6) decision flowcharts, or (7) system interaction diagrams. This skill focuses on generic/abstract representations, not AWS/Azure-specific architectures (use aws-drawio-architecture-diagrams for cloud diagrams).
allowed-tools: Read, Write, Bash

# Draw.io Logical Diagrams Creation ## Overview Create professional logical diagrams in draw.io's native XML format for logical flow diagrams, system architecture visualizations, and abstract process representations using generic shapes and symbols. ## When to Use - Creating logical flow diagrams showing data flow between system components - Designing logical architecture diagrams (abstract system structure) - Building BPMN process diagrams for business processes - Drawing UML diagrams (class, sequence, activity, state) - Creating data flow diagrams (DFD) for system analysis - Making decision flowcharts with branching logic - Visualizing system interactions and sequences - Documenting logical system design without cloud specifics **Do NOT use for:** AWS/Azure/GCP architecture diagrams (use `aws-drawio-architecture-diagrams`). ## Instructions ### Creating a Logical Diagram 1. **Analyze the request**: Understand the system/process to diagram 2. **Choose diagram type**: Flowchart, architecture, BPMN, UML, DFD, etc. 3. **Identify elements**: Determine actors, processes, data stores, connectors 4. **Draft XML structure**: Create the mxGraphModel with proper root cells 5. **Add shapes**: Create mxCell elements with appropriate styles 6. **Add connectors**: Link elements with edge elements 7. **Validate XML**: Verify XML is well-formed and all IDs are unique (see validation checklist below) 8. **Output**: Write the .drawio file for the user ### XML Validation Checklist Before outputting the file, verify: - [ ] All tags are properly closed (no unclosed `<mxCell>`, `</mxGeometry>`, etc.) - [ ] All cell IDs are unique (0 and 1 are reserved root cells, use sequential integers starting from 2) - [ ] All `source` and `target` attributes reference existing cell IDs - [ ] All `parent` attributes reference existing cell IDs - [ ] All coordinates (x, y, width, height) are positive numbers - [ ] Special characters are escaped (`<` → `<`, `>` → `>`, `&` → `&`) - [ ] Multi-line labels use `
` or `<br>` with `html=1` in style ### Key XML Components | Component | Description | |-----------|-------------| | `mxfile` | Root element with host and version | | `diagram` | Contains the diagram definition | | `mxGraphModel` | Canvas settings (grid, page size) | | `root` | Container for all cells (must include id="0" and id="1") | | `mxCell` | Individual shapes (vertices) or connectors (edges) | ## Draw.io XML Structure ```xml <mxfile host="app.diagrams.net" agent="Claude" version="24.7.17"> <diagram id="logical-flow-1" name="Logical Flow"> <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0"> <root> <mxCell id="0" /> <mxCell id="1" parent="0" />  </root> </mxGraphModel> </diagram> </mxfile> ``` **Key rules:** - IDs "0" and "1" are reserved for root cells - Use sequential integer IDs starting from "2" - Use landscape orientation for architecture diagrams - All coordinates must be positive and aligned to grid (multiples of 10) ## Generic Shapes and Styles ### Basic Shape Types | Shape | Style | |-------|-------| | Rectangle | `rounded=0;whiteSpace=wrap;html=1;` | | Rounded Rectangle | `rounded=1;whiteSpace=wrap;html=1;` | | Ellipse/Circle | `ellipse;whiteSpace=wrap;html=1;` | | Diamond | `rhombus;whiteSpace=wrap;html=1;` | | Cylinder | `shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;` | | Hexagon | `shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;` | | Parallelogram | `shape=ext;double=1;rounded=0;whiteSpace=wrap;html=1;` | ### Standard Color Palette | Element Type | Fill Color | Border Color | Usage | |--------------|------------|--------------|-------| | Process | `#dae8fc` | `#6c8ebf` | Operations/actions | | Decision | `#fff2cc` | `#d6b656` | Conditional branches | | Start/End | `#d5e8d4` | `#82b366` | Terminal states | | Data/Store | `#e1f5fe` | `#0277bd` | Databases/files | | Entity | `#f3e5f5` | `#7b1fa2` | External systems | | Error/Stop | `#f8cecc` | `#b85450` | Error states | | Actor/User | `#ffe0b2` | `#f57c00` | Users/actors | | Container | `#f5f5f5` | `#666666` | Grouping areas | ### Connector Styles **Standard flow:** ``` edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2; ``` **Dashed (alternative/optional):** ``` edgeStyle=orthogonalEdgeStyle;dashed=1;dashPattern=5 5;strokeColor=#666666; ``` **Arrow head styles:** - `endArrow=classic;endFill=1` - Filled triangle - `endArrow=open;endFill=0` - Open arrow - `endArrow=blockThin;endFill=1` - Block arrow ## Diagram Types | Type | Key Elements | |------|--------------| | Logical Flow | Actors (orange), Services (blue), Data Stores (cyan), External Systems (purple) | | Logical Architecture | Layered containers with nested components | | BPMN | Circle (Start/End), Rounded Rectangle (Activity), Diamond (Gateway) | | UML Sequence | Vertical lifelines with message arrows | | DFD | Square (Entity), Circle (Process), Open Rectangle (Data Store) | ## Reference Files For detailed shape examples and style references, see: - [shape-styles.md](references/shape-styles.md) - Complete shape examples and style reference - [diagram-templates.md](references/diagram-templates.md) - Ready-to-use templates ## Examples ### Example 1: Order Processing Flow **Request:** "Create a logical flow diagram showing order processing: customer submits order, system validates, if valid then processes payment and ships, if invalid notifies customer." ```xml <mxfile host="app.diagrams.net" agent="Claude" version="24.7.17"> <diagram id="order-flow-1" name="Order Processing"> <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0"> <root> <mxCell id="0"/><mxCell id="1" parent="0"/> <mxCell id="2" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;" vertex="1" parent="1"><mxGeometry x="80" y="50" width="80" height="40" as="geometry"/></mxCell> <mxCell id="3" value="Submit Order" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="1"><mxGeometry x="60" y="130" width="120" height="60" as="geometry"/></mxCell> <mxCell id="4" value="Validate
Order?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;" vertex="1" parent="1"><mxGeometry x="80" y="230" width="80" height="80" as="geometry"/></mxCell> <mxCell id="5" value="Notify
Customer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=12;" vertex="1" parent="1"><mxGeometry x="220" y="240" width="100" height="50" as="geometry"/></mxCell> <mxCell id="6" value="Process
Payment" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="1"><mxGeometry x="60" y="350" width="120" height="60" as="geometry"/></mxCell> <mxCell id="7" value="Ship Order" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="1"><mxGeometry x="60" y="450" width="120" height="60" as="geometry"/></mxCell> <mxCell id="8" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;" vertex="1" parent="1"><mxGeometry x="80" y="550" width="80" height="40" as="geometry"/></mxCell> <mxCell id="10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="2" target="3"><mxGeometry relative="1" as="geometry"/></mxCell> <mxCell id="11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="3" target="4"><mxGeometry relative="1" as="geometry"/></mxCell> <mxCell id="12" value="No" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#b85450;strokeWidth=2;fontSize=11;" edge="1" parent="1" source="4" target="5"><mxGeometry relative="1" as="geometry"/></mxCell> <mxCell id="13" value="Yes" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#82b366;strokeWidth=2;fontSize=11;" edge="1" parent="1" source="4" target="6"><mxGeometry relative="1" as="geometry"/></mxCell> <mxCell id="14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="6" target="7"><mxGeometry relative="1" as="geometry"/></mxCell> <mxCell id="15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="7" target="8"><mxGeometry relative="1" as="geometry"/></mxCell> <mxCell id="16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#b85450;strokeWidth=2;" edge="1" parent="1" source="5" target="8"><mxGeometry relative="1" as="geometry"/></mxCell> </root> </mxGraphModel> </diagram> </mxfile> ``` ### Example 2: Three-Tier Logical Architecture **Request:** "Create a logical architecture diagram for a web application with presentation, business logic, and data tiers." ```xml <mxfile host="app.diagrams.net" agent="Claude" version="24.7.17"> <diagram id="three-tier-1" name="Three-Tier Architecture"> <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0"> <root> <mxCell id="0"/><mxCell id="1" parent="0"/>

GitHub에서 보기

이 SKILL.md는 매우 커서 SkillsMP가 여기에는 첫 섹션만 미리 보여줍니다. GitHub에서 보기

검색으로 돌아가기 설치로 돌아가기

pr-review-comments

Posts review findings from a JSON file as inline comments on a GitHub Pull Request, attaching each comment to its file and line. Use when you have a list/JSON of review findings (each with a file path, line number, and a message such as summary/failure_scenario) and want them published on a PR as inline review comments. Triggers include "post these review comments on the PR", "associate comments to files in the PR", "publish review findings to PR

2026-06-15

typescript-security-review

Provides security review capability for TypeScript/Node.js applications, validates code against XSS, injection, CSRF, JWT/OAuth2 flaws, dependency CVEs, and secrets exposure. Use when performing security audits, before deployment, reviewing authentication/authorization implementations, or ensuring OWASP compliance for Express, NestJS, and Next.js. Triggers on "security review", "check for security issues", "TypeScript security audit".

2026-06-05

bug-fix-brief

Generates a structured Bug Fix Brief (BFB) to document issue corrections. Includes root cause analysis, repro steps, fix options, and fix checklist. Use when user asks to create a BFB, document a bug fix, or generate a bug correction document.

2026-05-02

이 저장소의 모든 Skills 보기

drawio-logical-diagrams

소스 정보

설치 방법

AI 어시스턴트로 설치

소스 파일 검토

이 저장소의 다른 Skills

AI 어시스턴트로 설치

이 저장소의 다른 Skills