<mxfile host="Electron" modified="2026-10-07T00:00:00.000Z" version="26.0.0">
<diagram id="signup-flow" name="User Sign-Up">
<mxGraphModel dx="1422" dy="762" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="title" value="User Sign-Up Process" style="text;strokeColor=none;fillColor=none;fontSize=18;fontStyle=1;align=center;verticalAlign=middle;html=1;" vertex="1" parent="1">
<mxGeometry x="260" y="10" width="200" height="30" as="geometry" />
</mxCell>
<mxCell id="start" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
<mxGeometry x="300" y="60" width="120" height="50" as="geometry" />
</mxCell>
<mxCell id="form" value="User submits sign-up form" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
<mxGeometry x="280" y="150" width="160" height="60" as="geometry" />
</mxCell>
<mxCell id="validate" value="Email valid?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
<mxGeometry x="280" y="250" width="160" height="100" as="geometry" />
</mxCell>
<mxCell id="error" value="Show error message" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
<mxGeometry x="540" y="270" width="140" height="60" as="geometry" />
</mxCell>
<mxCell id="create" value="Create account" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
<mxGeometry x="280" y="410" width="160" height="60" as="geometry" />
</mxCell>
<mxCell id="send" value="Send verification email" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
<mxGeometry x="280" y="510" width="160" height="60" as="geometry" />
</mxCell>
<mxCell id="click" value="User clicks verification link" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
<mxGeometry x="280" y="610" width="160" height="60" as="geometry" />
</mxCell>
<mxCell id="end" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
<mxGeometry x="300" y="710" width="120" height="50" as="geometry" />
</mxCell>
<mxCell id="e1" value="" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="start" target="form" parent="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="e2" value="" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="form" target="validate" parent="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="e3" value="No" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="validate" target="error" parent="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="e4" value="Back to form" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" source="error" target="form" parent="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="e5" value="Yes" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="validate" target="create" parent="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="e6" value="" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="create" target="send" parent="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="e7" value="" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="send" target="click" parent="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="e8" value="" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="click" target="end" parent="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>
Summary: The flowchart runs top to bottom. It starts at Start, then User submits sign-up form, then an Email valid? decision.
- No: Show error message, then an arrow labeled "Back to form" returns to the form step.
- Yes: Create account, then Send verification email, then User clicks verification link, then End.
Colors: green for start and end, blue for process steps, yellow for the decision, red for the error.
To use it, save the XML as user-signup-flow.drawio. You can open it in VS Code with the draw.io extension, or in the draw.io web or desktop app.
I couldn't run the validator script because I have no file-writing or shell access here. I checked the XML by hand against the skill's checklist:
- The root cells and ids are correct.
- Every edge's source and target exist.
- Every vertex has a geometry.
试用方式：试用环境不能写文件，所以我让模型把完整的 .drawio 内容输出在回答里。模型说没法运行校验脚本，我事后把它的 XML 存成文件，用随包的校验脚本检查通过，并用本机 draw.io 渲染确认图是对的（开始、校验邮箱、无效回到表单、有效创建账号、发验证邮件、结束）。
하는 일
draw.io의 VS Code 확장, 웹 앱, 데스크톱 앱에서 바로 열리는, 구조가 올바른 .drawio 파일(그리고 .drawio.svg, .drawio.png)을 만들도록 모델에게 가르칩니다. 순서도, 시스템 아키텍처, 시퀀스 다이어그램, ER 다이어그램, UML 클래스 다이어그램, 네트워크 토폴로지를 다루며, 레이아웃 전략, 도형 라이브러리, 스타일 문자열, XML 스키마가 참고 파일로 있고, 바로 쓸 수 있는 템플릿 5개(순서도, UML 클래스, 아키텍처, ER, 시퀀스)가 있습니다.
보조 스크립트
add-shape.py: 기존.drawio파일의 지정한 좌표에 새 도형을 삽입합니다.--dry-run을 지원합니다.validate-drawio.py: 파일 구조를 점검하며 파일은 바꾸지 않습니다.
이런 때 좋습니다
아키텍처, 데이터 모델, 흐름을 편집 가능한 다이어그램으로 저장소에 남길 때.
중간 위험：`add-shape.py`는 지정한 `.drawio` 파일을 다시 씁니다(먼저 `--dry-run`을 쓰고 파일을 버전 관리에 두세요). `validate-drawio.py`는 읽기만 합니다. 두 스크립트 모두 Python 표준 라이브러리만 쓰며 네트워크 요청을 하지 않습니다. 지침에서 draw.io의 VS Code 확장(`hediet.vscode-drawio`) 설치를 권하는데 선택 사항입니다. 시험 실행함: 지침대로 모델이 회원가입 흐름도를 만들었고, 포함된 검증 스크립트를 통과했으며 draw.io 데스크톱으로 렌더링해 흐름·분기·색상이 올바른 것을 확인했습니다. 도형 추가, `--dry-run`, 검증 오류, 파일이 없는 경우도 시험했습니다. 제한: 지침 속 스크립트 경로가 `.github/skills/draw-io-diagram-generator/scripts/…`로 적혀 있어 다른 곳에 설치했다면 직접 고쳐야 합니다. 포함된 시퀀스 다이어그램 템플릿에서는 메모가 첫 번째 메시지 글자와 겹칩니다.